有关HTML5中背景音乐的自动播放功能


Posted in HTML / CSS onOctober 16, 2017

音乐的自动播放属性,这里也介绍一下:

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

autoplay 属性规定一旦音频就绪马上开始播放。

如果设置了该属性,音频将自动播放。

但是在实际运用中,经常会遇到不能自动播放的现象,主要是因为有些浏览器或者手机会阻止或不支持autoplay这个属性,在这里我介绍一下我采用的方法。

首先:在html中代码如下
 

<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文件中采用如下代码 
 

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")
}
}
})

 写到了这里大部分安卓机就基本可以实现自动播放了,但是苹果手机在这个时候还是不行的

这里我采用了一个在加载页中加入一个按钮,当加载完成的时候,点击按钮,引导用户完成背景音乐的自动播放,代码如下:

$("html").one('touchstart',function(){
audio.play();
})

到了这里就实现了背景音乐的自动播放,这个办法适用于有加载页,并且需要点击进入h5的项目......

总结

以上所述是小编给大家介绍的有关HTML5中背景音乐的自动播放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 #HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 #HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 #HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 #HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 #HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 #HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 #HTML / CSS
You might like
建立动态的WML站点(二)
2006/10/09 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
新手入门常用代码集锦
2007/01/11 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
夜不归宿检讨书
2014/02/25 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Python制作表白爱心合集
2022/01/22 Python
人民币符号
2022/02/17 杂记