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.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不会开启是自动播放需
<script type=\”text/javascript\”>
function audioAutoPlay() {
var audio = document.getElementById(\”bgMusic\”),
play = function () {
audio.play();
document.removeEventListener(\”touchstart\”, play, false);
};
audio.play();
document.addEventListener(\”WeixinJSBridgeReady\”, function () {
play();
}, false);
document.addEventListener(\’YixinJSBridgeReady\’, function () {
play();
}, false);
document.addEventListener(\”touchstart\”, play, false);
}
</script>
到此这篇关于H5页面使用audio标签播放音频的文章就介绍到这了,更多相关audio标签播放音频内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网！
您可能感兴趣的文章:
- vue使用H5的audio标签问题
- HTML5视频播放标签video和音频播放标签audio标签的正确用法
- 使用JavaScript为Kindeditor自定义按钮增加Audio标签
