html5实现背景音乐的自动播放


当前第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) {

//检测播放是否已暂停.audio.paused 在播放器播放时返回false.

//alert(audio.paused);

if(audio.paused) {

audio.play(); //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》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...