我创建了一个简单的音乐播放器，它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
TA贡献1818条经验 获得超11个赞
这更多的是一些观察结果，而不是完整的解决方案。
给出的代码适用于 Windows 10 上的 Edge、Chrome 和 Firefox。
在 IOS 14 Safari 和 IOS 14 Chrome 上，它似乎在发出加载消息后停止了。
参考使用“跨浏览器”方法来创建音频上下文，因此我添加了这一行：
var AudioContext = window.AudioContext || window.webkitAudioContext;
在此行之前：
const context = new AudioContext();
这似乎在执行其余代码时就达到了目的。然而，没有声音，似乎音频没有播放。该图还仅显示一条水平线。
这是IOS要求在实际播放音频之前必须有一些用户交互的体现吗？
我很确定音频已加载，因为此时有明显的暂停。我怀疑必须有一个按钮，单击该按钮后实际上会开始播放。
添加回答
举报
0/150
提交
取消