HTML5 MP3 Player
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 behavior connector to make great combinations of music and other DMXzone Extensions like Sliding Panels, HTML5 Slideshow and many others!
Features
  • Turn any link into a player automatically – Transform automatically all your mp3 links to player links and turn any page element to music controls.

  • Point any button or link as control button - By assigning one of the supplied CSS class names or by using the Control HTML3 MP3 Player behavior, you can use everything as control button.
  • Choose any div container to display title or progress–  Choose any place on your web page to display the current playing title and progress.

  • Add MP3 Player Actions on Anything - Just style the elements with the given CSS classes.


  • Dynamic from recordset - You can bind your songs dynamically with the MP3 Player

  • Controls to display sound peak data

  • Choose from the many included MP3 Player skins - All made in regular CSS so you can edit or create your own.
 
 
  • Powered by jQuery and SoundManager2 - For seamless crossbrowser integration and great HTML5 sound support.

  • Works great on iPad and iPhone - as the HTML5 MP3 Player uses the native HTML5 audio control it works great on iPad and iPhone! So now you can make your custom iPad/iPhone MP3 Players!
  • Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you’ll need.
 
  • An inline property inspector - The property inspector enables you to change several options after you’ve created the mp3 player.

  • Fully Controllable by behaviors - You want to navigate to specific position, start or stop the MP3 Player - it can be easily done with the Control HTML5 MP3 Player behavior.


  • Search Engine Friendly - HTML5 MP3 Player is made in just HTML5, CSS and jQuery. It can be nicely indexed by all search engines and web spiders.
  • Fully cross-browser compatible - Create stunning MP3 Players even in Internet Explorer thanks to the DMXzone’s clever use of feature detection and fall back.
Showcases


Videos


  • HTML5 MP3 Player with Google Analytics
    – Track the songs played in HTML5 MP3 Player using Google Analytics
  • Using Stop Playback Behavior with HTML5 MP3 Player
    – Auto stop the playback when the DMXzone Lightbox is being closed
  • Hiding the HTML5 MP3 Player Playlist
    – Using the toggle playlist control behavior
  • Controlling HTML5 MP3 Player with DMXzone Slider
    – Control the volume of HTML5 MP3 Player with a Slider
  • Manage your HTML5 MP3 Player Playlist Online
    – Amaze your users with a fantastic HTML5 MP3 Player playlist
  • Fluid HTML5 MP3 Player Controls with Fish Eye Menu
    – Controling the HTML5 MP3 Player with Fish Eye Menu
  • HTML5 MP3 Player with Songs Info Tooltips
    – Using Advanced Tooltips in order to Enhance HTML5 MP3 Player
  • A Full Manageable MP3 Player with Covers Part 4
    – Validate your form upload fields and control Sliding Billboard with album covers
  • A Full Manageable MP3 Player with Covers Part 3
    – Creating an upload form
  • A Full Manageable MP3 Player with Covers Part 2
    – Insert the Sliding Billboard and retrieve the album covers
  • A Full Manageable MP3 Player with Covers Part 1
    – Setting up the HTML5 MP3 Player to uses File Genie PHP as a source
  • Using Spry Data Set in HTML5 MP3 Player
  • Adding Background Shapes Bouncing on the Sound of the HTML5 MP3 Player
    – Adding Shapes Reacting on Different Frequency Ranges
  • Adding Snow Music Visualization Effect to your Page
    – Working with one of the effects in the HTML5 Music Visualizer
  • Creating Sliding MP3 Playlist
    – Transform the MP3 links and create an amazing playlist
  • Creating a Dynamic HTML5 MP3 Player
    – Retrieve your mp3 player songs from a recordset
  • Bringing HTML5 Music to Your Slideshow
    – Wire your Slideshow with Sound
  • Basic HTML5 MP3 Player with a Predefined Design
    – How to insert the HTML5 MP3 Player on your page
  • Building a Custom HTML5 MP3 Player
    – Design your own MP3 Player skin
  • Turning Any Page Element into an MP3 Player Control
    – Control your MP3 Player with any page element
Add-ons


Add-ons

HTML5 Music Visualizer Add-On

Create the Perfect Ambiance with Amazing Music Visualizations

Requirements
Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Browser: Netscape 8, Firefox 1.5, Safari 2.0, IE 7, Firefox 3.6+, Opera 9.5, Safari 3, Chrome 9+, IE 8, Safari 4+, iPad
Used Technologies: jQuery, jQuery UI, CSS, JavaScript
Tags: html5, mp3, player, css, music, equalizer


History

Version 1.0.11

  • Included the latest jQuery 1.11.1
  • Compatibility with the new DMXzone Extension Manager
  • Improved compatibility with Dreamweaver CC 2014

