Синхронизация цвета фона или изменения изображения с currentTime индикатора выполнения аудиопроигрывателя - PullRequest
Новая
       22

Синхронизация цвета фона или изменения изображения с currentTime индикатора выполнения аудиопроигрывателя

0 голосов
/ 20 марта 2019

У меня есть аудиопроигрыватель 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 на индикаторе выполнения.

Я все еще хотел бы придерживаться ползунка ввода, если это возможно.

...