欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用JS的input框?qū)崿F(xiàn)音頻文件的上傳與播放功能

 更新時(shí)間:2024年06月19日 10:08:33   作者:WebWarrior  
最近的系統(tǒng)加的功能是越來(lái)越多了,前兩天老板又讓實(shí)現(xiàn)一個(gè)錄音上傳的功能,可以點(diǎn)擊播放按鈕打開(kāi)音頻播放器,點(diǎn)擊暫停按鈕暫定播放,想了想決定使用input框的file類型加上接收的參數(shù)為audio來(lái)實(shí)現(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)文章

最新評(píng)論