Audio Data API

An experimental Mozilla API for generating and manipulating sound with JavaScript.

Use your cursor keys to move forward and backward through the slides.

1
HTML5 gives us the <audio> element

 

2

Expose Raw Audio Data as it Plays


          

          
        3



        

          
Display Audio Sound Data with <canvas>

          

            
-0.008158281445503235 ...what do those numbers really look like?

            
            
          

        4


        

          
Apply a Low Pass Filter to the Audio

          

            
Read Audio, apply filter and output

            
            
          

        5



        

          
Calculate Audio Spectrum (FFT) in JS

          

            
            
          

        6



        

          
Playing with Spectrum, Visualizing Sound

          

            
            
          

        7



        

          
Analyze Audio: Beat Detection in JS

          

            
            
          

        8



        

          
Signal, FFT, Beat as 2D Visualizations...

          

            
            
            
            
            
          

        9



        

          
Audio Visualization 2D and 3D <canvas>

          

            
            

             
          

        10


        

          

           
Demo By

           
David Humphrey, Al MacDonald, Corban Brook, Charles Cliffe, Thomas Sturm, Yury Delendik

           
Music

           
Revolve by His Boy Elroy (Licensed under Creative Commons Noncommercial Sampling Plus)

           
Learn More

           
You can see more demos and find documentation for the Audio Data API here, and learn more about the W3C's work to standardize web audio here.

          

        11