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

H5页面里实现音乐播放，其实比想象中要简单得多——核心就是那个标签，几行代码就能搞定。

音乐文件路径指向对应的音频文件即可，比如放在项目的js目录下。下面是最基础的HTML结构：

如果想让用户通过点击按钮来控制音乐的播放与暂停，也很直接。需要给按钮绑定一个点击事件，同时配合CSS来切换背景图标，让交互反馈更直观。

先看HTML部分：

然后是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;
}

关键的Ja vaScript逻辑，通过检测音频的播放状态来切换：

function autoPlay() {
    var myAuto = document.getElementById('bgMusic');
    var btn = document.getElementById('audioBtn');
    if (myAuto.paused) {
        myAuto.play();
        btn.classList.remove("pause");
        btn.classList.add("play");
    } else {
        myAuto.pause();
        btn.classList.remove("play");
        btn.classList.add("pause");
    }
}

不过，这套方案在移动端会遇到一个典型问题——iPhone上自动播放会被浏览器限制，直接写autoplay是无效的。需要额外处理，通过触摸事件来触发播放：

这个脚本的原理是：在用户首次触摸屏幕时，主动调用一次play()，从而绕过iPhone的自动播放限制。同时，它也兼容了微信和易信等内置浏览器的特殊桥接事件。实际开发中，把这段代码放在页面加载完成后执行，移动端的自动播放问题就能迎刃而解。