通过howler.js实现在Android下的微信浏览器自动播放音频

1,025 阅读2分钟

howler.js是一个js库,它把webaudio做了下封装,通过它可以轻松的对音频文件进行控制播放、暂停、甚至指定播放音频中的某个片段、以及加快等等,这里我们只关注它在微信浏览器中自动播放的问题,有需要了解的可以去官网看看。

官网: howlerjs.com/
文档: github.com/goldfire/ho…
github: github.com/goldfire/ho…

简易使用范例:

// 初始化一个音频类
var sound1 = new Howl({
  src: ['xxx.mp3'],
});

// 播放音频
sound1.play();

完整代码如下:

以上代码在Android可以自动播放,IOS不可以自动播放需要手点击触发才能播放。
IOS想要自动播放得再加上微信的WeixinJSBridge,代码更改后如下:

但是需要注意的是如果src指定的是一个语音接口生成的音频,比如百度在线语音,那么需要指定html5参数才能播放,如何设置这个参数请看下面的代码。

// 初始化一个音频类
var sound1 = new Howl({
  src: ['百度在线语音生成接口地址。。。'],
  html5: true, // A live stream can only be played through HTML5 Audio.
});

// 播放音频
sound1.play();

不过这样跟试用audio标签没有什么区别了,测试结果:Android下无法自动播放。只能通过touchstart事件触发播放,在IOS上照样没问题。

其实在Android上只要是audio标签模式根本不用去尝试了,因为被微信规则明确禁止了,看下面的公告:

图片.png 公告地址:developers.weixin.qq.com/community/d… 对于在线语音接口的情况,如果在安卓上也要实现自动播放只能先下载再用howler.js来播放了。

微信h5自动播放音频的总结:

1.普通的音频:

Android可以自动播放;iOS可以自动播放。

2.在线语音接口生成的音频:

Android不可以自动播放;iOS可以自动播放。Android要实现自动播放只能先下载语音,然后再用方法1