Back to Top
The nuts and bolts for
Creative web development

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


  • Horse Farm Showcase

    For this showcase we used Advanced Tooltips to enhance the description which appears on hover. Also we added sound that you can play on mouse click, and DMXzone Bootstrap 3, Navigation, Elements and ...

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

  • Spa Website Showcase

    If you were wondering where to put the HTML5 MP3 Player in great use, here is an example. The Player is not visible but plays some amazing background music and can be enabled and disabled easy ...

  • Music Contact Us Form with Notify Showcase

    For this showcase we created a contact form with button, which submits the form and retrieve the result on the same page with the help of DMXzone Ajax Form. The confirmation is executed with the ...

  • Spa and Relax Center Showcase

    To show images of our Spa center, we used the HTML5 Parallax Slider extension and made four slides with different images and elements inside them. Then we added music to every slide with the HTML5 ...

  • Snowmobiles Showcase

    For this showcase we made e simple page to introduce our products. With the help of our HTML5 Parallax Slider extensions, we were able to create four slides. In every slide we have an image and four ...

  • Album Preview Showcase

    For this showcase we only used HTML5 MP3 Player in order to create a music catalog.

  • Music All Around Showcase

    In this showcase we used the HTML MP3 Player to accompany the sliding images in the HTML5 Slideshow, which change with random effects.

  • MP3 Store

    In this showcase you can see a simple music store created with the HTML5 MP3 Player and Sliding Billboard extensions. When you click on the image thumbnails, the Sliding Billboard playlist changes.

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

  • iPlayer Showcase

    Represent your music with an astonishing iPod like menu! Use the built in power of touch and swipe gestures to recreate the iPod feeling in your website. Use the HTML5 Mp3 Player and transform ...

  • Fish Eye Menu & HTML5 MP3 Player Showcase

    We packed a stunning showcase, which will show you how to navigate your HTML5 MP3 Player through the Fish Eye Menu with fantastic fluid buttons.

  • Valentine's Day Music Showcase

    This design is created with our amazing HTML5 MP3 Player and Advanced Tooltips. Just click on the 'See in Action' button and check out what rich media tooltips can do with your projects.

  • Spry Data Set Driven HTML5 MP3 Player Showcase

    This MP3 Player is feeded with a Spry Data Set build from an XML file.

  • HTML5 MP3 Player with Album Cover Upload Showcase

    In this showcase we used a number of DMXzone extensions in order to make it play your uploaded mp3s and images. Here's what we did:

  • HTML5 MP3 Player Showcase

    In this showcase you can upload your song with the help of Pure PHP Upload 2 and listen to it in our HTML5 MP3 Player. When clicked on Upload a Song, a Lightbox window pops up, where you can select ...

  • HTML5 MP3 Player & Advanced CSS Animator Showcase

    In this showcase we show you a perfect example of combining Advanced CSS Animator with the HTML5 MP3 Player. Thanks to the CSS Animator, the speakers are animated and the MP3 Player is taking care of ...

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

  • HTML5 MP3 Player & Sliding Panels Showcase

    The showcase has been created by combining two extensions - Sliding Panels and HTML5 MP3 Player. The MP3 Player is implemented as a Title in the Sliding Panels. To complete the experience Sliding ...

  • HTML5 Slideshow & HTML5 MP3 Player

    In this showcase we used the HTML MP3 Player to accompany the sliding images in the HTML5 Slideshow, which change with random effects.

  • DJ Website Showcase

    All you need for this showcase is HTML5 Slideshow, HTML5 MP3 Player and some creativity. We did a website with our friend QJ's music from Adultempo Specialists, who was excited to see how we bind his ...

  • MP3 Player Skins

    In this showcase you can explore all the predefined skins included in the extension as well as some custom ones.

  • HTML5 MP3 Player Showcase

    In this showcase you can see our soon to be released HTML5 MP3 Player running on a web site. Additionally to the many supplied designs in the extension, you can also attach it to any element on the ...

Videos



HTML5 MP3 Player with Google Analytics


Using Stop Playback Behavior with HTML5 MP3 Player


Hiding the HTML5 MP3 Player Playlist


Controlling HTML5 MP3 Player with DMXzone Slider


Manage your HTML5 MP3 Player Playlist Online


Fluid HTML5 MP3 Player Controls with Fish Eye Menu


HTML5 MP3 Player with Songs Info Tooltips


A Full Manageable MP3 Player with Covers Part 4


A Full Manageable MP3 Player with Covers Part 3


A Full Manageable MP3 Player with Covers Part 2


A Full Manageable MP3 Player with Covers Part 1


Using Spry Data Set in HTML5 MP3 Player


Adding Background Shapes Bouncing on the Sound of the HTML5 MP3 Player


Adding Snow Music Visualization Effect to your Page


Creating Sliding MP3 Playlist


Creating a Dynamic HTML5 MP3 Player


Bringing HTML5 Music to Your Slideshow


Basic HTML5 MP3 Player with a Predefined Design


Building a Custom HTML5 MP3 Player


Turning Any Page Element into an MP3 Player Control

Add-ons


Add-ons


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

Read More

Requirements

Used Technologies: jQuery, jQuery UI, CSS, JavaScript


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

Share this Article

Reviews

Waiting for technology to catch up

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

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!

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!