我創建了一個簡單的音樂播放器，它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);});
Web Audio API 在 google chrome 瀏覽器中無法正常工作
阿波羅的戰車
2023-09-14 18:03:49
