I built a custom audio player for a web radio. The problem is I cant find a way to STOP it. If paused, when resumed audio continues to play from the point that has been paused. So if you pause the player, when you resume it you hear the song from where you paused it but the stream server has already played the next track. In other words, if you pause and resume a little bit later, you dont here what the stream server plays now. After searching the web I found out that I have to STOP the player and NT RESUME. Anyone knows any way to achieve that? Another option is to use FLASH PLAYER but I really need to use a custom player and do not know how to do it in flash.
Here is my code:
PLAYER.JS
var audio = document.getElementById("audio");
audio.controls = false;
audio.addEventListener('play', function() {
var playpause = document.getElementById("playpause");
playpause.title = "pause";
playpause.innerHTML = "pause";
}, false);
audio.addEventListener('pause', function() {
var playpause = document.getElementById("playpause");
playpause.title = "play";
playpause.innerHTML = "play";
}, false);
audio.addEventListener("ended", function() { this.pause(); }, false);
function togglePlayPause() {
var playpause = document.getElementById("playpause");
if (audio.paused || audio.ended) {
// Change the title and the text of the button to "pause"
playpause.title = "pause";
playpause.innerHTML = "pause";
audio.play();
}
else {
playpause.title = "play";
playpause.innerHTML = "play";
audio.pause();
}
}
function setVolume() {
var volume = document.getElementById("volume");
audio.volume = volume.value;
}
function toggleMute() {
audio.muted = !audio.muted;
if (audio.muted) {
mute.title="muted"
} else {
mute.title="notmuted"
}
}
HTML MARKUP
<audio id="audio">
<source src="http://xxx.xxx.com:xxxx/stream" type="audio/mp3">
</audio>
<div id="controls">
<button id="playpause" title="play" onclick="togglePlayPause()">Play</button>
<input id="volume" min="0" max="1" step="0.01" type="range" onchange="setVolume()" />
<button id="mute" onclick="toggleMute()" title="notmuted">Mute</button>
</div>