有关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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
用js实现trim()的解决办法
2013/04/16 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python 实现二维列表转置
2019/12/02 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
2014年情人节活动方案
2014/02/16 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python