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

H5页面音频自动播放问题的更多相关文章

  1. egret 篇——关于ios环境下微信浏览器的音频自动播放问题

    前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...

  2. iphone微信 h5页音乐自动播放

    iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...

  3. 微信h5,背景音乐自动播放

    移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...

  4. 怎样解决Chrome浏览器因为禁止音频自动播放所造成的视频无法自动播放且报错: Uncaught (in promise) DOMException的问题

    这个问题是谷歌基于用户体验方面的考虑, 对页面加载时自动播放的音频作了限制, 试想一下, 如果你打开某个页面就立刻自动播放某种不可描述的声音, 那体验想必是十分酸爽. 尽管这个设定是针对音频的, 但实 ...

  5. 简单谈谈如何利用h5实现音频的播放

    作者:白狼 出处:http://www.manks.top/article/h5_audio本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律 ...

  6. h5页面 video暂停播放 视频控件 以及当前页面只有一个可以播放效果

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  8. 微信端 h5 视频 video 自动播放

    document.addEventListener("WeixinJSBridgeReady",function(){ document.getElementById(" ...

  9. App中h5音频不能播放问题

    前置:以下问题是针对vue项目的解决方案 问题一:IOS中音频不能自动播放 原因:ios禁止了音频自动播放 解决办法:在vue的生命周期mounted中获取音频Dom并调用音频播放方法play(),注 ...

随机推荐

  1. C#调用PowerShell脚本

    今天通过一个小例子,学习了C#如何调用PowerShell脚本文件的Function以及传参. private bool CallPowershell(string outputFile) { str ...

  2. Python模拟登录实战(一)

    今天,学习了模拟登录新浪微博.模拟登录主要有两种方式,一.利用Cookie:二.模仿浏览器的请求,发送表单. 法一: Cookie:指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密 ...

  3. 【C#基础】 读取json某个键值

    /// <summary> /// 用JSObject的方法获取json指定第一层某个键的值 /// </summary> /// <param name="j ...

  4. MySQL加密的性能测试

    这是对MySQL进行加密性能测试的两篇文章系列之二.在第一篇中,我专门使用MySQL的内置的对SSL的支持来 做压力测试,产生了一些令人惊讶的结果. AD:WOT2015 互联网运维与开发者大会 热销 ...

  5. Android Studio设置Eclipse风格快捷键

    Android Studio的1.1.0版本都发布了,ADT也不会再更新了,童鞋们还有理由不换嘛,不要死守着Eclipse了,Android Studio是你唯一的也是最好的选择.什么?用Eclips ...

  6. USB HID Report Descriptor 报告描述符详解

    Report descriptors are composed of pieces of information. Each piece of information is called an Ite ...

  7. C#。2. 2 语句

    二.语句: 顺序,分支,循环. (一)顺序:略 分支:判断--表达式. if(){} 四大类: 1.if if (age > 18) {             Console.WriteLin ...

  8. 使用OpenXml实现生成数据字典文档(beta)

    最近项目在走验收流程,之前没有仔细看SOW文档,发现需要补好多份文档,其中就有数据字典,项目组不愿意花时间太多的时间弄这些文档,也不希望以后还要重复劳动力,最终决定做一个工具,方便自己生成数据字典文档 ...

  9. java下管道流 PipedOutputStream 与PipedInputStream

    package cn.stat.p2.demo; import java.io.IOException; import java.io.PipedInputStream; import java.io ...

  10. eclipse安装ADT插件重启后不显示Android SDK Manager和Android Virtual Device Manager图标的一种解决办法

    通常安装,搭建安卓环境后,不显示Android SDK Manager和Android Virtual Device Manager ize解决方法:Eclipse ->window->c ...