Проект: У меня есть веб-плеер c, у которого есть индикатор выполнения. Я хочу щелкнуть где-нибудь на моем индикаторе выполнения и переместить полосу заполнения к этой точке.
Проблема: Я получил, что панель заливки перемещается, когда я нажимаю, и я ожидаю, что заливка полоса для перемещения туда, где я щелкнул внутри индикатора выполнения, однако, похоже, что она имеет какое-то смещение около 0,6, поэтому, когда я нажимаю на индикатор выполнения, панель заливки перемещается в эту точку + 0,6.
То, что я пробовал: Первоначально я думал, что это как-то связано с моим стилем CSS, так как я вычисляю позицию щелчка, используя ширину и смещения индикатора хода выполнения и заполнения, но потому, что я ' Я все еще новичок в Javascript и CSS, я не могу понять, что изменить. Я попытался найти некоторые ответы в Интернете, но нашел пару обсуждений, связанных с моей проблемой, но никто не ответил на мой вопрос. Самый близкий вопрос, который я мог найти, который связан с моей проблемой, заключается в следующем ( Определить позицию нажатия на индикаторе выполнения? ), но это только дало мне еще одну ошибку: Uncaught TypeError: Cannot read property 'addEventListener' of null
Этот проект основан в учебнике, за которым я следовал (https://www.youtube.com/watch?v=7gG_UAx8aUU).
Любая помощь будет принята с благодарностью.
// songs and cover lists
var songs = ["./Songs/Hasta-Ver-Tu-Gloria.mp3"]
var currentSong = 0;
let seekBar = document.querySelector('.seek-bar');
let fillBar = seekBar.querySelector('.fill');
// Song and Image object
const song = new Audio();
const image = document.getElementById("coverImage");
// Sets current song to the first song in the list
function restartList() {
currentSong = 0;
}
// Loads first song
document.onload = setCurrentSong();
// Sets current song when fucntion is called
function setCurrentSong() {
song.src = songs[currentSong];
console.log(currentSong);
}
// fill bar follows song
song.addEventListener('timeupdate', function () {
let p = song.currentTime / song.duration;
fillBar.style.width = p * 100 + '%';
});
let mouseDown = false;
// calculates where fillbar should move after click
function getP (e) {
let p = (e.clientX - seekBar.offsetLeft) / seekBar.offsetWidth;
return p;
}
// updates fill bar when user clicks
seekBar.addEventListener('mousedown', function (e) {
mouseDown = true;
let p = getP(e);
console.log(p);
(fillBar.style.width = p * 100 + '%');
});
body {
position: relative;
height: 100vh;
background: radial-gradient(at bottom, #222222 0%,#313131 100% );
display: flex;
justify-content: space-evenly;
align-items: center;
}
/* Something in this css is affecting the seek bar */
#musicPlayer {
width: 350px;
height: auto;
padding: 15rem 1rem 2rem 1rem;
display: inline-block;
text-align: center;
position: relative;
background-color: rgb(54, 54, 54);
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.7);
}
.seek-bar{
width: 250px;
height: 10px;
background-color:rgb(138, 136, 136);
display: inline-flex;
text-align: center;
position: relative;
border-radius: 50px;
cursor: pointer;
}
.fill{
height: 10px;
background-color:rgb(225, 182, 65);
border-radius: 30px;
position: relative;
}
.handle {
width: 8px;
height: 8px;
background-color:rgb(225, 182, 65);
border-radius: 50%;
margin-left: -5px;
transform: scale(2);
transition: all 0.1s;
}
.handle:hover {
background-color: rgb(253, 208, 82);
transform: scale(3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS Reference -->
<link rel="stylesheet" href="style.css">
<!-- JS Reference -->
<script defer src="app.js"></script>
</head>
<body>
<div class="container">
<div id="musicPlayer">
<div class="seek-bar">
<div class="fill"></div>
<div class="handle"></div>
</div>
</div>
</div>
</body>
</html>