CODEWITHSUNDEEP
javascripthtmlweb-audio-api
thinker123
thinker123

Reputation: 39

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

I have this audio visualizer (which I hope to get out of canvas and just use div blocks to achieve a better look). 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??? 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? its 2020 web audio api should have been smoothed over by now.

Upvotes: 1

Views: 439

Answers (1)

D. Pardal
D. Pardal

Reputation: 6597

Chrome requires that AudioContexts must be created only from code run because of an user event. You can solve this by wrapping your code inside a click event handler or something similar.

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

Upvotes: 1

Related Questions