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
Please Login or Register to comment.
13 Comments.
  • avatar
    Guest  
    12/06/2020
    I have to get across my love for your generosity in support of those individuals that have the need for guidance on the field. Your very own commitment to getting the message all around appears to be really powerful and has continuously permitted people much like me to reach their pursuits. This interesting publication entails so much a person like me and additionally to my mates. Regards; from everyone of us.
    lebron 16 http://www.lebron16.us
  • avatar
    Guest  
    09/06/2020
    I am commenting to let you understand what a cool discovery my cousin's girl found using your web site. She picked up a good number of details, with the inclusion of what it's like to possess an incredible coaching nature to let a number of people without difficulty learn various advanced topics. You actually exceeded our expected results. Thank you for giving those productive, trusted, edifying and also cool guidance on that topic to Tanya.
    nike air max 97 http://www.nikeairmax97.net
  • avatar
    Guest  
    06/06/2020
    I am just commenting to make you know of the wonderful discovery my child had reading through your webblog. She learned plenty of details, which included what it's like to possess an ideal coaching mood to make the others smoothly learn about a variety of specialized issues. You truly did more than people's expected results. I appreciate you for showing those powerful, trusted, explanatory not to mention unique guidance on that topic to Lizeth.
    golden goose outlet http://www.goldengoose.us.com
  • avatar
    Guest  
    05/06/2020
    I happen to be writing to make you know what a amazing discovery my cousin's child enjoyed going through your webblog. She realized numerous issues, most notably what it is like to have a marvelous helping spirit to let other people completely know precisely specified very confusing matters. You truly did more than our own desires. Thank you for producing these powerful, safe, edifying and also easy guidance on this topic to Tanya.
    <a href="http://www.kyrie6shoes.us" >nike kyrie 6</a>
  • avatar
    Guest  
    05/06/2020
    I must voice my affection for your generosity supporting men and women who have the need for help with this particular niche. Your real commitment to passing the solution up and down turned out to be exceptionally useful and have specifically empowered regular people much like me to reach their pursuits. The warm and friendly report can mean a whole lot a person like me and especially to my office colleagues. Warm regards; from all of us.
    bape hoodie http://www.bapehoodie.us
Show 8 more comments.
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
Please Login or Register to comment.
6 Comments.
  • avatar
    Guest  
    14/06/2020
    I must point out my passion for your generosity supporting those people who require help with this field. Your special dedication to getting the solution all over appeared to be exceptionally useful and has continually permitted ladies like me to get to their desired goals. Your helpful tips and hints indicates much a person like me and far more to my office colleagues. Many thanks; from all of us.
    timberland outlet http://www.outlettimberland.us.org
  • avatar
    Guest  
    10/06/2020
    I am only writing to make you be aware of of the excellent discovery my wife's girl had going through your web page. She mastered such a lot of issues, which include what it's like to have an excellent giving style to make folks clearly completely grasp chosen tricky things. You actually surpassed readers' desires. I appreciate you for distributing the beneficial, trusted, educational not to mention unique guidance on your topic to Julie.
    nike air max 2018 http://www.nikeairmax2018.us.com
  • avatar
    Guest  
    07/06/2020
    Thank you so much for giving everyone an exceptionally brilliant opportunity to check tips from here. It is always so useful and packed with a great time for me and my office mates to visit the blog at a minimum thrice every week to read the latest items you will have. And of course, I am just actually happy with the unique advice served by you. Selected two tips in this article are unequivocally the most efficient we have all had.
    nike foamposite http://www.nikefoamposite.us.com
  • avatar
    Guest  
    05/06/2020
    I am writing to let you know what a fabulous discovery my friend's daughter went through reading through your site. She noticed plenty of pieces, with the inclusion of what it is like to possess an ideal coaching spirit to let other folks effortlessly master specific multifaceted topics. You actually surpassed her expected results. Thanks for giving these useful, dependable, informative and as well as cool guidance on the topic to Gloria.
    coach outlet online http://www.coachoutlets.name
  • avatar
    Guest  
    01/06/2020
    I happen to be writing to make you know of the outstanding encounter my girl developed browsing your site. She even learned some pieces, which included what it is like to have an awesome coaching spirit to have many more quite simply thoroughly grasp some very confusing things. You undoubtedly surpassed our own desires. Many thanks for presenting the insightful, dependable, explanatory as well as easy tips about this topic to Jane.
    louboutin http://www.louboutins.us.com
Show 1 more 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 8:22 PM (UTC) on 29/10/2018 by Bacon.
avatar
Posted by: Bacon
11/07/2015
Please Login or Register to comment.
36 Comments.
  • avatar
    Guest  
    19/06/2020
    Thank you a lot for providing individuals with such a special opportunity to read critical reviews from here. It is often so nice and jam-packed with amusement for me and my office co-workers to search your site at least thrice per week to see the newest tips you have got. And lastly, we're usually satisfied for the unbelievable suggestions you give. Certain 1 facts in this post are particularly the most suitable we've had.
    jordan 4 http://www.jordan4.us.com
  • avatar
    Guest  
    19/06/2020
    I'm commenting to make you know of the cool experience my wife's princess had browsing yuor web blog. She came to understand a wide variety of pieces, which included what it is like to possess an ideal helping nature to get many others with no trouble completely grasp a variety of multifaceted subject areas. You truly surpassed her desires. Thanks for rendering such informative, dependable, revealing and also cool tips on your topic to Kate.
    yeezy boost 350 http://www.yeezyboost-350v2.us.com
  • avatar
    Guest  
    16/06/2020
    Thanks for your whole work on this site. Debby really loves working on investigations and it's easy to see why. Many of us know all concerning the powerful mode you create practical tricks via this website and as well as strongly encourage participation from website visitors about this issue while our own child is undoubtedly starting to learn a lot. Take advantage of the remaining portion of the new year. You are doing a fabulous job.
    curry 7 shoes http://www.curry7.net
  • avatar
    Guest  
    16/06/2020
    Thank you for all your valuable effort on this web page. My mum really likes doing research and it is simple to grasp why. Many of us hear all of the compelling tactic you convey informative information on the blog and as well strongly encourage response from other ones on this concept so my simple princess is undoubtedly being taught a whole lot. Have fun with the rest of the new year. You have been performing a fabulous job.
    <a href="http://www.jordansshoes.us.org" >jordan shoes</a>
  • avatar
    Guest  
    16/06/2020
    I want to point out my gratitude for your kindness supporting visitors who must have guidance on this one theme. Your very own dedication to passing the message all through appeared to be incredibly functional and have in every case permitted women just like me to achieve their ambitions. This valuable help and advice implies so much to me and still more to my office workers. Many thanks; from everyone of us.
    christian louboutin outlet http://www.christianlouboutinoutletofficial.com
Show 31 more comments.