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  
    28/09/2017
    plus/guest
  • avatar
    Guest  
    20/09/2017
    index.php?site=
  • avatar
    Guest  
    22/03/2017
    Nice demo Bacon
    • avatar
      Guest  
      18/09/2017
      Thanks so much for giving everyone remarkably splendid opportunity to read in detail from this web site. It really is so sweet and full of amusement for me personally and my office colleagues to visit your site not less than three times in a week to read the latest tips you have. And of course, I'm also at all times happy with all the brilliant principles served by you. Some 3 ideas in this post are honestly the simplest we have ever had.
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]
3 Comments.
  • avatar
    Guest  
    29/09/2017
    document_srl=
  • avatar
    Guest  
    26/09/2017
    Thanks for your whole effort on this blog. Gloria really loves going through investigation and it's obvious why. My spouse and i notice all about the powerful means you deliver both interesting and useful tips and tricks through the website and strongly encourage participation from website visitors about this issue and our favorite girl is actually learning a great deal. Take pleasure in the remaining portion of the new year. You have been doing a fabulous job.
  • avatar
    Guest  
    21/09/2017
    document_srl=
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]
21 Comments.
  • avatar
    Guest  
    05/10/2017
    Thank you so much for giving everyone a very splendid opportunity to read critical reviews from this website. It's always very useful and jam-packed with a great time for me personally and my office co-workers to search your web site at minimum 3 times in a week to learn the fresh issues you have. And lastly, I'm so actually happy concerning the astounding knowledge served by you. Selected 2 facts in this article are really the most effective we've had.
  • avatar
    Guest  
    05/10/2017
    I must show my admiration for your kind-heartedness giving support to folks that absolutely need assistance with the subject. Your special commitment to passing the message across has been wonderfully good and has continually made guys just like me to realize their desired goals. The useful report denotes a great deal a person like me and especially to my fellow workers. Warm regards; from everyone of us.
  • avatar
    Guest  
    04/10/2017
    I am also commenting to make you be aware of of the extraordinary discovery our daughter encountered going through your site. She discovered too many details, which include what it is like to have an ideal teaching mindset to get other people easily fully grasp a variety of extremely tough subject matter. You actually surpassed people's expectations. Many thanks for churning out those powerful, trusted, revealing not to mention unique thoughts on the topic to Julie.
  • avatar
    Guest  
    04/10/2017
    Thanks so much for providing individuals with such a pleasant possiblity to read from this site. It is often very pleasing and also full of fun for me and my office fellow workers to visit your website minimum 3 times in 7 days to find out the latest guidance you have. And definitely, I'm always pleased considering the special points you serve. Selected two tips in this posting are without a doubt the most impressive I've ever had.
  • avatar
    Guest  
    01/10/2017
    I am also commenting to make you be aware of what a great experience my friend's child undergone using your blog. She came to understand a good number of details, with the inclusion of what it is like to have a wonderful teaching mood to have the mediocre ones quite simply fully grasp a number of tortuous subject matter. You truly did more than readers' desires. Many thanks for rendering such necessary, trusted, explanatory and as well as cool tips on this topic to Mary.
Show 16 more comments.