Вот мой код в редакторе:
https://www.w3schools.com/code/tryit.asp?filename=G473BBFZVWZE
.mini-player {
position: absolute;
height: 32px;
right: 2.2vw;
top: 2.2vw;
z-index: 1;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
button#playpausebtn {
width: 12px;
height: 14px;
}
input#seekslider {
width: 100px;
}
</style>
<script>
var audio, playbtn, seekslider, seeking = false,
seekto;
function initAudioPlayer() {
audio = new Audio();
audio.src = "https://s3.us-east-2.amazonaws.com/bucket-1-console-testing/18b430b4-0128-4d0d-95e2-f2e2275097ba.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
// Add Event Handling
playbtn.addEventListener("click", playPause);
seekslider.addEventListener("mousedown", function(event) {
seeking = true;
seek(event);
});
seekslider.addEventListener("mousemove", function(event) {
seek(event);
});
seekslider.addEventListener("mouseup", function() {
seeking = false;
});
// Functions
function playPause() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
function seek(event) {
if (seeking) {
seekslider.value = event.clientX - seekslider.offsetLeft;
seekto = audio.duration * (seekslider.value / 100);
audio.currentTime = seekto;
}
}
}
window.addEventListener("load", initAudioPlayer);
</script>
</head>
<body>
<div class="mini-player">
<button id="playpausebtn" aria-hidden="true"><i class="fa fa-play fa-2x"></i></button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
</div>
</body>
</html>
Слайдер больше не работает, поэтому независимо от того, в какое время вы нажали mp3, он начинает mp3 с самого начала.
Не могли бы вы посоветовать, как создать такой же макет, чтобы слайдер работал так, как должен. Может, что-то не так с кодом скрипта или css?