0

I am trying to do make a audio Visualizer and I copied this code come a codepen post. but when I try to change music it does not play. here is the code.

    var audio = new Audio();
audio.crossOrigin = "Anonymous";
audio.src = 'https://s3.amazonaws.com/metaguru/audio/grails/39.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player() {
    document.getElementById('audio_box').appendChild(audio);
    context = new webkitAudioContext(); // AudioContext object instance
    analyser = context.createAnalyser(); // AnalyserNode method
    canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    // Re-route audio playback into the processing graph of the AudioContext
    source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
  }
  // frameLooper() animates any style of graphics you wish to the audio frequency
  // Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper() {
  window.webkitRequestAnimationFrame(frameLooper);
  fbc_array = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(fbc_array);
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
  ctx.fillStyle = 'deepskyblue'; // Color of the bars
  bars = 100;
  for (var i = 0; i < bars; i++) {
    bar_x = i * 12;
    bar_width = 7;
    bar_height = -(fbc_array[i] * .5);
    //  fillRect( x, y, width, height ) // Explanation of the parameters below
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  }
}

at audio.src the link is https://s3.amazonaws.com/metaguru/audio/grails/39.mp3 but when i try to change to this link http://s3.amazonaws.com/drawohara.com.mp3/07_bluetime.mp3 it does not work!

Also. i have been searching for tutorials on audio Visualizer but have not found any good. if you know a good tutorial post it in the comments.

Thanks!

pixelatedore
  • 39
  • 1
  • 2
  • 6

0 Answers0