but then i decided to get creative by using a single player and making it possible for the user to load 1 of 4 songs to the single player before clicking the play button. when you click on any of the songs, the audio element's source files are changed by the script.
however, only the first song loaded (the default song "Song 1" loaded at the time the page loads) plays. it seems that the source file loads at page load time and cannot be changed. is this a restriction of the html5 audio element? any suggestions?
thanks.
<!DOCTYPE html><html dir='ltr' lang='en-US'>
<head><title>media</title></head>
<body>
<script>
function loadSong(songTitle, oggFile, mp3File) {
document.getElementById('song_title').innerHTML = songTitle;
document.getElementById('ogg_file').src = oggFile;
document.getElementById('mp3_file').src = mp3File;
}
</script>
<div class='audio_box'>
<span id='song_title' name='song_title'>Song 1</span><br /><br />
<audio controls='controls'>
<source id='ogg_file' src='media/music/Song1.ogg' type='audio/ogg' />
<source id='mp3_file' src='media/music/Song1.mp3' type='audio/mpeg' />
<p>Your browser is not currently supported for playback of music. Please use a browser such as the latest Firefox, Google Chrome, or Safari.</p>
</audio>
</div>
<!-- these are the song choices -->
<span><a id='song1' href="#" onClick="loadSong('Song 1', 'media/music/Song1.ogg', 'media/music/Song1.mp3')">Song 1</a></span><br /><br />
<span><a id='song2' href="#" onClick="loadSong('Song 2', 'media/music/Song2.ogg', 'media/music/Song2.mp3')">Song 2</a></span><br /><br />
<span><a id='song3' href="#" onClick="loadSong('Song 3', 'media/music/Song3.ogg', 'media/music/Song3.mp3')">Song 3</a></span><br /><br />
<span><a id='song4' href="#" onClick="loadSong('Song 4', 'media/music/Song4.ogg', 'media/music/Song4.mp3')">Song 4</a></span><br /><br />
</body>
</html>
No comments:
Post a Comment