您现在的位置是:首页 > 学无止境 > 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”。

文章评论

    • 评论
    人参与,条评论

技术在线

服务时间

周一至周日 12:00-22:00

关闭下雪
关闭背景特效