【发布时间】：2021-03-10 12:45:06
【问题描述】：
我创建了一个简单的音乐播放器，它为特定的音频 URL 创建了一个 bufferArray 来播放音乐。
它在我的许多手机浏览器中都可以正常工作，所以我想音频 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>
```【问题讨论】：
-
嗨，我已经在 Edge、Chrome 和 Firefox 上的 Windows 10 上尝试了您的 sn-p，它们都可以正常工作。然而，在 IOS 上的 Safari 和 Chrome 中，它没有超过加载阶段，并且似乎存在脚本错误（我没有追踪到）。
-
iOS 上的 Chrome 提供与 IOS 上的 Safari 相同的结果（即不播放）。
标签： javascript google-chrome canvas web-audio-api