Hello, please sign in or register
You are here: Home

Simple audio player in HTML5

 An audio player for Firefox and Chrome.

I had a few issues with changing the source "src" attribute on the audio tag and getting it to load successfully, so thanks to the jPlayer team who's script i examined and showed me that they recreate the audio tag element entirely to change tracks.

Here's the player anyway

Would you like sauce with that?

<script>

/**
* This functionplays the selected music where the file is determined by this.value.
* Instead of
*/
function play(){
try{
// destroy the original audio tag if it exists
document.getElementById('player').removeChild(document.getElementById('player').getElementsByTagName('audio')[0]);
}catch(e){}

// Create the player tags
var player = document.createElement('AUDIO');
player.src = this.value;
player.autoplay = true;
player.controls = true;

// Append the audio tag
document.getElementById('player').appendChild(player);
}


var music = [
"http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg",
"http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg",
"http://moztw.org/demo/audioplayer/audio/04.ogg",
];

window.onload = function(){
// List of music files
var domSelect = document.getElementById('select');
domSelect.addEventListener('change',play,true);

for(x in music){
var op = document.createElement('OPTION');
op.value = music[x];
op.innerHTML = music[x].replace(/^.*\//,'');
domSelect.appendChild(op);
}
}
</script>
<style>
.box{
background-color:#0099AA;width:300px;height:100px;margin-top:10%;padding:10px;margin-left:35%;border:1px outset white;-moz-border-radius:10px;-moz-box-shadow:4px 4px 3px grey;
-webkit-border-radius:10px;-webkit-box-shadow:4px 4px 3px grey;
}
.box audio{
border:2px inset white;
}
</style>
<div class="box">
<select id="select">
</select>
<div id='player'></div>
</div>

Comments

zLfjxoMwvtlRMBqHeEV
Full of salient points. Don't stop believing or wrtiing!
Created 07/08/11
iCZcLhVqdfLECYYiG
cAJfJS , [url=http://obilrixyhpns.com/]obilrixyhpns[/url], [link=http://deldrxbejqvw.com/]deldrxbejqvw[/link], http://nklbqkhwciqk.com/
Created 09/08/11
GJJcjLkIr
FOVDWQ ntfcnrfrllia
Created 10/08/11
websmine
Nice collection… Have some more awesome HTML5 audio player from http://websmine.com/design/html5/awesome-html5-audio-players/ Thanks for sharing…
Created 09/05/12
cmoutlet
s michael kors ralph lauren outlet burberry outlet,burberry,burberry outlet online,b...
Created 21/10/15
oakleysunglasses
“I canada goose outlet think it doesn’t swarovski jewelry bode very
Created 21/01/16
linpingping
The michael--kors.org.uk next ralph lauren outlet day patriots jersey Mrs
Created 01/03/16
clibin
Tyrion 5c cases watched her ray ban sunglasses read. His timber...
Created 18/04/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share