当前第2页 返回上一页
首先:在html中代码如下
1 2 3 4 5 6 | <audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
<source src="music/bgmusic.mp3" />
</audio>
<!--这里是音乐-->
<img id="btn" class="active" src="img/music.png" alt="" />
<!--这里是一个可以控制背景音乐播放暂停的开关-->
|
在js文件中采用如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var audio = document.getElementById('music1');
$("#btn").bind("touchstart", function bf() {
if(audio !== null) {
if(audio.paused) {
audio.play();
$("#btn").addClass("active")
} else {
audio.pause();
$("#btn").removeClass("active")
}
}
})
|
写到了这里大部分安卓机就基本可以实现自动播放了,但是苹果手机在这个时候还是不行的
这里我采用了一个在加载页中加入一个按钮,当加载完成的时候,点击按钮,引导用户完成背景音乐的自动播放,代码如下:
1 2 3 | $("html").one('touchstart',function(){
audio.play();
})
|
到了这里就实现了背景音乐的自动播放,这个办法适用于有加载页,并且需要点击进入h5的项目。
相关推荐:h5
以上就是html5实现背景音乐的自动播放的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
详细介绍基于HTML5 的webgl技术构建3d场景的图文代码(一)
HTML5打开手机扫码功能及优缺点_HTML5教程技巧
怎样用h5添加禁止缩放功能
HTML5编程实战之三-图片文本(txt)拖拽预览实现代码
HTML5之pushstate和popstate操作history无刷新改变当前url的详细介绍
如何让HTML5手机端弹出遮罩菜单特效
详解h5非常重要的28个新特性,新技巧和新技术
HTML5标准学习-简介介绍
HTML5编程需要什么软件?
HTML5实战-svg的详解
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5实现背景音乐的自动播放