Audio Viusualization With the Web Audio API
Recently I have been doing some fiddling around with the Web Audio API for the audio player on img.baconics.com and I have to say, one can do some pretty cool things with it; one of those things being audio visualization with a little help from the Canvas API.

The HTML

The HTML is pretty straighforward, all we really need is the <audio> and <canvas> elements.
<!DOCTYPE HTML>
<html>
    <head>
        <script type="application/javascript">
            <!--
                THE JAVASCRIPT WILL GO HERE
            //-->
        </script>
    </head>
    <body>
        <audio id="media" controls >
             <source  src="audio.mp3" type="audio/mpeg" />
             Your browser does not support HTML audio.
        </audio>
        <canvas id="visualizer" width="400" height="200" />
    </body>
</html>

The JavaScript

First we need to create the audio context, connect an analyser node and get our source media. For the sake of simplicity we will just be using a... (Show More)
Last edited 10:32 PM (UTC) on 19/05/2016 by Bacon.
avatar
Posted by: Bacon
16/04/2016
Tags: javascript, html, web, audio, visualization, api
[spoil] [hr]
[Close Tags]
12 Comments.
  • avatar
    Guest  
    19/01/2020
    http://www.yeezy.com.co/ Yeezys
    Yeezy http://www.yeezy700.org.uk/
  • avatar
    Guest  
    15/01/2020
    http://www.nikefactory.us.com/ Nike Outlet
    Yeezy Boost 350 V2 http://www.yeezyboost350.us.com/
  • avatar
    Guest  
    14/01/2020
    http://www.yeezyboost350v2.de/ Yeezy Boost 350
    Yeezy Shoes http://www.yeezys.me.uk/
  • avatar
    Guest  
    07/01/2020
    http://www.travisscottjordan1.us.com/ Travis Scott jordan 1
    <a href="http://www.nfl-jerseys.us.org/" >NFL Jerseys</a>
  • avatar
    Guest  
    04/01/2020
    http://www.nikeshoes.us.org/ Nike Shoes
    http://www.yeezy380.us/
Show 7 more comments.

JavaScript as the Experience
Most sites nowadays use JavaScript, and if you want to offer a fluid user experience it is usually one of the best choices.

However I've noticed that a disturbing amount of websites become practically useless if you disable JavaScript, this is (in my opinion) terrible practice, and terrible design.

Why does this matter?
Most people who will access a webpage will have JavaScript enabled, it is pretty standard these days, However that doesn't mean everyone has JavaScript enabled and you shouldn't overlook these users who are unable to run scripts or just don't want to.

Some other reasons as to why this matters:

  • The website is a lot more dependent on the client:
    Everyone has different Operating systems, different browsers and people update these things at different rates. This increases the chance of failure substantially and this can cause issues if a website relies on a newer JavaScript feature and the user's browser doesn't support it, the website is now useless to the u
... (Show More)
Last edited 8:22 PM (UTC) on 29/10/2018 by Bacon.
avatar
Posted by: Bacon
11/07/2015
Tags: javascript, html, css, experience, web, development, design
[spoil] [hr]
[Close Tags]
23 Comments.
  • avatar
    Guest  
    6 hours ago.
    http://www.nikeoutletonlineshopping.us/ Nike Outlet Online
    Human Race Shoes http://www.humanraces.us.com/
  • avatar
    Guest  
    20/01/2020
    http://www.humanraces.us.com/ Human Races
    Yeezy UK http://www.yeezy350.org.uk/
  • avatar
    Guest  
    18/01/2020
    http://www.yeezys.us.com/ Yeezys
    Nike Outlet http://www.nikeshoes.us.org/
  • avatar
    Guest  
    17/01/2020
    http://www.adidasyeezy.us.com/ Adidas Yeezy
    Human Races http://www.humanraces.us.com/
  • avatar
    Guest  
    16/01/2020
    http://www.yeezy350.us.com/ Yeezy
    Travis Scott jordan 1 http://www.travisscottjordan1.us.com/
Show 18 more comments.