H5页面使用audio标签播放音频
软工小法师
2024-04-02 17:21
短信预约 -IT技能 免费直播动态提醒
H5页面播放音乐其实很简单,只需要用<audio>这个标签就行十分方便。
路径选在音乐所在位置就行了。
<audio id="bgMusic" class="lazy" data-src="js/2.mp3" autoplay preload loop="loop"></audio>
关于点击按钮音乐开启/停止播放的效果做了个简单的例子
<a class="play" id="audioBtn" style="cursor:pointer;" οnclick="autoPlay()"></a>
<audio id="bgMusic" class="lazy" data-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标签播放音频内容请搜索编程学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程学习网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341