AudioPlayer.js实现限制仅播放一条语音、多条语音顺序播放、自动播放(有限制)、调整语音条长度

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音频插件