AudioPlayer.js實現限制僅播放一條語音、多條語音順序播放、自動播放(有限制)、調整語音條長度

使用場景:語音直播，實現點擊播放某一條語音，暫停其他播放中的語音。播完一條語音，自動播放下一條。當接收到新語音，且沒有播放中的音頻，自動播放這條語音

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

僅播放一條語音

思路：當點擊音頻播放按鈕時，控制其他音頻暫停

1.將所有語音循環調用插件

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

2.AudioPlayer.js中已經有點擊事件，在此基礎上添加邏輯即可

更改后：

解釋：

當初始化后，audio元素變成下圖所示了。可以通過改變class值來達到更改audio顯示狀態的目的

多條語音順序播放

思路：給audio標簽添加監聽事件，當語音播完后，控制下一條語音播放

//連續播放音頻 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);} }

自動播放

當新插入語音，并且當前沒有播放中的音頻，則播放新語音

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();//如果監聽到音頻由于一些原因沒有播放(ios無法自動播放)，則恢復圖標樣式.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' );}} }

調整音頻長度

思路：AudioPlayer有個loadeddata的事件監聽,可以在這增加邏輯判斷,更改長度屬性

AudioPlayer.js，一個響應式且支持觸摸操作的jquery音頻插件

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。