有关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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 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
星际玩家的三大定律
2020/03/04 星际争霸
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
简单实现php上传文件功能
2017/09/21 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
理解javascript模块化
2016/03/28 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
python中实现词云图的示例
2020/12/19 Python
想学画画?python满足你!
2020/12/24 Python
北京某公司的.net笔试题
2014/03/20 面试题
linux面试相关问题
2013/04/28 面试题
员工工作表现评语
2014/04/26 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
公务员政审个人总结
2015/02/12 职场文书