Html5-audio标签简介及手机端不自动播放问题

最新推荐文章于 2023-11-25 00:24:07 发布

weixin_34341117

最新推荐文章于 2023-11-25 00:24:07 发布

阅读量871

点赞数 1

文章标签： python 移动开发

原文链接：https://my.oschina.net/jack088/blog/1795038

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、audio:html5音频标签

<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>

不支持audio元素的浏览器会显示标签内文字

src:音频地址

autoplay:音频加载完毕后自动播放。

controls:显示播放控制条。

loop:播放完毕后会重复播放。

preload:1)auto 预加载音频视频。2）metadata 只预加载音频视频元数据。有autoplay时此属性无效。

（h5 推荐使用OGG Vobis格式）

2、js控制媒体

play()播放

pause()暂停

load()重新加载

3、微信端和手机不能支持自动播放问题

原因是：android ios 内部原因为了节省流量，规定不自动播放音频视频

所以采用以下方式解决

//--创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});

//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
    }
    audioAutoPlay();
});

ps:

html5 audio 在手机为什么经过AJAX后就不能播放了？

（IOS是禁止自动播放音视频的。必须通过用户的实际操作才可以播放，这是无解的。你的点击事件已经完成，ajax异步后再播放是不被允许的。不过你在一些特殊的APP里打开这个页面倒是可以正常。比如微信，QQ，通过扫一扫打开页面后，就跟电脑上一样了。）

为了避免浪费流量，手机端浏览器默认规定媒体文件不允许自动加载播放。必须在由用户直接操作的事件(如click事件)中才能执行加载播放的代码语句。不写ajax时a.play()是在click事件中执行的。允许执行。加了ajax时a.play()就变成是在XHR的load事件中执行了。是不允许执行的。

解决方法可以把ajax改成同步方式。让click事件一直不结束。

    $(document).bind('click', function(){
        $.ajax({
            url: 'your ajax',
            datatype: 'json',
            async: false,
            success: function(e){
                a. src = 'http://luoot-mp3.kssws.ks-cdn.com/xM-8xiiF838JlaWJoqgLtIGpLNw=/lpVroyhM1ZmtBDhKv7fSo96mL5VQ';
            }
        });
        a.play();
    });

https://bbs.csdn.net/topics/391964030

转载于:https://my.oschina.net/jack088/blog/1795038