Back to Top
The nuts and bolts for
Creative web development

HTML5 Music Visualizer Add-On

“Create the Perfect Ambiance with Amazing Music Visualizations”

Discover the power of music visualization and decorate any element of your web page with it! Draw fire, stars, snow, fireworks, spectrum equalizers  or waveforms – all moving on the music beat. Bind the visualization to a HTML5 MP3 Player list and choose from the supplied visualizations and customize them as you wish to fully fit your page design.

The visualizations are drawn with HTML5 Canvas, so only modern browsers with Canvas are supported. On other browsers the visualizations will just not be shown, so they will degrade gracefully.

HTML5 Music Visualizer is and Add-On and requires HTML5 MP3 Player extension!

Features

  • Music visualization - You can add a music visualization to any element on your website.
  • 8 HTML5 Canvas effects - The Add-on has eight effects that can be used to expand your website user experience.
* Click on the screenshots to see the effects in action!
    • Starfield Effect

    • Fire Effect

    • Fireworks Effect

    • Shapes Effect

    • Smoke Effect

    • Waveform Effect

    • Spectrum Effect

    • Snow Effect
  • Fully customizable visualization - Each effect can be styled from the many available options to fit your site design.

  • Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you’ll need.

  • Support for modern browsers - The music visualizations will run on any modern browser that supports HTML5 Canvas control. That includes IE9 beta. On older browsers it will just degrade gracefully and display nothing
  • Search Engine Friendly - HTML5 Music Visualizer is made in just HTML5, CSS and jQuery. It can be nicely indexed by all search engines and web spiders.
 

Showcases


  • Web MP3 Player Showcase

    For this showcase we used DMXzone Bootstrap 3 for the responsive layout, DMXzone Bootstrap 3 Elements for the page content, DMXzone bootstrap 3 Navigation for the page menu and also DMXzone Font ...

  • Online Manageable MP3 Playlist Showcase

    In this showcase you can try how easy it is to manage your mp3 playlist online. Just use CTRL+SHIFT+2 in order the Online Page Editor Add-on to popup, type username: showcase; password: showcase and ...

  • The NightClub Showcase

    When the music starts you will see the background shapes bouncing on the sound of the HTML5 MP3 Player! Each of the colorful squares, circles and triangles are attached to the bass, middle tones ...

Videos


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Browser: Firefox 3.6+, Opera 9.5, Chrome 9+, Safari 4+, iPad, IE 9
Used Technologies: jQuery, CSS
Screen Shot: External link
Tags: html5, mp3 player, visualization, css, music


This Extension Requires:


HTML5 MP3 Player

Make your website sound amazing!

Enter the world of Cross Browser HTML5 Music! Add music and sound effects to any web page with a single click! Transform automatically all your mp3 links to player links and turn any page element to music controls! Use predefined CSS player skins or create your own! The HTML5 MP3 Player and its controls are all fully CSS driven so can be easily styled to fit perfectly your site and design. By using HTML5 in combination with Flash your cross browser compatibility is guaranteed! Use the DMXzone ...

Read More

History

Version 1.0.1

  • Compatibility with the latest HTML5 MP3 Player
  • Improved effects
  • Compatibility with the new DMXzone Extension Manager
  • Improved compatibility with Dreamweaver CC 2014

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article