Advertisement
metalx1000

HTML5 Basic Audio level Frequancy

Nov 22nd, 2016
644
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title></title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8.   <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  9.   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10.  
  11.   <script>
  12.     var audio = new Audio();
  13.     audio.src = 'music.mp3';
  14.     audio.autoplay = true;
  15.    
  16.     var context, analyser, source;
  17.     $(document).ready(function(){
  18.  
  19.       context = new AudioContext(); // AudioContext object instance
  20.       analyser = context.createAnalyser(); // AnalyserNode method
  21.       source = context.createMediaElementSource(audio);
  22.       source.connect(analyser);
  23.       analyser.connect(context.destination);
  24.       loop();
  25.     });
  26.  
  27.     function loop(){
  28.       window.requestAnimationFrame(loop);
  29.       fbc_array = new Uint8Array(analyser.frequencyBinCount);
  30.       analyser.getByteFrequencyData(fbc_array);      
  31.       var output = fbc_array.toString().replace(new RegExp(',', 'g'),"<br>");
  32.       $("#output").html(output);
  33.      
  34.     }
  35.   </script>
  36. </head>
  37. <body>
  38.  
  39. <div class="container">
  40.   <h2>Audio Levels</h2>
  41.   <div id="output"></div>
  42. </div>
  43.  
  44. </body>
  45. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement