Question

项目：我有一个带有进度条的网络音乐播放器。我想单击进度栏上的某个位置，然后将填充栏移到该点。

问题： 单击时，填充条会移动，我希望填充条会移动到进度条内单击的位置，但是，似乎有些偏移约为0.6，所以我在进度条上单击的任何位置，填充栏将移至该点+ 0.6。

我尝试过的事情： 最初，我认为这与CSS样式有关，因为我使用进度和填充栏的宽度和偏移量来计算点击位置，但是由于我还是Java和CSS的新手，所以我不知道改变。我尝试过在线搜索一些答案，但是发现了一些与我的问题有关的讨论，但没有一个回答我的问题。我发现与我的问题有关的最接近的问题是这个（Determine click position on progress bar?），但这只给了我另一个错误：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>

如何删除进度条上的偏移量？

0 个答案: