有关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的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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
php GD绘制24小时柱状图
2008/06/28 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
PHP使用函数用法详解
2018/09/30 PHP
php文件包含的几种方式总结
2019/09/19 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
Python实现基本线性数据结构
2016/08/22 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python同时遍历两个list用法说明
2020/05/02 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
工商治理实习生的自我评价分享
2014/02/20 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