AudioPlayer.js實(shí)現(xiàn)限制僅播放一條語音、多條語音順序播放、自動(dòng)播放(有限制)、調(diào)整語音條長(zhǎng)度

使用場(chǎng)景:語音直播，實(shí)現(xiàn)點(diǎn)擊播放某一條語音，暫停其他播放中的語音。播完一條語音，自動(dòng)播放下一條。當(dāng)接收到新語音，且沒有播放中的音頻，自動(dòng)播放這條語音

這里只貼出代碼片段，源碼和更改后的源碼可在這下載

僅播放一條語音

思路：當(dāng)點(diǎn)擊音頻播放按鈕時(shí)，控制其他音頻暫停

1.將所有語音循環(huán)調(diào)用插件

$('#audio_'+audio_id).audioPlayer();

2.AudioPlayer.js中已經(jīng)有點(diǎn)擊事件，在此基礎(chǔ)上添加邏輯即可

更改后：

解釋：

當(dāng)初始化后，audio元素變成下圖所示了。可以通過改變class值來達(dá)到更改audio顯示狀態(tài)的目的

多條語音順序播放

思路：給audio標(biāo)簽添加監(jiān)聽事件，當(dāng)語音播完后，控制下一條語音播放

//連續(xù)播放音頻 function continuousPlayAudio() {let audios = $('audio');for (let i = 0; i < audios.length; i++) {let maxLength = i + 1;let nextAudio = audios[maxLength];audios[i].addEventListener('ended', function(event) {if (audios.length === maxLength) return false;$(nextAudio).parents(".audioplayer").removeClass("audioplayer-stopped");$(nextAudio).parents(".audioplayer").addClass("audioplayer-playing");nextAudio.play();}, false);} }

自動(dòng)播放

當(dāng)新插入語音，并且當(dāng)前沒有播放中的音頻，則播放新語音

function autoPlayAudio(audio_id, type) {$('#audio_'+ audio_id).audioPlayer();//初始化音頻if (type === 'new_audio' && !isHasPlayingAudio() ) {//新插入音頻并且沒有播放中的音頻$('#audio_'+ audio_id).parents(".audioplayer").removeClass("audioplayer-stopped")$('#audio_'+ audio_id).parents(".audioplayer").addClass("audioplayer-playing")$('#audio_'+ audio_id).next().attr('title', 'Pause').find('a').html('Pause');$('#audio_'+ audio_id).play();//如果監(jiān)聽到音頻由于一些原因沒有播放(ios無法自動(dòng)播放)，則恢復(fù)圖標(biāo)樣式.if (audios[newestAudio].paused) {$('#audio_'+ audio_id).parents(".audioplayer").addClass("audioplayer-stopped")$('#audio_'+ audio_id).parents(".audioplayer").removeClass("audioplayer-playing")$('#audio_'+ audio_id).next().attr( 'title', 'Play').find( 'a' ).html( 'Play' );}} }

調(diào)整音頻長(zhǎng)度

思路：AudioPlayer有個(gè)loadeddata的事件監(jiān)聽,可以在這增加邏輯判斷,更改長(zhǎng)度屬性

AudioPlayer.js，一個(gè)響應(yīng)式且支持觸摸操作的jquery音頻插件

總結(jié)

以上是生活随笔為你收集整理的AudioPlayer.js实现限制仅播放一条语音、多条语音顺序播放、自动播放(有限制)、调整语音条长度的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。