Question

我有一个JavaScript音频播放器，可以在播放歌曲时跟踪时间或保持同步，并且当用户单击进度条时，滑块将设置audio.currentTime的值

这是我当前正在测试的实际音频播放器。请快速浏览： http://newsletters.aaronestebancoaching.com/test1/1.html

但是我想做的是创建背景颜色或背景图像，它们也将沿着进度栏移动以与currentTime保持同步。

这是我到目前为止所拥有的：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>Document</title>

    <style>
        #audio-container{
        position:relative;
        margin:auto;
        width:320px;
        height:90px;
        background:orange;
        border:2px solid black;
        margin-top:25px;
        }

        #play{
        background:url(images/play-sprite.png);
        background-position:0px 0px;
        width:60px;
        height:60px;
        float:left;
        cursor:pointer;
        margin-left:5px;
        }

        #play:hover{
        background-position:120px 0px;
        }

        #play:active{
        background-position:60px 0px;
        }

        #pause{
        background:url(images/pause-sprite.png);
        background-position:0px 0px;
        width:60px;
        height:60px;
        float:left;
        cursor:pointer;

        }

        #pause:hover{
        background-position:120px 0px;
        }

        #pause:active{
        background-position:60px 0px;
        }


        #audio-slider{
        position:relative;
        -webkit-appearance:none;
        appearance:none;
        width:98%;          
        background:darkorange;
        border:1px solid brown;
        height:10px;
        border-radius:10px;
        outline:none;
        cursor:pointer;
        margin-left:2px;
        margin-top:5px;
        }

        #audio-slider::-webkit-slider-thumb{
        -webkit-appearance:none;
        appearance:none;
        width:10px;
        height:20px;
        border:1px solid black;
        background:brown;
        }

        #fill-bar{
        position:absolute;
        height:10px;
        border-top-left-radius:10px;
        border-bottom-left-radius:10px;
        margin-left:2px;
        margin-top:5px;
        width:0px;
        background:red;
        bottom:14px;
        left:1px;
        }

    </style>
</head>
<body>
    <div id="audio-container">
        <div id="play" onclick="play()"></div>
        <div id="pause" onclick="pause()"></div>

        <input type="range" id="audio-slider" min="0" value="0" step="1" onchange="seek()">
        <div id="fill-bar"></div>

    </div>
</body>
<script type="text/javascript">
    var audio = new Audio();
    var audioSlider = document.getElementById("audio-slider");
    var fillbar = document.getElementById("fill-bar");
    audio.src = "music/Song2.mp3";

    function play(){
        audio.play();   
    }

    function pause(){
        audio.pause();  
    }


    //sync the slider handle with the currentTime
    setInterval(updateSongSlider, 1000);
    function updateSongSlider(){
        var c = Math.round(audio.currentTime);
        audioSlider.value = c;
        fillbar.style.width = c + "px";

        var d = audio.duration
        audioSlider.setAttribute("max", d);

    }

    //set the currentTime to match users click on the progress bar
    function seek(){         
        audio.currentTime = audioSlider.value;          
        play(); 
    }

</script>
</html>

如何创建背景颜色或图像以与currentTime保持同步？问题是#fill-bar div掩盖了输入滑块，并且不允许我在进度条上单击并正确设置currentTime。

如果可能的话，我仍然想坚持使用输入滑块。

将背景颜色或图像更改与音频播放器进度条的currentTime同步

0 个答案: