iOS(Android)中h5播放音频二三事

这个问题是今天在处理一些私事的时候遇到的。特此记录下来,帮助其他人避免遇到类似的尴尬。

1.常规方法:

正常的情况下,在<audio>标签中,写入音频地址(local or remote),再辅以preload/autoplay属性基本就可以正常在Safari中播放了。需要注意的是,音频地址中的实际音频文件必须是要正确格式的。常见的非正确格式有:a.m4a,直接给改后缀为a.mp3。这样的文件在Safari都播放不了的。

此时可以使用
a.格式工厂进行正常文件的转化;
b.使用七牛后台进行文件转化。[关于这个后续也会写个专门的文章进行描述]

<audio id="love_music" src="http://o8g0miqfw.bkt.clouddn.com/love_you.mp3" autoplay controls></audio >
在上面例子中,加入controls属性是为解决占用iOS/android空间问题。

2.暴力方法:

在常规方法的基础上。通过监听具体的事件,然后模拟播放。

//监听具体的事件然后模拟播放
document.addEventListener('DOMContentLoaded', function () {
        function audioAutoPlay() {
            var audio = document.getElementById('love_music');
                audio.play();
            //在iOS的微信中播放的话可以监听微信的read事件
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
        }
        audioAutoPlay();
    });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容