HTML5页面使用audio标签播放音频

最新推荐文章于 2025-04-26 07:37:11 发布

浮生若梦777

最新推荐文章于 2025-04-26 07:37:11 发布

阅读量758

点赞数 1

分类专栏：前端(Vue/Javascript) 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_58626489/article/details/136293594

版权

本文介绍了如何在H5页面中使用HTML5的<audio>标签播放音乐，并处理点击按钮控制播放/暂停功能。特别提到，为了在移动端（如iPhone）实现自动播放，需要使用JavaScript处理touchstart事件和微信/易信的WeixinJSBridgeReady事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5页面播放音乐其实很简单，只需要用<audio>这个标签就行十分方便。

路径选在音乐所在位置就行了。

<audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>

关于点击按钮音乐开启/停止播放的效果做了个简单的例子

<a class="play" id="audioBtn" style="cursor:pointer;" οnclick="autoPlay()"></a>

 <audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>

 css.pause {

             height: 50px;

             background: url(images/musicbtn.png) no-repeat;

             display: block;

             background-position: 0 bottom;

         }

   

         .play {

             height: 50px;

             background: url(images/musicbtn.png) no-repeat;

             display: block;

         } js

function autoPlay() {

             var myAuto = document.ge