使用JS的input框?qū)崿F(xiàn)音頻文件的上傳與播放功能
序言:最近的系統(tǒng)加的功能是越來(lái)越多了,前兩天老板又讓實(shí)現(xiàn)一個(gè)錄音上傳的功能,可以點(diǎn)擊播放按鈕打開(kāi)音頻播放器,點(diǎn)擊暫停按鈕暫定播放。想了想決定使用input框的file類型加上接收的參數(shù)為audio來(lái)實(shí)現(xiàn)此功能。
1.考慮到input的原生界面不好看,在按照設(shè)計(jì)稿搭建好頁(yè)面后,在添加錄音或者音頻的同一層寫(xiě)入input框,使用定位和透明度opacity為0加上z-index使其浮在你的設(shè)計(jì)稿添加錄音上方,如圖一及下方代碼:
解釋:
- type="file" 帶有 type="file" 的 元素允許用戶可以從他們的設(shè)備中選擇一個(gè)或多個(gè)文件。
- accept="audio/" 定義了文件 input 應(yīng)該接受的文件類型,字符串 audio/,表示“任何音頻文件”。
- @change="uploadAudio",表示點(diǎn)擊上傳文件確認(rèn)鍵后執(zhí)行的操作。
<div class="voice" style:"position:relative"> <input type="file" accept="audio/*" id="audioUpload" class="audioUpload" @change="uploadAudio"> <div class="add"> <img src="png" alt="" > <span>添加音頻</span> </div> </div> <style> .audioUpload{ position: absolute; right: ?px; top: ?px; height: 22px; z-index: 20; opacity: 0; } </style>
2.這時(shí)input可以進(jìn)行點(diǎn)擊彈出上傳界面之后,開(kāi)始實(shí)現(xiàn)錄音播放功能。使用的元素是audio,這里我也是把原生的樣式給隱藏掉了,使用設(shè)計(jì)稿上面的點(diǎn)擊播放和暫停的按鈕去實(shí)現(xiàn)錄音的播放和暫停。
<audio ref="audioPlay" :src="audioSrc" style="opacity: 0;position: absolute;left: -999px;"@ended="onAudioEnded">
流程:
- 如果是vue框架進(jìn)行的開(kāi)發(fā),這里使用vue3進(jìn)行演示,首先定義audio內(nèi)的一些內(nèi)容:
let audioSrc = ref('') //這里為你的音頻文件路徑 const audioPlay = ref(null)
- 頁(yè)面初始化時(shí)渲染dom:
onMounted(() => { audioPlay.value = document.querySelector('audio'); });
- 在圖標(biāo)上使用點(diǎn)擊事件實(shí)現(xiàn)音頻播放和暫停(這里使用nextTick的原因是nextTick所指定的回調(diào)會(huì)在瀏覽器更新DOM完畢之后再執(zhí)行):
//點(diǎn)擊播放 function beginPlay(){ nextTick(() => { audioPlay.value[0].play(); }) } //點(diǎn)擊暫停 function stopPlay(){ audioPlay.value[0].pause() }
結(jié)語(yǔ):到這里就可以點(diǎn)擊圖標(biāo)實(shí)現(xiàn)音頻的播放和暫停。
優(yōu)化:
既然公司要求上傳錄音或者音頻,那肯定會(huì)給你上傳音頻的接口和音頻列表的接口,所以這時(shí)候,頁(yè)面上就不止一個(gè)錄音文件。
并且我們的播放和暫停圖標(biāo)肯定是通過(guò)接口傳來(lái)的列表數(shù)據(jù)渲染出來(lái)的,那么就出現(xiàn)一個(gè)問(wèn)題,點(diǎn)擊播放的時(shí)候所有列表的播放圖標(biāo)全部都會(huì)切換到暫停圖標(biāo),如何做到點(diǎn)擊第一個(gè)音頻文件只讓第一個(gè)的播放圖標(biāo)改變其他的圖標(biāo)不改變呢?
代碼實(shí)現(xiàn):
注意:最好不要把a(bǔ)udio也放進(jìn)列表的渲染中,這樣頁(yè)面會(huì)有多個(gè)audio的文件,最后你需要forEach你的audio存的文件,解決辦法是放在需要循環(huán)列表的同一級(jí)上。
1.在你渲染好音頻列表接口后,你的頁(yè)面可能會(huì)有這兩個(gè)圖標(biāo)(播放圖標(biāo)和暫停圖標(biāo)。點(diǎn)擊播放圖標(biāo)后音頻開(kāi)始播放,圖標(biāo)變?yōu)闀和#?/p>
<img src="../assets/images/voiceBegin.png" alt="" v-if="!isPlaying || activeId !== item.id" @click="beginPlay(item.voice,item.id)">
<img src="../assets/images/voicePause.png" alt="" v-if="isPlaying && activeId === item.id" @click="stopPlay(item.id)">
這里使用 isPlaying 和 activeId 兩個(gè)變量控制圖標(biāo)的顯隱。item.voice就是你的音頻列表接口的音頻路徑, 如下代碼和圖二:
const isPlaying = ref(false) let activeId = ref(null) //開(kāi)始播放 function beginPlay(url,id){ isPlaying.value = true activeId.value = id audioSrc.value = url nextTick(() => { audioPlay.value[0].play(); }) } //暫停播放 function stopPlay(id){ audioPlay.value[0].pause() isPlaying.value = false activeId.value = null } //錄音播放結(jié)束后圖標(biāo)自動(dòng)跳轉(zhuǎn)到播放圖標(biāo) function onAudioEnded(){ isPlaying.value = false activeId.value = null }
總結(jié):以上就是使用input框?qū)崿F(xiàn)音頻文件的上傳與播放實(shí)現(xiàn)的所有代碼和邏輯,實(shí)現(xiàn)點(diǎn)擊播放圖標(biāo)后音頻開(kāi)始播放,圖標(biāo)變?yōu)闀和5炔僮鳌?/p>
以上就是使用JS的input框?qū)崿F(xiàn)音頻文件的上傳與播放功能的詳細(xì)內(nèi)容,更多關(guān)于JS input音頻上傳與傳播的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解使用Next.js構(gòu)建服務(wù)端渲染應(yīng)用
這篇文章主要介紹了詳解使用Next.js構(gòu)建服務(wù)端渲染應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07跟我學(xué)習(xí)javascript的浮點(diǎn)數(shù)精度
跟我學(xué)習(xí)javascript的浮點(diǎn)數(shù)精度,帶大家真正的理解JavaScript的浮點(diǎn)數(shù),提醒大家當(dāng)心浮點(diǎn)運(yùn)算中的精度陷阱,需要的朋友可以參考下2015-11-11小程序開(kāi)發(fā)調(diào)用微信支付以及微信回調(diào)地址配置
本文主要介紹了小程序開(kāi)發(fā)調(diào)用微信支付以及微信回調(diào)地址配置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05詳解微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js使用詳解
這篇文章主要介紹了移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JavaScript閉包和作用域鏈的定義實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript閉包和作用域鏈的定義與實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Fastest way to build an HTML string(拼裝html字符串的最快方法)
Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 20092011-08-08JavaScript字符和ASCII實(shí)現(xiàn)互相轉(zhuǎn)換
這篇文章主要介紹了JavaScript字符和ASCII實(shí)現(xiàn)互相轉(zhuǎn)換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06