About

Overview

html5beats is a music visualizer. It generates animations in real time that “dance” to the beat of the currently playing song. It was built with HTML5 and JavaScript, and requires no browser plug-ins.

This site was created for Microsoft’s {Dev:unplugged} contest.

Features

• Full screen mode
• Lyrics display
• Selectable backgrounds
• Pinned site features:
  • Jump List (right-click pinned icon)
  • Thumbnail toolbar with playback controls (hover over pinned icon)
• CSS3:
  • Rounded corners
  • Shadows and illumination effects
  • Translucency
• No additional downloads required

FAQ

• Q: What browsers does html5beats support?
• A: The following browsers are officially supported:
  • Internet Explorer 9 (recommended)
  • Chrome 10
  • Opera 11
  • Firefox 4

• Q: Something isn't working right (e.g., the background image repeats strangely, or the play button shows the pause symbol at the wrong time). What's wrong?
• A: You may experience certain problems if your browser is not in the above list.

• Q: Why does the full screen button just fill the browser instead of showing true full screen?
• A: For security reasons, browsers don't allow Web sites to go full screen automatically. Otherwise a malicious site could show you a fake desktop and trick you into entering sensitive information. Most browsers do have a full screen mode you can switch to manually, though. F11 is the normal hotkey for this function. Try it!

• Q: Why is html5beats running slowly for me?
• A: There are several factors that can affect performance, such as:
  • Availability of hardware-accelerated graphics
  • CPU speed
  • Amount of RAM available
  • Your browser’s JavaScript or rendering engine
  • Other running applications
  If you’re having problems, try closing other programs to free system resources, running the site in a different browser, or using a faster machine.

Changelog

• 06/09/2011 - html5beats wins the {Dev:unplugged} Innovation Award!
• 05/05/2011 - Enhanced thumbnail toolbar (play/pause button toggle, next/prev track, bug fixes).
• 05/04/2011 - Fixed particle depth bug in cube visualization.
• 05/03/2011 - Added "Electricity" visualization.
• 05/02/2011 - Fixed problems with repeating background and aspect ratio.
• 05/01/2011 - Fixed audio control clipping bug in FF, Chrome and Opera.
• 04/28/2011 - Added lyrics display.
• 04/25/2011 - Fixed major bugs for Firefox 3.6.
• 04/25/2011 - Added support for Opera 11.
• 04/25/2011 - Added Jump List tasks for pinned site.
• 04/24/2011 - Added new default background image.
• 04/24/2011 - Added two new songs licensed under Creative Commmons licenses.
• 04/23/2011 - Added full screen capability.
• 04/22/2011 - Added pinned site notice.
• 04/21/2011 - Added an IE9 Pinned Site thumbnail toolbar with playback controls.
• 04/19/2011 - Added selectable backgrounds.
• 04/19/2011 - Firefox audio element display bug fixed. HTML5 feature detection improved.
• 04/18/2011 - Submission accepted in the {Dev:unplugged} contest.
• 04/18/2011 - Initial site deployment.
• 04/08/2011 - html5beats.com domain name was registered.

Legal

Copyright

Copyright © 2011 Andrew T. West. All rights reserved.

Exceptions to the above restrictions:

• Microsoft is granted certain specific rights according to the official contest rules.
• Music tracks licensed for the {Dev:unplugged} contest are owned by their respective copyright holders.
• Other music tracks are licensed under separate terms as specified in the attribution section.
• The HTML5 logo is licensed under separate terms as specified in the attribution section.

Attribution

The tracks "Plastic and Flashing Lights" by Professor Klik and "Liquid Jazz" by General Fuzz are licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

The html5beats.com logo with headphones is an adaptation of the HTML5 Logo by the W3C, which is licensed under a Creative Commons Attribution 3.0 License.

Contact

Email

andy.west@html5beats.com

Twitter

http://twitter.com/andrewtwest

Blog

http://andrewtwest.com/