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

Question

I have this audio visualizer (which I hope to get out of canvas and just use div blocks to achieve a better look).我有这个音频可视化器（我希望摆脱 canvas 并使用 div 块来获得更好的外观）。 It works in firefox but when I run it in chrome I get this error message " Failed to load resource: the server responded with a status of 404 (Not Found)" which was located at favicon.ico:1???它在 firefox 中工作，但是当我在 chrome 中运行它时，我收到此错误消息“加载资源失败：服务器响应状态为 404（未找到）”，位于 favicon.ico:1??? Not a clue what location means.不知道位置是什么意思。

''' '''

<!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>

''' '''

Is there a way to get this to work in chrome?有没有办法让它在 chrome 中工作？ its 2020 web audio api should have been smoothed over by now.它的 2020 web 音频 api 现在应该已经平滑了。

Answer 1

Chrome requires that AudioContext s must be created only from code run because of an user event. Chrome 要求AudioContext必须仅从由于用户事件而运行的代码创建。 You can solve this by wrapping your code inside a click event handler or something similar.您可以通过将代码包装在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 中起作用）

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-07-01 21:59:03

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-07-01 21:59:03

解决方案1
1 已采纳 2020-07-01 21:59:03