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

1.考慮到input的原生界面不好看，在按照設計稿搭建好頁面后，在添加錄音或者音頻的同一層寫入input框,使用定位和透明度opacity為0加上z-index使其浮在你的設計稿添加錄音上方，如圖一及下方代碼：

解釋：

• type="file" 帶有 type="file" 的 元素允許用戶可以從他們的設備中選擇一個或多個文件。
• accept="audio/" 定義了文件 input 應該接受的文件類型,字符串 audio/，表示“任何音頻文件”。
• @change="uploadAudio",表示點擊上傳文件確認鍵后執(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.這時input可以進行點擊彈出上傳界面之后，開始實現(xiàn)錄音播放功能。使用的元素是audio，這里我也是把原生的樣式給隱藏掉了，使用設計稿上面的點擊播放和暫停的按鈕去實現(xiàn)錄音的播放和暫停。

<audio ref="audioPlay" :src="audioSrc"  style="opacity: 0;position: absolute;left: -999px;"@ended="onAudioEnded">

流程：

• 如果是vue框架進行的開發(fā)，這里使用vue3進行演示，首先定義audio內(nèi)的一些內(nèi)容：

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

• 頁面初始化時渲染dom：

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

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

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

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

優(yōu)化：

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

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

代碼實現(xiàn)：

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

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

總結(jié)：以上就是使用input框?qū)崿F(xiàn)音頻文件的上傳與播放實現(xiàn)的所有代碼和邏輯，實現(xiàn)點擊播放圖標后音頻開始播放，圖標變?yōu)闀和５炔僮鳌?/p>

以上就是使用JS的input框?qū)崿F(xiàn)音頻文件的上傳與播放功能的詳細內(nèi)容，更多關于JS input音頻上傳與傳播的資料請關注腳本之家其它相關文章！

最新評論