我的音频可视化工具在 chrome 中不起作用（但在 Firefox 中可以）

Question

我有这个音频可视化工具（我希望摆脱 canvas 并使用 div 块来获得更好的外观）。它在 firefox 中工作，但是当我运行它在 chrome 中时，我收到此错误消息“无法加载资源：服务器响应状态为 404（未找到）”位于 favicon.ico:1???不知道位置是什么意思。

'''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Music Station</title>
    
    <script src="http://cwilso.github.io/AudioContext-MonkeyPatch/AudioContextMonkeyPatch.js"></script>
</head>
<body>
  <audio id="player" controls>
       <source src="Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3">
   </audio>
  
   <canvas width="500px" height="400px" background-color="#000000" id="soundCanv"></canvas>
   
   
   
    <script>
        
        window.AudioContext = window.AudioContext||window.webkitAudioContext;
        let audioCtx = new AudioContext();
      var music=document.getElementById("player");  
     var canvas=document.getElementById("soundCanv");
        var canvasCtx=canvas.getContext("2d");
        var myAudio=document.querySelector('audio');
        
        
var analyser = audioCtx.createAnalyser(); 
//    var source = audioCtx.createMediaStreamSource(music.captureStream());
            var source=audioCtx.createMediaElementSource(myAudio);
source.connect(analyser);
        analyser.connect(audioCtx.destination);

console.log("Hello");
    
    
    analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

console.log("Hello There");
    
        function draw() {
            
      canvasCtx.clearRect(0, 0,canvas.width, canvas.height);

      analyser.getByteFrequencyData(dataArray);

      canvasCtx.fillStyle = 'rgb(0, 0, 0)';
      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
            
            var barWidth = (canvas.width / bufferLength) * 2.5;
var barHeight;
var x = 0;
            
                  for(var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i]/2;

        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
        canvasCtx.fillRect(x,canvas.height-barHeight/2,barWidth,barHeight);

        x += barWidth + 1;
      }
        window.requestAnimationFrame(draw);    
    };
        window.requestAnimationFrame(draw);
        draw();
    
    
    </script>
</body>
</html>

'''

有没有办法让它在 chrome 中工作？它的 2020 网络音频 api 现在应该已经平滑了。

Answer 1

由于用户事件，

Chrome 要求 AudioContext 只能从代码运行创建。您可以通过将代码包装在 click 事件处理程序或类似的东西中来解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Music Station</title>
    
    <script src="http://cwilso.github.io/AudioContext-MonkeyPatch/AudioContextMonkeyPatch.js"></script>
</head>
<body>
  <audio id="player" controls>
       <source src="Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3">
   </audio>
  
   <canvas width="500px" height="400px" background-color="#000000" id="soundCanv"></canvas>
   <button id="start-btn">Start</button>
   
   
    <script>

      document.getElementById("start-btn").addEventListener("click", () => {
        
        window.AudioContext = window.AudioContext||window.webkitAudioContext;
        let audioCtx = new AudioContext();
      var music=document.getElementById("player");  
     var canvas=document.getElementById("soundCanv");
        var canvasCtx=canvas.getContext("2d");
        var myAudio=document.querySelector('audio');
        
        
var analyser = audioCtx.createAnalyser(); 
//    var source = audioCtx.createMediaStreamSource(music.captureStream());
            var source=audioCtx.createMediaElementSource(myAudio);
source.connect(analyser);
        analyser.connect(audioCtx.destination);

console.log("Hello");
    
    
    analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

console.log("Hello There");
    
        function draw() {
            
      canvasCtx.clearRect(0, 0,canvas.width, canvas.height);

      analyser.getByteFrequencyData(dataArray);

      canvasCtx.fillStyle = 'rgb(0, 0, 0)';
      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
            
            var barWidth = (canvas.width / bufferLength) * 2.5;
var barHeight;
var x = 0;
            
                  for(var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i]/2;

        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
        canvasCtx.fillRect(x,canvas.height-barHeight/2,barWidth,barHeight);

        x += barWidth + 1;
      }
        window.requestAnimationFrame(draw);    
    };
        window.requestAnimationFrame(draw);
        draw();
    
      });
    </script>
</body>
</html>

我的音频可视化工具在 chrome 中不起作用（但在 Firefox 中可以）

My audio visualizer doesn't work in chrome (but does in firefox)

html

javascript

web-audio-api