IOS audio音频自动播放会有2秒的延迟，请问如何解决延迟问题？

风里投沙 2017-08-31 05:50:59

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>Document</title>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>
//audio预加载
document.addEventListener("WeixinJSBridgeReady", function() {
document.getElementById('jgg').play()
}, false);
</script>
</head>
<body>
<audio id="jgg" src="style/jgg.mp3" autoplay="autoplay"></audio>
</body>
</html>

...全文

1624 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

北国的雨 2020-04-19

打赏
举报

刚调通一个解决方案说一下： 1. 开始时audio的src为空，页面加载后直接播放一次（这个特别重要） 2. 加载数据并赋值给src(我用的blob，直接复制src不可以行) 3. 点击手动触发播放测试代码如下：


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<audio id="audio" class="media-audio" preload="auto"></audio >
<button id="btnStart" style="width: 100px; height: 100px; border-radius: 50%; cursor: pointer;">Play6</button>
<script src="./js/jquery.min.js"></script>
<script>
function audioAutoPlay(id){
    var audio = document.getElementById(id);
    audio.play();
}

function loadData(){
  //创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  //配置请求方式、请求地址以及是否同步
  xhr.open('GET', 'http://xxx.com/201911101575950144866.mp3', true);
  //设置请求结果类型为blob
  xhr.responseType = 'blob';
  //请求成功回调函数
  xhr.onload = function(e) {
      if (this.status == 200) {//请求成功
          //获取blob对象
          var blob = this.response;
          //获取blob对象地址，并把值赋给容器
          $("#audio").attr("src", URL.createObjectURL(blob));
      }
  };
  xhr.send();
}

// 这个方式不行
function loadData2(){
  $("#audio").attr('src','http://xxx.com/201911101575950144866.mp3');
}

$(document).ready(function(){
  audioAutoPlay('audio');
  loadData();
  $("#btnStart").click(function(){
    audioAutoPlay('audio');
  });
})
</script>
</body>
</html>

希望对大家有帮助

qq_31949111 2019-12-24

打赏
举报

张哥音频压缩软件压缩音频的质量

业余草 2017-09-08

打赏
举报

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>Document</title>

    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    

    <script>

    //audio预加载

        document.addEventListener("WeixinJSBridgeReady", function() {

            document.getElementById('jgg').play()

        }, false);

    </script>

</head>

<body>

    <audio id="jgg" src="style/jgg.mp3" autoplay="autoplay"></audio>

</body>

</html>