Embed mp3 audio without using flash

Question

What is a good way to embed mp3 audio into an html page without using flash, but with a custom skin? it should also work, in part, also in older browsers

Answer 1

If you want to use it in an earlier browser, you need to provide a backup of Flash. You can do this with jPlayer . JPlayer support:

• HTML5: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm
• Flash: mp3, m4a (AAC), m4v (H.264)

Keep in mind that Firefox does not have built-in MP3 support, so if you use HTML5 audio, you also need to provide Ogg Vorbis for Firefox and some other browsers.

Answer 2

You should see SoundManager 2 .

It uses HTML5 if the browser supports it, but will degrade to using flash if necessary. The great thing is that it has one API that works the same way anyway. I used this tool for several projects and it is awesome.

Here is a description of how this page works.

Problem: Browsers do not have good consistent support for native audio. (HTML 5 Audio () is the future, but still under development.)

Solution: Javascript API using HTML5 Audio () + headless Flash via ExternalInterface works almost everywhere. If HTML5 is supported, but non-free MP3 / MP4 formats are not used, flash is used as a backup.

SoundManager 2 wraps and extends the Flash API and HTML Audio Sound, providing a single unified sound API for Javascript; The API is the same regardless of whether HTML or Flash is used to play audio. (The flash part is hidden, transparent for both developers and end users.)

Answer 3

I just came across this article from Thomas Fuchs , which covers several ways to play sound through Javascript, without relying on a sudden drop.

Here are the main points of the article .

Mobile Browsers
While there is no solution, if the sound will not play as a direct result of the user’s action (click)

Browsers with support for the HTML5 <audio> element.
It is required to provide audio in three different formats.

 if("Audio" in window){ var a = new Audio(); if(!!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''))) a.src = "/sounds/ping.ogg"; else if(!!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''))) a.src = "/sounds/ping.mp3"; else if(!!(a.canPlayType && a.canPlayType('audio/mp4; codecs="mp4a.40.2"').replace(/no/, ''))) a.src = "/sounds/ping.m4a"; else a.src = "/sounds/ping.mp3"; a.autoplay = true; return; } 

If you are dealing with IE <9

 <bgsound src="/sounds/ping.mp3" loop="1" autostart="autostart"> 

Otherwise, support for testing QuickTime, RealPlayer and Windows Media
The following code is written with Prototype.js

 // this code uses Prototype.js if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('QuickTime') != -1 })) Sound.template = new Template('<object id="sound_#{track}_#{id}" width="0" height="0" type="audio/mpeg" data="#{url}"/>'); else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('Windows Media') != -1 })) Sound.template = new Template('<object id="sound_#{track}_#{id}" type="application/x-mplayer2" data="#{url}"></object>'); else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('RealPlayer') != -1 })) Sound.template = new Template('<embed type="audio/x-pn-realaudio-plugin" style="height:0" id="sound_#{track}_#{id}" src="#{url}" loop="false" autostart="true" hidden="true"/>'); 

Answer 4

I created the JQuery Sound Plugin, which is based on an article by Thomas Fuchs mentioned by jessegavin above. You can find it at https://github.com/thebentarrow/JQuery-Sound-Plugin

Please use, abuse and contribute!