HTML 自定义音频播放器 - 获取当前时间和总时间

Question

所以我正在创建一个定制的 MP3，我刚刚设法更新了您可以跳到曲目的特定部分的部分。

但我不知道如何设置它，所以它显示 hh:mm:ss 中的当前播放时间以及 hh:mm:ss

中显示的总时间

Here is the CodePen for the player。有人可以帮忙吗？

HTML:

<div class="player">
    <div class="player__bar">
        <div class="player__album">
            <div class="player__albumImg active-song" 
                data-author="UCL"
                data-song="Library Atmos"
                data data-src="https://uclinformationstudies100.org/wp-content/uploads/2021/01/DISCENT-SMVB-Part-1-Edit-1_01.mp3" style="background-image: url(http://ucl.nathandasilva.co.uk/record-player.png">
            </div>
            <div class="player__albumImg" 
                data-author="UCL"
                data-song="Library Atmos"
                data data-src="http://ucl.nathandasilva.co.uk/Library_Atmos_Edit_1.wav" style="background-image: url(https://alikinvv.github.io/minimal-player/build/img/album.jpg">
            </div>           
        </div>
        <div class="player__controls">

            <div class="player__prev">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z"/><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/><g><path d="M55.5 34.434v31.132l27.805-15.568z"/><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/></g></svg>
            </div>

            <div class="player__play">
                    <svg class="icon play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M51.109 30.335l-36-24A2 2 0 0 0 12 8v48a2.003 2.003 0 0 0 2 2c.388 0 .775-.113 1.109-.336l36-24a2 2 0 0 0 0-3.329z"/></svg>
                    <svg class="icon pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M22.537 8.046h17.791c1.104 0 2.003.898 2.003 1.993v79.912a2.005 2.005 0 0 1-2.003 2.003h-17.79a2.005 2.005 0 0 1-2.003-2.003V10.04c0-1.095.898-1.993 2.002-1.993zM59.672 8.046h17.8c1.095 0 1.993.898 1.993 1.993v79.912a2.003 2.003 0 0 1-1.993 2.003h-17.8a1.997 1.997 0 0 1-1.993-2.003V10.04c0-1.095.889-1.993 1.993-1.993z"/></svg>
            </div>

            <div class="player__next">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M26.695 34.434v31.132L54.5 49.998z"/><path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"/><g><path d="M55.5 34.434v31.132l27.805-15.568z"/><path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"/></g></svg>
            </div>
        </div>
    </div>
    <div class="player__timeline">
        <p class="player__author"></p>
        <p class="player__song"></p>
        <div class="player__timelineBar"><div id="playhead"></div></div>
    </div>
</div>

JS

$(document).ready(function () {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', $('.active-song').attr('data-src'));

    var tl = new TimelineMax();
    tl.to('.player__albumImg', 3, {
        rotation: '360deg',
        repeat: -1,
        ease: Power0.easeNone
    }, '-=0.2');
    tl.pause();

    $('.player__play').click(function () {

        if ($('.player').hasClass('play')) {
            $('.player').removeClass('play');
            audioElement.pause();
            TweenMax.to('.player__albumImg', 0.2, {
                scale: 1,
                ease: Power0.easeNone
            })
            tl.pause();
        } else {
            $('.player').addClass('play');
            audioElement.play();
            TweenMax.to('.player__albumImg', 0.2, {
                scale: 1.1,
                ease: Power0.easeNone
            })
            tl.resume();
        }

    });


    var playhead = document.getElementById("playhead");
    audioElement.addEventListener("timeupdate", function () {
        var duration = this.duration;
        var currentTime = this.currentTime;
        var percentage = (currentTime / duration) * 100;
        playhead.style.width = percentage + '%';
    });

    function updateInfo() {
        $('.player__author').text($('.active-song').attr('data-author'));
        $('.player__song').text($('.active-song').attr('data-song'));
    }
    updateInfo();

    $('.player__next').click(function () {
        if ($('.player .player__albumImg.active-song').is(':last-child')) {
            $('.player__albumImg.active-song').removeClass('active-song');
            $('.player .player__albumImg:first-child').addClass('active-song');
            audioElement.addEventListener("timeupdate", function () {
                var duration = this.duration;
                var currentTime = this.currentTime;
                var percentage = (currentTime / duration) * 100;
                playhead.style.width = percentage + '%';
            });
        } else {
            $('.player__albumImg.active-song').removeClass('active-song').next().addClass('active-song');
            audioElement.addEventListener("timeupdate", function () {
                var duration = this.duration;
                var currentTime = this.currentTime;
                var percentage = (currentTime / duration) * 100;
                playhead.style.width = percentage + '%';
            });
        }
        updateInfo();
        audioElement.setAttribute('src', $('.active-song').attr('data-src'));
        audioElement.play();
    });

    $('.player__prev').click(function () {
        if ($('.player .player__albumImg.active-song').is(':first-child')) {
            $('.player__albumImg.active-song').removeClass('active-song');
            $('.player .player__albumImg:last-child').addClass('active-song');
            audioElement.addEventListener("timeupdate", function () {
                var duration = this.duration;
                var currentTime = this.currentTime;
                var percentage = (currentTime / duration) * 100;
                playhead.style.width = percentage + '%';
            });
        } else {
            $('.player__albumImg.active-song').removeClass('active-song').prev().addClass('active-song');
            audioElement.addEventListener("timeupdate", function () {
                var duration = this.duration;
                var currentTime = this.currentTime;
                var percentage = (currentTime / duration) * 100;
                playhead.style.width = percentage + '%';
            });
        }
        updateInfo();
        audioElement.setAttribute('src', $('.active-song').attr('data-src'));
        audioElement.play();
    });
  
    $('.player__timelineBar').click(function (ev) {
        var $div = $(ev.target);
        var $display = $div.find('.playhead');

        var offset = $div.offset();
        var x = ev.clientX - offset.left;

        var ratio = x / $(this).width();
        var duration = audioElement.duration;

        var newCurrentTime = ratio * duration;
        audioElement.currentTime = newCurrentTime;

    });  

});

SCSS

.icon {
    display: inline-block;
    width: 2em;
    height: 2em;
    font-size: 30px;
    fill: #D7DCE2;
    transition: all .2s ease-in-out;
}

html, body {
    height: 100%;
}

body {
    background: #000;
    position: relative;
}

.player {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &.play {
        .player__timeline {
            transform: translateY(-90%);
        }
        .player__album:after {
            box-shadow: 0px 30px 28px -10px rgba(0,0,0,.2);
        }
        .player__album {
            top: -65px;
        }
        .pause {
            display: inline-block;
        }
        .play {
            display: none;
        }
    }
    &__album {
        width: 112px;
        height: 112px;      
        border-radius: 50%;
        margin-right: 22px;
        position: relative;
        top: -50px;
        transition: all .4s ease-in-out;
        &:before {
            content: '';
            width: 25px;
            height: 25px;
            position: absolute;
            z-index: 3;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            border-radius: 50%;
        }
        &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            box-shadow: none;
            transition: all .3s ease-in-out;
        }
    }
    &__albumImg {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        z-index: 2;
        display: none;
        &.active-song {
            display: block;
        }
    }
    &__bar {
        background: #fff;
        padding: 10px 25px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        border-radius: 15px;
        box-shadow: 0 30px 56px 6px rgba(0,0,0,0.1);
        position: relative;
        z-index: 3;
    }
    &__controls {
        display: flex;
        align-items: center;
    }
    &__prev {
        transform: rotate(180deg);
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 15px;
        transition: all .2s ease-in-out;
        margin-right: 3px;
        &:hover {
            background: #D7DCE2;
            svg {
                fill: #fff;
            }
        }
    }
    &__play {
        cursor: pointer;
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        transition: all .2s ease-in-out;
        margin-right: 3px;      
        position: relative;
        &:hover {
            background: #D7DCE2;
            svg {
                fill: #fff;
            }
        }
        svg {
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            &.pause {
                display: none;
            }
        }
    }
    &__next {
        cursor: pointer;
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        transition: all .2s ease-in-out;
        margin-left: -8px;
        &:hover {
            background: #D7DCE2;
            svg {
                fill: #fff;
            }
        }
    }
    &__timeline {
        background: #FFF;;
        height: 95px;
        border-radius: 15px;
        position: absolute;
        bottom: 0;
        left: 10px;
        right: 10px;
        transform: translateY(0);
        transition: all .3s ease-in-out;
        z-index: 1;
        padding-left: 160px;
        flex-direction: column;
        justify-content: center;
    }
    &__timelineBar {
        background: #E7E7E7;
        width: 95%;
        height: 4px;
        border-radius: 15px;
        margin-top: 13px;
        position: relative;
    }
    #playhead {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 15px;
        width: 0;
        height: 100%;
        background: #fd6d94;
    }
    &__author {
        line-height: 1;
        font-weight: bold;
        margin-bottom: 6px;
        margin-top: 15px;
    }
    &__song {
        line-height: 1;
        margin: 0;
        font-size: 12px;
        color: #949494;
    }
}

Answer 1

持续时间和当前时间以秒为单位。

以您想要的格式显示它们只是做一些简单的计算的问题：

const formatTime = time => {
  const hours = Math.floor(time / 3600);
  const remainder = time % 3600;
  const minutes = Math.floor(remainder / 60);
  const seconds = Math.floor(remainder % 60);

  const hh = hours.toString().padStart(2, '0');
  const mm = minutes.toString().padStart(2, '0');
  const ss = seconds.toString().padStart(2, '0');

  return `${hh}:${mm}:${ss}`;
}

这是您更新后的工作代码笔： https://codepen.io/ptcc/pen/WNReqPx

HTML 自定义音频播放器 - 获取当前时间和总时间

HTML Custom Audio Player - Get Current Time and Total Time

jquery

html5-audio