A-A+

移动端audio(音频)播放应用小结

2018年11月01日 JavaScript 暂无评论 阅读 121 次

移动端audio(音频)播放应用小结
#ios,android在微信中audio不能自动播放的问题

 //android  ios 内部原因 为了节省流量,规定不自动播放音频视频
    //--创建页面监听,等待微信端页面加载完毕 触发音频播放
    document.addEventListener('DOMContentLoaded', function () {
        function audioAutoPlay() {
            $("#music")[0].play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                $("#music")[0].play();
            }, false);
        }
        audioAutoPlay();
    });
    //--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
    document.addEventListener('touchstart', function () {
        function audioAutoPlay() {
            //var audio = document.getElementById('music');
            //audio.play();
            $("#music")[0].play();
        }
        audioAutoPlay();
    });


    // 引入sdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

var audio = (function(){
  var _audio = new Audio();
  _audio.src = 'xxx';
  _audio.load();
  return _audio;
})()

// 微信配置信息(即使不正确也没问题
wx.config({
  debug: false,
  appId: '',
  timestamp: 1,
  nonceStr: '',
  signature: '',
  jsApiList: []
});
// 在ready时触发相关事件
wx.ready(function() {
  // 触发一下play事件
  audio.play();
});

//未成功
document.addEventListener("WeixinJSBridgeReady", function () {
  WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
    // 触发一下play事件
    audio.play();
  });
}, false);

当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件。

当音频/视频处于加载过程中时,会依次发生以下事件:

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

发生这个问题的原因是音频类型文件请求的响应方式不对。其实默认的响应方式就是206,只是我们后端在设置文件响应方式的默认配置时,直接copy了一些配置文件,其实并不知道他修改了音频文件的响应方式。

HTML DOM Audio 对象

克服 iOS HTML5 音频的局限

移动端浏览器播放音频的种种BUG

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录