Embed audio mp3 without using Flash

Question

what is a nice way to embed audio mp3 in html page without using flash but with a custom skin? also it should work, partially, also in older browsers

Answer 1

You should look at SoundManager 2 .

It uses HTML5 if the browser supports it, but will degrade to using flash if it has to. The brilliant thing is that it has one API that works the same either way. I have used this tool on a few projects and it is amazing.

Here's a description from their How it works page

Problem: Browsers lack good, consistent native audio support. (HTML 5's Audio() is the future, but is still in 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, flash is used as a fallback.

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

Answer 2

If you want it in older browser then you have to provide a Flash fallback. You can do it with jPlayer for example. jPlayer supports:

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

Keep in mind that Firefox doesn't have a native MP3 support so if you use HTML5 audio you have to also provide Ogg Vorbis for Firefox and some other browsers.

Answer 3

I just ran across this article from Thomas Fuchs that covers several ways to play audio via Javascript without relying on a flash fall back.

Here are the main points of the article .

Mobile browsers
No solution for now unless the sound is to be played as direct result of user action (click)

Browers with support for HTML5 <audio> element.
Requires that you provide the 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're dealing with IE <9

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

Otherwise test support for QuickTime, RealPlayer and Windows Media
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 have created a JQuery Sound Plugin which is based on Thomas Fuchs article mentioned above by jessegavin. You can find it at https://github.com/thebentarrow/JQuery-Sound-Plugin

Please use, abuse and contribute!