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]
8 Comments.
  • avatar
    Guest  
    15/07/2018
    direct lender installment loans <a href="https://cashnow.cars">loan lenders</a> direct lender payday loans <a href=https://cashnow.cars>lender</a>
  • avatar
    Guest  
    15/07/2018
    payday loans direct lender <a href="https://cashnow.cars">online lenders</a> payday lender <a href=https://cashnow.cars>lender</a>
  • avatar
    Guest  
    14/07/2018
    1000 payday loans <a href="https://cashnow.cars">lender</a> lender <a href=https://cashnow.cars>installment loans bad credit online</a>
  • avatar
    Guest  
    09/07/2018
    payday loans in texas <a href="https://cashnow.cars">payday loans direct lender</a> small payday loan <a href=https://cashnow.cars>payday loan direct lender</a>
  • avatar
    Guest  
    08/07/2018
    lender <a href="https://cashnow.cars">lender</a> payday lender https://cashnow.cars - lender
Show 3 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 12:35 AM (UTC) on 07/09/2016 by Bacon.
avatar
Posted by: Bacon
11/07/2015
Tags: javascript, js, html, css, experience, web, development, design
[spoil] [hr]
[Close Tags]
6 Comments.
Show 1 more comments.