<audio id='audio' src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'>
</audio>
<div class="audio-duration">
<div class="audio-duration-indicator">
</div>
<input class="audio-duration-toggler" id="duration-toggler" type="range" value="0" />
</div>
<div class="volume">
<div class="volume-indicator"></div>
<input class="volume-toggler" id='volume-toggler' type="range" value="100" />
</div>
<button class="btn btn-play" id="play-btn">Play</button>
<button disabled class="btn btn-pause" id="pause-btn">Pause</button>
<button class="btn btn-mute" id="mute-btn">Mute</button>
.audio-duration {
height: 10px;
width: 300px;
margin: 30px 0;
border-radius: 10px;
position: relative;
box-shadow: 1px 1px 1px grey inset;
background: rgb(214, 213, 213);
}
.audio-duration-indicator {
border-radius: 10px;
height: 100%;
background-color: rgb(255, 30, 180);
width: 0;
}
input[type=range] {
-webkit-appearance: none;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
transition: transform 300ms;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.3);
}
.audio-duration-toggler {
width: 100%;
position: absolute;
height: 20px;
top: 0;
margin-top: -5px;
left: 0;
}
.audio-duration-toggler::-webkit-slider-thumb {
border: 1px solid grey;
height: 20px;
width: 10px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
border-radius: 30px;
margin-left: -3px;
}
.volume {
width: 300px;
height: 3px;
background-color: rgb(224, 224, 224);
border-radius: 5px;
margin-bottom: 20px;
position: relative;
}
.volume-indicator {
width: 100%;
background-color: rgb(68, 3, 47);
height: 100%;
}
.volume-toggler {
position: absolute;
top: 0;
margin-top: -4px;
width: 100%;
}
.volume-toggler::-webkit-slider-thumb {
border: 1px solid rgb(224, 224, 224);
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
cursor: pointer;
margin-left: -3px;
}
.btn {
border: none;
padding: 10px;
width: 80px;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
font-weight: bold;
}
.btn:disabled {
opacity: .4;
cursor: not-allowed;
}
.btn-play {
background-color: rgb(32, 189, 84);
color: white;
}
.btn-pause {
background-color: rgb(255, 153, 0);
color: white;
}
const durationIndicator = document.querySelector('.audio-duration-indicator');
const volumeIndicator = document.querySelector('.volume-indicator');
const audio = document.getElementById('audio');
const durationToggler = document.getElementById('duration-toggler');
const volumeToggler = document.getElementById('volume-toggler');
const playBtn = document.getElementById('play-btn');
const pauseBtn = document.getElementById('pause-btn');
const muteBtn = document.getElementById('mute-btn');
let duration;
audio.addEventListener('loadedmetadata', () => {
duration = audio.duration;
})
const setCurrentTime = (currentTime) => {
audio.currentTime = currentTime;
}
const getAudioProgress = (currentTime) => {
const progress = currentTime / duration * 100
durationIndicator.style.width = progress + '%';
durationToggler.value = progress;
return progress;
}
audio.addEventListener('timeupdate', (e) => {
const currentTime = e.target.currentTime;
getAudioProgress(currentTime);
});
playBtn.onclick = () => {
playBtn.disabled = true;
pauseBtn.disabled = false;
audio.play();
}
pauseBtn.onclick = () => {
pauseBtn.disabled = true;
playBtn.disabled = false;
audio.pause();
}
muteBtn.onclick = () => {
if (audio.muted) {
audio.muted = false;
muteBtn.innerText = 'Mute';
} else {
audio.muted = true;
muteBtn.innerText = 'Unmute';
}
}
durationToggler.addEventListener('input', (e) => {
const progress = parseInt(e.target.value);
const time = progress / 100 * duration;
setCurrentTime(time);
getAudioProgress(time, duration);
})
volumeToggler.addEventListener('input', (e) => {
const value = e.target.value;
const volume = value / 100;
audio.volume = volume;
volumeIndicator.style.width = value + '%';
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.