title: Analyser Bars Animation HTML Audio API not working
body: <p>i used a js code of audio api for visualizing my html5 audio and it worked great here is the tutorial/code</p>
  
  <p>link: <a href="https://www.developphp.com/video/Jav...o-API-Tutorial" rel="nofollow">https://www.developphp.com/video/Jav...o-API-Tutorial</a> </p>
  
  <p>and it works soo good but the problem when i change the src with external link like:</p>
  
  <p>src= "<a href="http://example.com/file.mp3" rel="nofollow">http://example.com/file.mp3</a>" </p>
  
  <p>the audio dont make sound and the visualization dont show although when i remove the visualization code it work normally... i tried changing</p>
  
  <pre><code>context.createMediaElementSource(audio);
  </code></pre>
  
  <p>with</p>
  
  <pre><code>AudioContext.createMediaStreamDestination()
  </code></pre>
  
  <p>the audio played but no visualization still.. i don't know what i can do any idea?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;meta http-equiv="Access-Control-Allow-Origin" content="*"&gt;
  &lt;style&gt;
  div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
  div#mp3_player &gt; div &gt; audio{  width:500px; background:#000; float:left;  }
  div#mp3_player &gt; canvas{ width:500px; height:30px; background:#002D3C; float:left; }
  &lt;/style&gt;
  &lt;script&gt;
  // Create a new instance of an audio object and adjust some of its properties
  var audio = new Audio();
  // audio.crossOrigin='anonymous';
  audio.src = 'http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.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 AudioContext(); // 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.createMediaStreamDestination(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.requestAnimationFrame(frameLooper);
   fbc_array = new Uint8Array(analyser.frequencyBinCount);
   analyser.getByteFrequencyData(fbc_array);
   ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
   ctx.fillStyle = '#00CCFF'; // Color of the bars
   bars = 100;
   for (var i = 0; i &lt; bars; i++) {
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 2);
    //  fillRect( x, y, width, height ) // Explanation of the parameters below
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
   }
  }
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mp3_player"&gt;
    &lt;div id="audio_box"&gt;&lt;/div&gt;
    &lt;canvas id="analyser_render"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>