网络音频 API 在 google chrome 浏览器中无法正常工作

Question

我创建了一个简单的音乐播放器，它为特定音频 URL 创建了一个 bufferArray 来播放音乐。

It is working fine in many of my cellphone's browser, so I guess there is no cross origin issue for audio URL.

但是 chrome 没有播放音频。

我还创建了一个 Uint8Array 用于在 canvas 中绘制频率数据，而许多浏览器在 canvas 中成功绘制了频率图，chrome 则没有所以！

看看我目前的尝试！

```
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <center>
    <h1>Music Player</h1>
    <hr>
    <div id="div"></div>
    <canvas></canvas>
    <p>Frequency plot</p>
    </center>
    <script>
    url = "https://dl.dropbox.com/s/5jyylqps64nyoez/Legends%20never%20die.mp3?dl=0";
    const div = document.querySelector("#div");
    const cvs = document.querySelector("canvas");
    cvs.width = window.innerWidth - 20;
    cvs.height = 200;
    const c = cvs.getContext("2d");
    function loadMusic(url){
 div.innerHTML = "Loading music, please wait...";
        const context = new AudioContext();
        const source = context.createBufferSource();
        const analyser = context.createAnalyser();
        let request = new XMLHttpRequest();
        request.open("GET",url,true);
        request.responseType = "arraybuffer";
        request.onload = ()=>{
            div.innerHTML = "Music loaded, please wait, music will be played soon...";
context.decodeAudioData(request.response,suffer=>{
    source.buffer = suffer;
    source.connect(context.destination);
    source.connect(analyser);
    analyser.connect(context.destination);
    source.start();
    div.innerHTML = "Music is playing... Enjoy!";
    setInterval(()=>{
c.clearRect(0,0,cvs.width,cvs.height);
let array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
let m = 0;
for(m = 0; m < array.length; m++){
    let x = (parseInt(window.innerWidth -20)*m)/array.length;
    c.beginPath();
    c.moveTo(x,150-((100*array[m])/255));
    c.lineTo((parseInt(window.innerWidth -20)*(m+1))/array.length,150-((100*array[m+1])/255));
    c.lineWidth = 1;
    c.strokeStyle = "black";
    c.stroke();

}
},1);
});
        }
        request.send();
    }
   
        loadMusic(url);
    
    </script>
</body>
</html>

```

Answer 1

这是一些观察结果，而不是完整的解决方案。

给出的代码在 Edge、Chrome 和 Windows 10 的 Firefox 上对我有效。

在 IOS 14 Safari 和 IOS 14 Chrome 上，它似乎在发出加载消息后停止了。

此 MDN 参考使用 'cross browser' 方法创建音频上下文，因此我添加了这一行：

 var AudioContext = window.AudioContext || window.webkitAudioContext;

在这一行之前：

 const context = new AudioContext();

[编辑：刚刚在 caniuse 确认 Safari 需要 -webkit 前缀]

这似乎在执行其余代码时起到了作用。但是，没有声音，似乎没有播放音频。该图还只显示了一条水平线。

这是否体现了 IOS 要求在实际播放音频之前必须有一些用户交互？

我很确定音频已加载，因为此时有明显的停顿。我怀疑必须有一个按钮，当点击它时实际上开始播放。

网络音频 API 在 google chrome 浏览器中无法正常工作

Web Audio API is not working properly, in google chrome browser

javascript

google-chrome

canvas

web-audio-api

但是 chrome 没有播放音频。

看看我目前的尝试！