newsound.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <audio id='myAudio' src='http://localhost:8383/sound/butterfly.mp3'></audio>
        <script>
              var audioContext = new AudioContext();    
              var ctx = new AudioContext();  
              var audio = document.getElementById('myAudio');
            
              var audioSrc = ctx.createMediaElementSource(audio);
              var analyser = ctx.createAnalyser();
              // we have to connect the MediaElementSource with the analyser 
              audioSrc.connect(analyser);
              // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
 
              // frequencyBinCount tells you how many values you'll receive from the analyser
              var frequencyData = new Uint8Array(analyser.frequencyBinCount);
 
              // we're ready to receive some data!
              // loop
              function renderFrame() {
                     requestAnimationFrame(renderFrame);
                     // update data in frequencyData
                     analyser.getByteFrequencyData(frequencyData);
                     // render frame based on values in frequencyData
                     console.log(frequencyData);
              }
              audio.play(0);
              renderFrame();

        </script>
    </body>
</html>