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 相关文章推荐
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
CSS中Single Div 绘图技巧的实现
CSS几步实现赛博朋克2077风格视觉效果
教你做个可爱的css滑动导航条
Html5大屏数据可视化开发的实现
关于html选择框创建占位符的问题
Jun 09 #HTML / CSS
html实现弹窗的实例
Jun 09 #HTML / CSS
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php动态变量定义及使用
2015/06/10 PHP
PHP文件操作实例总结
2016/09/27 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
老生常谈Python进阶之装饰器
2017/05/11 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python面向对象进阶学习
2019/05/21 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
广告学专业求职信
2014/06/19 职场文书
个人授权委托书模板
2014/09/14 职场文书
民用住房租房协议书
2014/10/29 职场文书
房屋买卖协议样本
2014/11/16 职场文书
家长会后的感想
2015/08/11 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
JavaScript分页组件使用方法详解
2021/07/26 Javascript
Python基本知识点总结
2022/04/07 Python