您现在的位置是:首页 > 学无止境 > Web网站首页Web JS如何设置多个audio标签只能播放一个音频
JS如何设置多个audio标签只能播放一个音频
- Web
- 2020-02-22
简介一个页面中有多个audio标签,播放其中一个时暂停其他,只允许一个audio播放。字数
983
如何做一个页面中有多个audio标签,播放其中一个时暂停其他,只允许一个audio播放。
首先,先介绍一下如何使用audio标签。
HTML:
<audio src="xxx.mp3" controls="controls" preload="auto">您浏览器不支持HTML5音频播放器</audio>
JS:
audio = document.createElement("audio");
audio.src = "xxx.mp3";//设置播放地址
audio.addEventListener("canplaythrough", function() { alert('音频文件已经准备好,随时待命'); }, false);//增加监听事件,音频加载完毕触发
audio.play();//播放
audio.pause();//暂停
audio.currentTime = 0;//设置播放起止时间 单位秒
介绍了基本的标签和JS操作audio标签,下面就是完成只播放一个音频。
首先我们要给每个audio标签增加一个监听事件(addEventListener),监听play动作的发生,然后执行一个功能函数去暂停其他标签。
代码如下:
优化代码如下:
注意:如果没生效,请将JS代码放置在audio标签代码之后,或者增加window.onload。
最终代码:
转载:
感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/389.html”。
- Web
- 2020-02-22
如何做一个页面中有多个audio标签,播放其中一个时暂停其他,只允许一个audio播放。
首先,先介绍一下如何使用audio标签。
HTML:
<audio src="xxx.mp3" controls="controls" preload="auto">您浏览器不支持HTML5音频播放器</audio>
JS:
audio = document.createElement("audio"); audio.src = "xxx.mp3";//设置播放地址 audio.addEventListener("canplaythrough", function() { alert('音频文件已经准备好,随时待命'); }, false);//增加监听事件,音频加载完毕触发 audio.play();//播放 audio.pause();//暂停 audio.currentTime = 0;//设置播放起止时间 单位秒
介绍了基本的标签和JS操作audio标签,下面就是完成只播放一个音频。
首先我们要给每个audio标签增加一个监听事件(addEventListener),监听play动作的发生,然后执行一个功能函数去暂停其他标签。
代码如下:
优化代码如下:
注意:如果没生效,请将JS代码放置在audio标签代码之后,或者增加window.onload。
最终代码:
转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/389.html”。