Web Audio API 在 google chrome 浏览器中无法正常工作
我创建了一个简单的音乐播放器，它bufferArray为特定的音频 URL 创建一个来播放音乐。
它在我的许多手机浏览器中工作正常，所以我猜音频 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);
});
阿波罗的战车1回答
-
慕尼黑8549860
这更多的是一些观察结果，而不是完整的解决方案。给出的代码适用于 Windows 10 上的 Edge、Chrome 和 Firefox。在 IOS 14 Safari 和 IOS 14 Chrome 上，它似乎在发出加载消息后停止了。参考使用“跨浏览器”方法来创建音频上下文，因此我添加了这一行： var AudioContext = window.AudioContext || window.webkitAudioContext;在此行之前： const context = new AudioContext();这似乎在执行其余代码时就达到了目的。然而，没有声音，似乎音频没有播放。该图还仅显示一条水平线。这是IOS要求在实际播放音频之前必须有一些用户交互的体现吗？我很确定音频已加载，因为此时有明显的暂停。我怀疑必须有一个按钮，单击该按钮后实际上会开始播放。
随时随地看视频慕课网APP
相关分类
JavaScript