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实现限制仅播放一条语音 多条语音顺序播放 自动播放(有限制) 调整语音条长度》对你有帮助，请点赞、收藏，并留下你的观点哦！
