• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
芊芊551 显示全部楼层 发表于 2021-8-14 15:02:32 |阅读模式 打印 上一主题 下一主题
近来有这么一个需求,必要在手机加载一个页面的时间,主动播放音乐资源。一般环境下,这个标题也就办理了,但是要包管各种手机上表现一致,那就相当困难了,至少要费点儿周折。 下面有三种常规的方式,可以创建主动播放的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.     })();
复制代码
  附:上述三个方法的demo
别的增长一种第三方库实现,音频资源的播放以及控制。  整理了一些第三方库,功能不但是播放音乐,还有一些其他功能,这个自己研究。
  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/
复制代码
使用了上述方法之后,发现在Iphone手机(详细阐明)和部分android手机仍然不能,主动播放。
他的播放条件是:必须有用户举动操作,才能举行播放。
以是就必要思量,通过什么样的方式可以模仿用户的操作呢?网络上提供了一些方式,可以实现主动播放,如:
       
  • 创建一个Image对象,然后监听Image是否加载完毕,如果加载完毕,实行audio的播放,到达主动播放效果   
  • 一个雷同的方法, 创建一个iframe,资源直接就是音频资源的地点,iframe加载完毕就能主动播放   
  • 给document大概body绑定一个touchstart变乱,这样用户只要触碰到页面就可以触发播放
上述提到的前两条,我测试发现根本上没有用果。至于第三条,这个肯定是没有标题的,但是这种方式确实不完全算是主动播放,因为完全有大概用户就是不触碰页面,那么就是不会播放。但是在有些场景下,确实可以使用,这个要区分场景。
进而我想到了,能不能监听手机是否运动大概是移动,来举行播放音频呢?我监听了devicemotion(详细阐明)变乱,发现还是不可,此时我已经缭乱了,死的心都有了。
最后的最后,我使用了在页面上创建audio标签,使用JS调整audio相干属性和值,然后控制音频播放。
这种方式根本上,可以在差异的手机上表现出雷同的效果,但是就是我测试的一个5S手机就是不可。。。同样别的5S却没有标题,具体缘故原由到现在都没有查出来我就冷静的把他忽略了。
为了能让哪些不能主动播放的提拔一些体验,又绑定了一个touchstart变乱,这样就算是不能主动播放,至少可以在触摸页面的可以举行播放,算是一种体验改进吧。
补充:  2015年05月31日iOS 微信 音频 视频主动播放
以上就是HTML5页面音频主动播放标题的详细内容,更多关于html5音频主动播放的资料请关注脚本之家别的相干文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作