10 Jul 2014

HTML5 Audio

With the HTML5 audio element audio files can be easily played on your webpage without thinking about the future of Adobe Flash and the conflicts with mobile devices like (for example) iPhone and Android smartphones. Big advantages of HTML5 compared to flash are:

  • it runs natively in your browser ( more stable & less crashes )
  • modern mobile operating systems support it ( Android, iOS, etc )
  • more efficient ( less required memory & cpu power equals less energy consumption )
  • Adobe software especially flash is a security vulnerability
  • open standard

Support

MOZILLA FIREFOX INTERNET EXPLORER GOOGLE CHROME APPLE SAFARI OPERA
18.31% (>3.5) 16.39% (>8.0) 43.29% (>3.0) 9.18% (>3.0) 1.24% (>10.5)
Total: 88.41% StatCount 2013/2014

One of the annoyances  is the support of separated audio codecs. Some of the browsers prefer the free audio codecs (OGG Vorbis , WEBM), other the chargeable codecs (MP3 , WAV).  Here are the detailed information:

BROWSER OGG WAV PCM
MP3 WEBM
Mozilla Firefox YES YES ~ YES
Internet Explorer NO NO YES NO
Google Chrome  YES  YES  YES  YES
Apple Safari  NO YES YES NO
Opera YES YES YES YES

~ The newer versions of Firefox ( Windows above 21, MAC OSX above 26, Linux above 24 ) support the chargeable codec MP3 too, therefore MP3 is the audio codec, which is currently supported by all common browsers.

Implementation

The implementation of the <audio> tag  is as simple as placing an image on a webpage. However the <audio> tag contains some unique and important attributes:

autoplay

autoplay is a true or false field, which specifies if the song should be played immedately after the page is loadad or not.

loop

loop is also a true or false field, which specify if the track should be repeated after the song finished or not.

preload

preload is a field with the options none/metadata/auto.

  • “auto”  specifies that the track should be loaded instantly after the webpage was called.
  • “metadata”  specifies that only the metadata is preloaded.
  • “none”  specifies that the audio should not be loaded after the call.

controls

controls is again a true or false field, which specifies if the control bar should be shown or not.

 

Example:

<audio src="path.mp3" controls="controls" preload="auto">No support</audio>

<code> <audio  controls="controls" preload="auto" >
<source src="path.mp3" />
<source src="path.wav" />
<source src="path.ogg" />
<!-- No support ! (Flash Fallback) -->
</audio> 

The source parameter can be declared multiple times to ensure that the <audio> tag is supported by all browers.

JavaScript Control

The control of the audio element can be also managed by JavaScript. First of all the element must be fetched to use and manipulate it. The most common way to do this, is the use of the id-attribute.

 <audio id="demo"/> 

Now the audio element can be fetched with the following line. The further lines demonstrate a possible manipulation (control functions & event handler).

 var audio = document.getElementById("demo");

/* Audio Attributes */
audio.setAttribute('src','path.mp3');  //How to set the source path
audio.setAttribute('controls','');     //How to set the boolean fields
audio.setAttribute('preload','auto');  //How to set the preload field

/*Activate Audio Events */
audio.addEventListener('play',function(){window.alert("Playing");},true);
audio.addEventListener('pause',function(){window.alert("Pause");},true);
audio.addEventListener('ended',function(){window.alert("Ended");},true);

/*Audio Controls*/
//audio.play();
//audio.pause(); 

A list of audio events, which can be used, you can find hereResult of the code above:

 With JavaScript it is also possible to check the supported audio codecs of the browser. HTML designation of the codecs are:

  • audio/mpeg (MP3)
  • audio/wav , audio/x-wav (WAV)
  • audio/ogg (OGG)
  • video/webm (WebM)
if(audio.canPlayType('audio/ogg')!=""){
  //OGG Vorbis is supported
  //audio.setAttribute('src','path.ogg');
}else if(audio.canPlayType('audio/mpeg')!=""){
  //MP3 is supported
  //audio.setAttribute('src','path.mp3');
}else{
  //window.alert('No Support');
} 

Player Scripts

On the Internet some needful html5 audio scripts are available, which also support the mobile platforms like iOS (iPhone, iPad) or Android perfectly. For old browsers like IE7 or 8 the scripts also contain a Flash-Fallback, which become effective if the browser doesn’t support html5.

Soundmanager2

Soundmanager2 is a JavaScript API for realizing audio solutions. The implementation isn’t easy, but this API includes al lot of possibilities, like getting the audio information (Waveform and sample data,  metatags). For those browsers (IE7,8) which doesn’t support HTML5, Soundmanager contains a Flash-Fallback. Example: 360° UI-Player (The audio visualization works only with Flash- Support)

A guide how to realize this player, you can find here. (the larger version here)

MediaElement

The MediaElement.js is a pure HTML and CSS script, which can be used for the HTML5 audio or video tag. The script contains a custom Flash and Silverlight player for older browsers, which doesn’t support the HTML5 media tags. Here you can download the latest version. The implementation is very simple:

<audio id="player2" controls="controls" type="audio/mp3">
<source src="path.ogg" />
<source src="path.mp3" />
</audio>
<!--Init the Player-->
<script type="text/javascript">
$('audio,video').mediaelementplayer();
</script>

Example:


Credits (Music)

Artist: Immortal Beats
Track: Oh Wee
DLink: freemusicarchive.org

Leave a Reply