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实现限制仅播放一条语音、多条语音顺序播放、自动播放(有限制)、调整语音条长度相关推荐

JS一起学04：函数返回值、定时器、随机数、自动播放的幻灯片
一.函数返回值----将相应的值返回到函数调用的地方 1. 可以不写返回值 2. 可以没有return,如果不返回,默认返回undefined 3. 本函数内,renturn之后的JS语句不再执行,跳 ...
微信android自动播放视频文件,vue-player或TcPlayer在微信内自动播放video和audio
不管是IOS框互理.各近架跳机蓝种近架跳机蓝种近架跳和Android,当video和audio初始src为空,根据点击不同的媒体源(非播放器控件),比如多个章节的视频列表,动态给src赋值并执行pla ...
flutter播放上一首和下一首，自动播放下一首
参考文章自己的代码如下 import 'dart:async'; import 'package:audioplayer/audioplayer.dart'; import 'package:flu ...
vue+flv播放flv视频、m3u8视频,谷歌浏览器视频不自动播放怎么办
播放flv视频 <template><div id="app1"><video id="myvideo" @click=" ...
html手机不能自动播放音乐,解决移动端浏览器 HTML 音频不能自动播放的三种方法...
由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种: 第一种:添 ...
HTML5播放视频autoplay不起作用-HTML5视频不自动播放
初学HTML5视频播放的同学,可能大多数都会遇到这样一个问题:按照教程写的代码,添加了autoplay属性,为什么视频还是无法自动播放? <!DOCTYPE html> <html& ...
苹果微信html音乐播放,HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
html5手机不能自动播放音乐,H5案例---解决H5中背景音乐无法自动播放问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼四.完整代码您的浏览器不支持 audio标签. // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器 ...
如何在html中自动播放音乐,如何使音乐在打开页面时自动播放
你好朋友, 给你一个自动播放的背景音乐代码: 第一步.进入新浪博客,输入"登录名""密码"和"验证码"后点击"登入". ...

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

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

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

最新文章

热门文章