0

audio标签播放音频后,在iPad(目前只发现在iPad上,而且高中低端型号都会出现)上会造成后续使用AudioContext播放的音效出现的问题(播放速率莫名变慢)

相关测试代码

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>audio test</title>
  <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="full-screen" content="true" />
  <meta name="screen-orientation" content="portrait" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="360-fullscreen" content="true" />
  <style>
    html,
    body {
      background: #aaa;
      padding: 0;
      border: 0;
      margin: 0;
      height: 100%;
    }

    .audio-btn {
      display: block;
      width: 100px;
      height: 100px;
      background: #999;
    }
  </style>
</head>

<body>
  <div>
    <button class="audio-btn audio-html-btn">
      audio tag
      <audio class="audio" src="https://teacher-media.vipkid.com.cn/class/homework/file/b445fdfa-d586-4999-9ec0-fb407735fbe8.mp3" preload="auto"></audio>
    </button>
  </div>
  <button class="audio-btn audio-btn-html" style="background: #000;">
    <span style="color:#fff">play webAudio</span>
  </button>
  <script>
    // 页面中普通audio标签播放
    let btn = document.querySelector('.audio-html-btn')
    let audio = document.querySelector('.audio')
    btn.addEventListener('click', function () {
      audio.play()
    })

    // 普通web audio 播放
    let btn2 = document.querySelector('.audio-btn-html')
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var context = new AudioContext();
    var request = new XMLHttpRequest();
    var bufferArr = null
    request.open('GET', 'https://teacher-media.vipkid.com.cn/class/homework/file/e2598a9a-f6bd-4132-bcf6-8b1e5dc2757f.mp3', true);
    request.responseType = 'arraybuffer';
    //下面就是对音频文件的异步解析
    request.onload = function () {
      context.decodeAudioData(request.response, function (buffer) {
        bufferArr = buffer
      });
    }
    request.send();
    btn2.addEventListener('click', function () {
      var source = context.createBufferSource();
      source.buffer = bufferArr;//  告诉音频源 播放哪一段音频
      source.connect(context.destination);// 连接到输出源
      source.start(0);//开始播放
      console.log('我被播放了2', context, source)
    })
  </script>
</body>

</html>

测试代码说明:只要是先点击页面中的 audio tag触发audio播放音频,后续点击play webAudio使用web audio来播放音频就会出现声音变慢。

测试用的音频资源,mp3格式,audio tag 使用的音频 位速率80kbps;采样速率16kHz。web audio 使用的音频 位速率96kbps;采样速率44.1kHz。

h1zsh1 2
2019-01-11 提问
0 个回答

撰写答案

推广链接