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]
3 Comments.
  • 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]
1 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]
14 Comments.
  • avatar
    Guest  
    23/09/2017
    Thanks so much for giving everyone an extremely marvellous opportunity to read articles and blog posts from this blog. It can be very nice plus jam-packed with a great time for me personally and my office mates to search your site a minimum of thrice in a week to see the newest secrets you will have. And definitely, I'm so always impressed with the surprising knowledge you give. Some 3 points in this posting are in truth the most beneficial we've ever had.
  • avatar
    Guest  
    20/09/2017
    I not to mention my friends ended up going through the great pointers on the blog and so all of the sudden I had a horrible feeling I had not thanked the web site owner for them. All the men were definitely as a consequence glad to study them and already have in actuality been loving those things. Appreciate your indeed being simply kind and for having variety of superior themes most people are really wanting to know about. Our honest apologies for not expressing gratitude to you sooner.
  • avatar
    Guest  
    20/09/2017
    Thank you so much for providing individuals with an exceptionally wonderful opportunity to read articles and blog posts from this blog. It is often so ideal and packed with fun for me personally and my office peers to visit the blog at minimum 3 times a week to read the fresh things you have got. Of course, I'm just at all times satisfied for the superb secrets served by you. Some 1 facts in this posting are rather the most impressive we have had.
  • avatar
    Guest  
    20/09/2017
    I enjoy you because of every one of your effort on this website. My mom delights in going through investigations and it's really obvious why. A lot of people know all relating to the dynamic mode you render good tips and hints through the website and as well as inspire contribution from other people on the concern then our favorite daughter is without question understanding a lot. Have fun with the rest of the new year. You're the one performing a splendid job.
  • avatar
    Guest  
    15/09/2017
    Thanks a lot for giving everyone such a nice chance to read in detail from this blog. It really is very cool and stuffed with amusement for me personally and my office colleagues to search the blog at the very least three times in 7 days to see the new guides you will have. And lastly, I'm so actually amazed with all the good ideas served by you. Certain 3 tips in this post are indeed the most beneficial I've had.
Show 9 more comments.