<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
box-sizing: border-box;
}
body {
background-color: white;
}
.audio-player {
width: 250px;
padding: 5px 5px;
margin: auto;
background-color: white;
border: 1px solid black;
}
.audio-player .player-controls {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.audio-player #radioIcon {
width: 30px;
height: 30px;
background: url("https://img.icons8.com/ios/50/000000/microphone.png") no-repeat center;
background-size: contain;
}
.audio-player #playAudio {
-webkit-appearance: none;
outline: none;
cursor: pointer;
border: none;
width: 30px;
height: 30px;
background: url("https://img.icons8.com/play") no-repeat center;
background-size: contain;
}
.audio-player #playAudio.pause {
background: url("https://img.icons8.com/pause") no-repeat center;
background-size: contain;
}
.audio-player p {
margin: 0 0 0 5px;
line-height: 1;
display: inline-flex;
}
.audio-player p small {
font-size: 10px;
}
.audio-player #seekObjContainer {
position: relative;
width: 300px;
margin: 0 5px;
height: 5px;
}
.audio-player #seekObjContainer #seekObj {
position: relative;
width: 100%;
height: 100%;
background-color: #e3e3e3;
border: 1px solid black;
}
.audio-player #seekObjContainer #seekObj #percentage {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: coral;
}
</style>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onPlayerReady(event) {
document.getElementById(ui.play).addEventListener('click', togglePlay);
timeupdater = setInterval(initProgressBar, 100);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
document.getElementById(ui.play).classList.remove('pause');
document.getElementById(ui.percentage).style.width = 0;
document.getElementById(ui.currentTime).innerHTML = '00:00';
player.seekTo(0, true);
}
}
let ui = {
play: 'playAudio',
audio: 'audio',
percentage: 'percentage',
seekObj: 'seekObj',
currentTime: 'currentTime'
};
function togglePlay() {
if (player.getPlayerState() === 1) {
player.pauseVideo();
document.getElementById(ui.play).classList.remove('pause');
} else {
player.playVideo();
document.getElementById(ui.play).classList.add('pause');
}
}
</script>
<script>
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'EA8dhRhdmnQ',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
</script>
</head>
<body>
<!--Youtube-->
<div id="player" style="display: none; visibility: hidden;"></div>
<!--Player-->
<div class="audio-player">
<div class="player-controls">
<div id="radioIcon"></div>
<button id="playAudio"></button>
<div id="seekObjContainer">
<div id="seekObj">
<div id="percentage"></div>
</div>
</div>
<p><small id="currentTime">00:00</small></p>
</div>
</div>
</body>
</html>