GOOCODE - Find your code/scripts

7 HTML5's audio provides audio playback, but the native style is not very nice looking, and each browser audio appears to show disunity. We can be a little package under the audio, you can achieve a response beautiful player style which can be touched.

HTML

<audio preload="auto" controls autoplay> 
    <source src="audio.wav" /> 
    <source src="audio.mp3" /> 
    <source src="audio.ogg" /> 
</audio> 

In fact, if only the above code, in support HTML5 browsers can properly display and play. And we need to do is to beautify the player, and make the appropriate packaging, so we refer to a jQuery plugin.

jQuery
First, we will effect the necessary CSS3 and jQuery render style file library files into.

<link rel="stylesheet" href="audioplayer.css" /> 
<script src="jquery.js"></script> 

Then, we call the player plug-in, look at the code:

<script src="audioplayer.min.js"></script> 
<script> 
$(function() {  
    $('audio').audioPlayer(); 
}); 
</script> 

Plug-in also provides the necessary operational option, users can set as the binding style, button language settings.

$('audio').audioPlayer({ 
    classPrefix: 'audioplayer', 
    strPlay: 'Play', 
    strPause: 'Pause', 
    strVolume: 'Volume' 
}); 

Here you can see a beautiful presentation as DEMO audio player up. There is a problem that we know some older browsers do not support html5, such as IE8 and below, and firefox does not support mp3, particularly sources we generally offer few ogg format, then how do we solve the compatibility problems it? There are good programs that do not support the use of flash to play on html5 browsers, like a lot of this scheme is to use the online audition site.