时间戳

首页 > 解决方案 > 如何使用 JavaScript 为音频播放器实现快进功能

javascript - 如何使用 JavaScript 为音频播放器实现快进功能

问题描述

我正在尝试在我的应用程序中实现快进。我在快进按钮上添加了一个事件监听器，它将音频剪辑的当前时间增加了 10 秒。问题是，它仅适用于第一次单击快进按钮。

我正在使用timeupdate事件在屏幕上显示音频的当前时间，但每次单击按钮时我都需要将时间增加十秒。我错过了什么？这是音轨上的事件监听器，用于显示转发时间

function forwardTenSecs (audio_track){
    audio_track.addEventListener('timeupdate', () => {
            const currentTime = Math.floor(audio_track.currentTime);
            const duration = Math.floor(audio_track.duration);
            track_time.innerText = `${plusTenSecs(currentTime)} / ${format_time(duration)}`;
    }, false);
}

这是我用来格式化音频当前时间并添加十秒的函数。

function plusTenSecs(time){
    let sec = Math.floor(time) + parseInt(10);
    let min = Math.floor( sec / 60 );
    if (min < 10) {
        min = '0' + min;
    }
    sec = Math.floor( sec % 60 );
    if (sec < 10) {
        sec = '0' + sec;
    }
    return min + ":"+ sec;
}

这个想法是每次我单击前进按钮时，该plusTenSecs功能都应该运行，这反过来应该使forwardTenSecs功能运行。

我错过了什么？

标签： javascript

解决方案

// Add eventListener to the fast-forward button
const btn = document.getElementById("btn").addEventListener('click', fastForward)

// add current time to 10 seconds in every click
function fastForward() {
    audio_track.currentTime += 10;
}

您可以在此处尝试演示：https ://jsfiddle.net/mu8cz7f4/ 演示音频只有 1-2 秒，所以我设置每次点击只需添加 0.1 秒

推荐阅读