快捷導(dǎo)航

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

更新時(shí)間：2024年06月19日 10:08:33 作者：WebWarrior

最近的系統(tǒng)加的功能是越來越多了,前兩天老板又讓實(shí)現(xiàn)一個(gè)錄音上傳的功能,可以點(diǎn)擊播放按鈕打開音頻播放器,點(diǎn)擊暫停按鈕暫定播放,想了想決定使用input框的file類型加上接收的參數(shù)為audio來實(shí)現(xiàn)此功能,感興趣的朋友可以參考下

序言：最近的系統(tǒng)加的功能是越來越多了，前兩天老板又讓實(shí)現(xiàn)一個(gè)錄音上傳的功能，可以點(diǎn)擊播放按鈕打開音頻播放器，點(diǎn)擊暫停按鈕暫定播放。想了想決定使用input框的file類型加上接收的參數(shù)為audio來實(shí)現(xiàn)此功能。

1.考慮到input的原生界面不好看，在按照設(shè)計(jì)稿搭建好頁面后，在添加錄音或者音頻的同一層寫入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)擊彈出上傳界面之后，開始實(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)行的開發(fā)，這里使用vue3進(jìn)行演示，首先定義audio內(nèi)的一些內(nèi)容：

let audioSrc = ref('') //這里為你的音頻文件路徑
const audioPlay = ref(null)

頁面初始化時(shí)渲染dom：

onMounted(() => {
  audioPlay.value = document.querySelector('audio');
});

在圖標(biāo)上使用點(diǎn)擊事件實(shí)現(xiàn)音頻播放和暫停（這里使用nextTick的原因是nextTick所指定的回調(diào)會在瀏覽器更新DOM完畢之后再執(zhí)行）：

//點(diǎn)擊播放
function beginPlay(){
    nextTick(() => {
      audioPlay.value[0].play();
    })
}
//點(diǎn)擊暫停
function stopPlay(){
  audioPlay.value[0].pause()
}

結(jié)語：到這里就可以點(diǎn)擊圖標(biāo)實(shí)現(xiàn)音頻的播放和暫停。

優(yōu)化：

既然公司要求上傳錄音或者音頻，那肯定會給你上傳音頻的接口和音頻列表的接口，所以這時(shí)候，頁面上就不止一個(gè)錄音文件。

并且我們的播放和暫停圖標(biāo)肯定是通過接口傳來的列表數(shù)據(jù)渲染出來的，那么就出現(xiàn)一個(gè)問題，點(diǎn)擊播放的時(shí)候所有列表的播放圖標(biāo)全部都會切換到暫停圖標(biāo)，如何做到點(diǎn)擊第一個(gè)音頻文件只讓第一個(gè)的播放圖標(biāo)改變其他的圖標(biāo)不改變呢？

代碼實(shí)現(xiàn)：

注意：最好不要把a(bǔ)udio也放進(jìn)列表的渲染中，這樣頁面會有多個(gè)audio的文件，最后你需要forEach你的audio存的文件，解決辦法是放在需要循環(huán)列表的同一級上。

1.在你渲染好音頻列表接口后，你的頁面可能會有這兩個(gè)圖標(biāo)（播放圖標(biāo)和暫停圖標(biāo)。點(diǎn)擊播放圖標(biāo)后音頻開始播放，圖標(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)
 
//開始播放
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)自動跳轉(zhuǎn)到播放圖標(biāo)
function onAudioEnded(){
  isPlaying.value = false
  activeId.value = null
}