Web 音頻 API 無法正常工作，在 google chrome 瀏覽器中

Question

我創建了一個簡單的音樂播放器，它為特定的音頻 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> ```

Answer 1

這比一個完整的解決方案更多的是幾個觀察結果。

給出的代碼在 Windows 10 上的 Edge、Chrome 和 Firefox 上對我有用。

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

這個MDN參考使用“跨瀏覽器”方法來創建音頻上下文，所以我添加了這一行：

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

在此行之前：

 const context = new AudioContext();

[編輯：剛剛在caniuse確認 Safari 需要 -webkit 前綴]

這似乎在執行代碼的 rest 時起到了作用。 但是，沒有聲音，似乎沒有播放音頻。 plot 也只顯示了一條水平線。

這是IOS要求必須有一些用戶交互才能真正播放音頻的表現嗎？

我很確定音頻已加載，因為此時有明顯的停頓。 我懷疑必須有一個按鈕，單擊該按鈕實際上會開始播放。

Web 音頻 API 無法正常工作，在 google chrome 瀏覽器中

問題描述

但是chrome沒有播放音頻。

看看我到目前為止所做的嘗試！

1 個解決方案

解決方案1
2 已采納 2020-11-27 22:17:48

Web 音頻 API 無法正常工作，在 google chrome 瀏覽器中

問題描述

但是chrome沒有播放音頻。

看看我到目前為止所做的嘗試！

1 個解決方案

解決方案1 2 已采納 2020-11-27 22:17:48

解決方案1
2 已采納 2020-11-27 22:17:48