Version 1.0.10

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.0.9

  • Great compatibility with our newest  HTML5 Parallax Slider for providing sound effects
  • Many HTML5, iOS and Android 2.3 fixes and improvements
  • IE10 HTML5 compatibility
  • Windows 8 compatibility
  • Improved control behavior
  • Fixed looping with a single song
  • Improved the Fancy Red and Blue design for longer song titles

Version 1.0.8

  • Latest SoundManager2 version for greatest HTML5 audio support! Now with great Android support and lots of HTML5 improvements.
  • New option in the Control HTML5 MP3 Player behavior - Toggle Playlist - allows you to show or hide the playlist.
  • Improved integration with dynamic data
  • Improved DW integration
  • Latest jQuery 1.7.2 included
  • Improved installer for for DW CS 5.5+ and Mac DW CS6

Version 1.0.7

  • Latest SoundManager2 version for greatest HTML5 audio support!
  • Fixed: Title not updating
  • Fixed: Update state when song finished
  • Fixed: Dynamic data browse

Version 1.0.6

  • Latest SoundManger2 version for greatest HTML5 audio support!
  • Improved compatibility with newest jQuery 1.6+ versions
  • Included latest jQuery 1.6.3

Version 1.0.5

  • Greatly improved support for MP3 Playback on Android and other devices supporting Flash
  • Improved MP3 playback on iPhone/iPad, Safari and Chrome when used in Spry region

Version 1.0.4

  • Latest SoundManager2 version included with many HTML5 fixes and improvements for even better iPhone/iPad support and HTML5 Audio play without Flash
  • Improved depended file include and linking
  • Improved working in Dreamweaver templates

Version 1.0.3

  • Updated styles for IE7 and IE8 compatibility

Version 1.0.2

  • Added full Spry Support - now you can use spry repeat regions within the MP3 Player
  • Latest SoundManager2 version included with many HTML5 fixes and improvements
  • Improved HTML5 Audio usage when Flash is not available on Safari or Chrome
  • Improved Behavior Connector events for cool integration with Advanced Tooltips
  • New jQuery 1.4.4 included
  • Improved styles cleanup
  • Fixed folder import on Mac OS

Version 1.0.1

  • New controls to display sound peak data!
  • New control to show just play/pause button
  • New control for vertical sound bar
  • Improved working with dynamic data
  • Added more validation to the command dialog
  • Control Behavior Improvements

Update Procedure:

Just open a page using the HTML5 MP3 Player. You will see a progress bar indicating new files are being copied. After that a dialog will popup with the list of the new files. Depending on if you have remote site defined and you have site synchronization enabled, the files will be automatically synchronized or you will be presented an option to upload all files.

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 >>

Place your review about HTML5 MP3 Player




You must me logged in to write a review
Reviews
Waiting for technology to catch up
November 30, 2011 by David Ortiz

Though this product works sometimes, when there are updates, the changes are intense and cause the extension to not work. I've been using this since it was first launched and the only version that worked was 1.0.5. Since then, 1.0.6 and 1.0.7 do not work on any mobile device nor desktop OS. 

 I use Spry, Dreamweaver CS5.5+, Apple Snow Leopard and Apple Lion. I test on multiple Droid phones, tablets, Windows phones and PCs (multiple Microsoft PCs and Windows browsers), and all apple devices, including iPad 1 and 2, iPhone 1st gen, 3G, 3GS, 4, 4S and all available laptop/iMac browsers such as Chrome, Firefox, Safari, Opera, etcetera.

 I was able to use version 1.0.5 as a main player on a popular music site for quite some time. When browser extensions became the norm, visitors could no longer use the player as was incompatible with browser extensions. With the releases of 1.0.6/7, this made all of the progress obsolete as the player stopped working, all together.

 The player is unreliable at this time (HTML5 is not widely supported at this time as well). Customer Service is spotty. When you purchase, keep in mind that the instructions are mostly bland and support is challenging to achieve.

 I love the product's potential and I believe in the near future that this will be a fabulous product and work as advertised. Today, 2011/2012, the product does not work as advertised.

 I keep a page working of each latest release. www.madonnaradio.com/untitled-1.html where I follow the step-by-step instructions for the basic player. Learning to build a custom player (as shown in the advertisement) is a dream that I would love to have come true. 

Terrific and SO simple
December 14, 2010 by Robert Robinette
I can't recommend this extension highly enough. It is robust with features, yet so simple to use. If you need iDevice-compatible audio, this is the way to go. Thanks DMXZone - keep them coming!
Great extension!
December 14, 2010 by Harold Rau

This is a great extension for playing mp3 files on a web page. Easy to install and use and it is trackable using jQuery or Google Analytics. Much better in that regard the the flash player I was using. Five stars from me!