Coming Soon - Player Under Construction, please play from the chat room till this is working. thanks!
00:00
+
50%
-
<script> var audioPlayer = document.querySelector("audio"); var audioSource = document.querySelector("source"); var streamurl = "https://masterzradio.rocks:8001/mzr-stream"; audioPlayer.controls = false; audioPlayer.volume = 0.5; audioPlayer.setAttribute("id","p"); audioSource.setAttribute("src", streamurl); audioPlayer.load(); document.body.appendChild(audioPlayer); var volumeDisplay = document.querySelector("#volumeDisplay"); var volumeUp = document.querySelector("#volUP"); volumeUp.addEventListener("click",volUp,false); var volumeDown = document.querySelector("#volDown"); volumeDown.addEventListener("click",volDown,false); var initialVolume = 0.5; var play = false; function $(id) { return document.getElementById(id); }; const media = document.getElementById('audio'); let ui = { play: 'playAudio', audio: 'audio', percentage: 'percentage', seekObj: 'seekObj', currentTime: 'currentTime' }; function togglePlay() { if (media.paused === false) { media.pause(); media.currentTime = 0.0; $(ui.play).classList.remove('pause'); } else { media.play(); $(ui.play).classList.add('pause'); } } function calculatePercentPlayed() { let percentage = (media.currentTime / media.duration).toFixed(2) * 100; $(ui.percentage).style.width = `${percentage}%`; } function calculateCurrentValue(currentTime) { const currentMinute = parseInt(currentTime / 60) % 60; const currentSecondsLong = currentTime % 60; const currentSeconds = currentSecondsLong.toFixed(); const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${ currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds }`; return currentTimeFormatted; } function initProgressBar() { const currentTime = calculateCurrentValue(media.currentTime); $(ui.currentTime).innerHTML = currentTime; $(ui.seekObj).addEventListener('click', seek); media.onended = () => { $(ui.play).classList.remove('pause'); $(ui.percentage).style.width = 0; $(ui.currentTime).innerHTML = '00:00'; }; function seek(e) { const percent = e.offsetX / this.offsetWidth; media.currentTime = percent * media.duration; } calculatePercentPlayed(); } $(ui.play).addEventListener('click', togglePlay) $(ui.audio).addEventListener('timeupdate', initProgressBar); function volUp(){ if(audioPlayer.volume <= 1.0){ initialVolume = (initialVolume + 0.05); audioPlayer.volume = initialVolume; volumeDisplay.innerHTML = parseInt((initialVolume * 100),10)+ "%"; } } function volDown(){ if(audioPlayer.volume >= 0.0){ initialVolume = (initialVolume - 0.05); audioPlayer.volume = initialVolume; volumeDisplay.innerHTML = parseInt((initialVolume * 100),10) + "%"; } } </script>