HTML5页面音频自动播放的实现方式


Posted in HTML / CSS onJune 21, 2021

最近有这么一个需求,需要在手机加载一个页面的时候,自动播放音乐资源。一般情况下,这个问题也就解决了,但是要保证各种手机上表现一致,那就相当困难了,至少要费点儿周折。 下面有三种常规的方式,可以创建自动播放的audio对象:

第一种:页面上创建一个audio标签,写好相关的属性,如:autoplay='autoplay',正常情况下,这里写上资源地址之后,访问页面之后就可以自动播放了。但是如果音乐资源地址不确定,需要js改变的话,就需要使用JS来实现了。

(function() {
        var audio = document.getElementById('myAudio1');
        audio1 = audio;
        audio.src = source;
        audio.loop = true;
        audio.autoplay = true;
        audio.play();
        audio.addEventListener('canplay', canPlay, false);
    })();

 第二种:和第一种比较相似,只不过所有的标签都是JS创建之后,插入到页面上的。

(function() {
        var audio = document.createElement("AUDIO");
        audio2 = audio;
        audio.setAttribute("src", source);
        audio.setAttribute("loop", 'true');
        audio.setAttribute("controls", 'controls');
        audio.setAttribute("autoplay", 'true');
        audio.setAttribute("id", 'myAudio2');
        audio.addEventListener('canplay', canPlay, false);
        document.getElementById('example2').appendChild(audio);
        audio.play();
    })();

第三种:没有任何dom标签,使用JS创建一个audio对象,然后通过JS控制audio对象的各种api实现资源更换和自动播放。

(function() {
        var audio = new Audio();
        audio3 = audio;
        audio.src = source;
        audio.loop = true;
        audio.id = 'myAudio3';
        audio.autoplay = true;
        audio.addEventListener('canplay', canPlay, false);
        audio.play();
    })();

  附:上述三个方法的demo

另外增加一种第三方库实现,音频资源的播放以及控制。  整理了一些第三方库,功能不只是播放音乐,还有一些其他功能,这个自己研究。

howler.js: http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library
buzz.js: http://buzz.jaysalvat.com/
audio.js: http://kolber.github.io/audiojs/
jPlayer.js: http://jplayer.org/

使用了上述方法之后,发现在Iphone手机(详细说明)和部分android手机仍然不能,自动播放。

他的播放条件是:必须有用户行为操作,才能进行播放。

所以就需要考虑,通过什么样的方式可以模拟用户的操作呢?网络上提供了一些方式,可以实现自动播放,如:

  • 创建一个Image对象,然后监听Image是否加载完毕,如果加载完毕,执行audio的播放,达到自动播放效果
  • 一个类似的方法, 创建一个iframe,资源直接就是音频资源的地址,iframe加载完毕就能自动播放
  • 给document或者body绑定一个touchstart事件,这样用户只要触碰到页面就可以触发播放

上述提到的前两条,我测试发现基本上没有效果。至于第三条,这个肯定是没有问题的,但是这种方式确实不完全算是自动播放,因为完全有可能用户就是不触碰页面,那么就是不会播放。但是在有些场景下,确实可以使用,这个要区分场景。

进而我想到了,能不能监听手机是否运动或者是移动,来进行播放音频呢?我监听了devicemotion(详细说明)事件,发现还是不行,此时我已经凌乱了,死的心都有了。

最后的最后,我使用了在页面上创建audio标签,使用JS调整audio相关属性和值,然后控制音频播放。

这种方式基本上,可以在不同的手机上表现出相同的效果,但是就是我测试的一个5S手机就是不行。。。同样别的5S却没有问题,具体原因到现在都没有查出来我就默默的把他忽略了。

为了能让哪些不能自动播放的提升一些体验,又绑定了一个touchstart事件,这样就算是不能自动播放,至少可以在触摸页面的可以进行播放,算是一种体验改进吧。

补充:  2015年05月31日iOS 微信 音频 视频自动播放

以上就是HTML5页面音频自动播放问题的详细内容,更多关于html5音频自动播放的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
CSS中Single Div 绘图技巧的实现
CSS几步实现赛博朋克2077风格视觉效果
教你做个可爱的css滑动导航条
Html5大屏数据可视化开发的实现
关于html选择框创建占位符的问题
Jun 09 #HTML / CSS
html实现弹窗的实例
Jun 09 #HTML / CSS
You might like
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
js+css实现打字效果
2020/06/24 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python可迭代对象操作示例
2019/05/07 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
JAVA软件工程师测试题
2014/07/25 面试题
外企办公室竞聘演讲稿
2013/12/29 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
杜甫草堂导游词
2015/02/03 职场文书
银行求职信模板
2015/03/20 职场文书