请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
炮哥爱看剧 新手上路
未知星球 | 未知职业
  • 关注0
  • 粉丝0
  • 帖子1
Ta的其他帖子
热议话题
zblog php mip主题开发官方指南
2020-07-08 0
由于百度对MIP的支持使得MIP网页大受欢迎,众多站长纷纷把网页改造成MIP。作为国内主
精选帖子

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

[复制链接]
炮哥爱看剧 发表于 2021-7-24 09:36:58 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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

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

  1. (function() {
  2.         var audio = document.getElementById('myAudio1');
  3.         audio1 = audio;
  4.         audio.src = source;
  5.         audio.loop = true;
  6.         audio.autoplay = true;
  7.         audio.play();
  8.         audio.addEventListener('canplay', canPlay, false);
  9.     })();
复制代码

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

  1. (function() {
  2.         var audio = document.createElement("AUDIO");
  3.         audio2 = audio;
  4.         audio.setAttribute("src", source);
  5.         audio.setAttribute("loop", 'true');
  6.         audio.setAttribute("controls", 'controls');
  7.         audio.setAttribute("autoplay", 'true');
  8.         audio.setAttribute("id", 'myAudio2');
  9.         audio.addEventListener('canplay', canPlay, false);
  10.         document.getElementById('example2').appendChild(audio);
  11.         audio.play();
  12.     })();
复制代码

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

  1. (function() {
  2.         var audio = new Audio();
  3.         audio3 = audio;
  4.         audio.src = source;
  5.         audio.loop = true;
  6.         audio.id = 'myAudio3';
  7.         audio.autoplay = true;
  8.         audio.addEventListener('canplay', canPlay, false);
  9.         audio.play();
  10.     })();
复制代码

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

  1. howler.js: http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library
  2. buzz.js: http://buzz.jaysalvat.com/
  3. audio.js: http://kolber.github.io/audiojs/
  4. jPlayer.js: http://jplayer.org/
复制代码

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

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

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

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

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



回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

© 2001-2020 懒人建站 ( 辽ICP备18012687号-3 )

辽公网安备 21032102000036号