為什么我的程序在 Atom 內的 atom-html-preview 和 atom-live-server 中運行，但不在 Chrome 或 JSFiddle 中？

Question

我有一個程序使用 Web Audio API 來可視化音頻的時域波形。 它在 Atom 中運行良好，我使用“harmsk”的“atom-html-preview”package，但它不能在 Chrome 或 JSFiddle 中運行。

我做錯了什么？ 是語法錯誤還是我使用了過時的函數？

編輯：它也適用於“jas-chen”的“atom-live-server”

在 Atom 中，output 看起來像這樣

 let frequencyArray = []; let analyser; let request; var flag=0; var height=0; const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const bars = Math.round(canvas.width); const lineWidth = 3; var centerX = canvas.width / 2; var centerY = canvas.height / 2; const audio = new Audio(); audio.src = "https://s3.us-west-2.amazonaws.com/storycreator.uploads/ck9kpb5ss0xf90132mgf8z893?client_id=d8976b195733c213f3ead34a2d95d1c1"; audio.crossOrigin = "anonymous"; audio.load(); const context = new (window.AudioContext || window.webkitAudioContext)(); analyser = context.createAnalyser(); const source = context.createMediaElementSource(audio); source.connect(analyser); analyser.connect(context.destination); frequencyArray = new Uint8Array(analyser.frequencyBinCount); function begin() { audio.play(); requestAnimationFrame(drawCanvas); }; function end() { cancelAnimationFrame(request); audio.pause(); }; audio.addEventListener("ended", close); function close() { if(flag==0) { flag=1; } else { ctx.clearRect(0, 0, canvas.width, canvas.height); flag=0; } } const drawCanvas = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); analyser.getByteTimeDomainData(frequencyArray); for (var i = 0; i < bars; i+=5) { height = frequencyArray[i] * 0.25; drawLine( { i, bars, height }, canvas, ctx ); } if(flag==0) { request = requestAnimationFrame(drawCanvas); } else { flag=2; close(); } }; const drawLine = (opts, canvas, ctx) => { const { i, bars, height } = opts; // draw the bar ctx.strokeStyle = "#212121"; ctx.lineWidth = lineWidth; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(i, centerY); ctx.lineTo(i, centerY + height); ctx.stroke(); ctx.beginPath(); ctx.moveTo(i, centerY); ctx.lineTo(i, centerY - height); ctx.stroke(); };

 <:DOCTYPE html> <html> <head> <body> <button onClick=begin()>Start</button> <button onClick=end()>End</button> <canvas id="myCanvas" width="500" height="200" style="border;1px solid #d3d3d3;"> </canvas> </body> </html>

Answer 1

我認為這是因為這個錯誤，在控制台中

js:47 AudioContext 不允許啟動。 它必須在頁面上的用戶手勢之后恢復（或創建）。

如果您參考消息中的鏈接，它會指定

如果您在頁面加載時創建 AudioContext，則必須在用戶與頁面交互后的某個時間調用 resume()（例如，用戶單擊按鈕）。 或者，如果在任何附加節點上調用 start()，AudioContext 將在用戶手勢之后恢復。

由於您的AudioContext是在用戶手勢（點擊）之前創建的，您可以修改begin function 以恢復上下文，

  function begin()
  {
    context.resume().then(() => {
          audio.play();
          requestAnimationFrame(drawCanvas);
    });
  };

工作演示：

 let frequencyArray = []; let analyser; let request; var flag=0; var height=0; const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const bars = Math.round(canvas.width); const lineWidth = 3; var centerX = canvas.width / 2; var centerY = canvas.height / 2; const audio = new Audio(); audio.src = "https://s3.us-west-2.amazonaws.com/storycreator.uploads/ck9kpb5ss0xf90132mgf8z893?client_id=d8976b195733c213f3ead34a2d95d1c1"; audio.crossOrigin = "anonymous"; audio.load(); const context = new (window.AudioContext || window.webkitAudioContext)(); analyser = context.createAnalyser(); const source = context.createMediaElementSource(audio); source.connect(analyser); analyser.connect(context.destination); frequencyArray = new Uint8Array(analyser.frequencyBinCount); function begin() { context.resume().then(() => { audio.play(); requestAnimationFrame(drawCanvas); }) }; function end() { cancelAnimationFrame(request); audio.pause(); }; audio.addEventListener("ended", close); function close() { if(flag==0) { flag=1; } else { ctx.clearRect(0, 0, canvas.width, canvas.height); flag=0; } } const drawCanvas = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); analyser.getByteTimeDomainData(frequencyArray); for (var i = 0; i < bars; i+=5) { height = frequencyArray[i] * 0.25; drawLine( { i, bars, height }, canvas, ctx ); } if(flag==0) { request = requestAnimationFrame(drawCanvas); } else { flag=2; close(); } }; const drawLine = (opts, canvas, ctx) => { const { i, bars, height } = opts; // draw the bar ctx.strokeStyle = "#212121"; ctx.lineWidth = lineWidth; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(i, centerY); ctx.lineTo(i, centerY + height); ctx.stroke(); ctx.beginPath(); ctx.moveTo(i, centerY); ctx.lineTo(i, centerY - height); ctx.stroke(); };

 <:DOCTYPE html> <html> <head> <body> <button onClick=begin()>Start</button> <button onClick=end()>End</button> <canvas id="myCanvas" width="500" height="200" style="border;1px solid #d3d3d3;"> </canvas> </body> </html>

為什么我的程序在 Atom 內的 atom-html-preview 和 atom-live-server 中運行，但不在 Chrome 或 JSFiddle 中？

問題描述

1 個解決方案

解決方案1
2 已采納 2020-12-09 16:48:58

為什么我的程序在 Atom 內的 atom-html-preview 和 atom-live-server 中運行，但不在 Chrome 或 JSFiddle 中？

問題描述

1 個解決方案

解決方案1 2 已采納 2020-12-09 16:48:58

解決方案1
2 已采納 2020-12-09 16:48:58