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
[spoil] [hr]
[Close Tags]
4 Comments.
  • avatar
    Guest  
    15/10/2018
    bad credit loans direct lenders <a href="https://creditloansguaranteedapproval.com/">no credit loans</a> credit loans guaranteed approval <a href=https://creditloansguaranteedapproval.com/>cash loan</a>
  • avatar
    Guest  
    11/10/2018
    credit loans guaranteed approval <a href="https://creditloansguaranteedapproval.com">bad credit loans direct lenders</a> credit loans guaranteed approval <a href=https://creditloansguaranteedapproval.com>bad credit loans guaranteed approval</a>
  • avatar
    Guest  
    10/10/2018
    bad credit loans guaranteed approval <a href="https://creditloansguaranteedapproval.com">credit loans guaranteed approval</a> credit loans guaranteed approval <a href=https://creditloansguaranteedapproval.com>poor credit loans guaranteed approval</a>
  • avatar
    Guest  
    22/03/2017
    Nice demo Bacon
Recently I've been working on a little side project, Spin.moe.

Spin.moe an anime roulette wheel of sorts, it randomly picks an anime from your animelist (with various specified paramaters), I find it very useful since I have a lot of anime on my plan to watch and often can't decide what to watch.

Currently Spin.moe works for MyAnimeList, Hummingbird and AniList. Check it out if you are into anime and need to figure out what to watch.
Last edited 1:27 PM (UTC) on 15/04/2016 by Bacon.
avatar
Posted by: Bacon
10/01/2016
[spoil] [hr]
[Close Tags]
0 Comments.
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
[spoil] [hr]
[Close Tags]
6 Comments.
Show 1 more comments.