HTML5中如何实现背景音乐自动播放功能

您所在的位置:网站首页 html5自动播放音乐代码 HTML5中如何实现背景音乐自动播放功能

HTML5中如何实现背景音乐自动播放功能

2023-05-05 07:24| 来源: 网络整理| 查看: 265

HTML5中如何实现背景音乐自动播放功能 发布时间:2021-07-09 16:23:44 来源:亿速云 阅读:5508 作者:小新 栏目:web开发

小编给大家分享一下HTML5中如何实现背景音乐自动播放功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

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

      Your browser does not support the audio element.

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

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

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

首先:在html中代码如下 

在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(); })

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

以上是“HTML5中如何实现背景音乐自动播放功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读: html5实现自动播放的案例 如何自动播放H5视频中的背景音乐

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5 上一篇新闻:springboot2.x怎么集成缓存注解及设置过期时间 下一篇新闻:CSS中怎么设置滚动条颜色 猜你喜欢 sass和bootstrap有什么区别 HTML5怎样实现图片无限加载瀑布流效果 Shell逐行处理文本求和的示例分析 这么在Spring Cloud中使用Sleuth JavaScript运算符的示例分析 Java中原型模式的示例分析 JavaScript中回调、Promise和Async/Await的示例分析 2021最新TIOBE编程语言排行榜 Spring中如何进行日常Bug排查 Javascript中运算符的示例分析


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3