Hi, I am looking to have multiple songs on one page that you can click on the text (SongTitle) to start each song. I've accomplished that so far with a PAUSE button below the songs that works to pause whatever song has been clicked last. Ideally, what I would like to do is to have each text (SongTitle) as a toggle PLAY/STOP button so all you have to do to start and stop each song is to click the text(SongTitle). I'm not sure if that is possible.
If that is not an option, there are two other things I would like to try. One is to put a STOP button after each song.
The second would be instead of the PLAY/PAUSE button, is there a way to just have one STOP button at the bottom (for all songs)?
Here is what I have so far...
If anyone has some insight on this topic, I'd really appreciate it. Thanks!!
If that is not an option, there are two other things I would like to try. One is to put a STOP button after each song.
The second would be instead of the PLAY/PAUSE button, is there a way to just have one STOP button at the bottom (for all songs)?
Here is what I have so far...
Code:
<script type="text/javascript">
function loadPlayer() {
var audioPlayer = new Audio();
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
document.getElementById("player").appendChild(audioPlayer);
nextSong();
}
function nextSong() {
if(urls[next]!=undefined) {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
audioPlayer.src=urls[next];
audioPlayer.load();
audioPlayer.play();
next++;
} else {
loadPlayer();
}
}
}
function errorFallback() {
nextSong();
}
function playPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
if (audioPlayer.paused) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
} else {
loadPlayer();
}
}
function pickSong(num) {
next = num;
nextSong();
}
var urls = new Array();
urls[0] = 'song1.mp3';
urls[1] = 'song2.mp3';
urls[2] = 'song3.mp3';
urls[3] = 'song4.mp3';
urls[4] = 'song5.mp3';
urls[5] = 'song6.mp3';
var next = 0;
</script>
<body>
<div id="player"></div>
<a href="#" onclick="pickSong(0)">SongTitle1</a><br>
<a href="#" onclick="pickSong(1)">SongTitle2</a><br>
<a href="#" onclick="pickSong(2)">SongTitle3</a><br>
<a href="#" onclick="pickSong(3)">SongTitle4</a><br>
<a href="#" onclick="pickSong(4)">SongTitle5</a><br>
<a href="#" onclick="pickSong(5)">SongTitle6</a><br>
<a class=two href="#" onclick="playPause()">pause</a>
</body>If anyone has some insight on this topic, I'd really appreciate it. Thanks!!
