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

    Controller:class MemberController extends Controller { public function actionmember_list()    {      ...

  2. 你的第一Windows程序——管理应用程序状态

    MSDN原文(英文) 管理应用程序状态 一个窗口过程仅仅是一个为每个消息获取调用函数,所以它本质上是无状态的.因此,你需要一个方法来跟踪你的应用程序从一个函数调用下一个函数的状态. 最简单的方法是把一 ...

  3. [Javascript] Intro to Recursion - Detecting an Infinite Loop

    When using recursion, you must be mindful of the dreaded infinite loop. Using the recursive function ...

  4. hdu5067Harry And Dig Machine(TSP旅行商问题)

    题目链接: huangjing 题意:给出一幅图.图中有一些点,然后从第1个点出发,然后途径全部有石头的点.最后回到原点,然后求最小距离.当初作比赛的时候不知道这就是旅行商经典问题.回来学了一下. 思 ...

  5. Android文字的复制和粘贴

    Android中提供了简单的额复制粘贴功能.代码很简单 复制文字的代码: ClipboardManager cbm= (ClipboardManager) MainActivity.this .get ...

  6. mysql主从监控

    要求:检测myslq从库状态,跳过固定的错误号,每隔30秒检测一次,如果符合条件自动跳过或者是重启从库 1)取出mysql从库的关键字 [root@localhost scripts]# mysql ...

  7. JavaScript获取和设置CheckBox状态

    注意: 针对单个复选框的情况! var obj = document.getElementById("s1"); var value = obj.checked; alert(va ...

  8. C复习手记(Day3)

    C预处理器 C 预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤.简言之,C 预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际编译之前完成所需的预处理.我们将把 C 预处理器 ...

  9. (转) C# Activator.CreateInstance()方法使用

    C#在类工厂中动态创建类的实例,所使用的方法为: 1. Activator.CreateInstance (Type) 2. Activator.CreateInstance (Type, Objec ...

  10. Linux 系统库函数coreleft 与sbrk简介

    coreleft   函数名: coreleft 功 能: 返回未使用内存的大小 用 法: unsigned coreleft(void); 程序例: #include <stdio.h> ...