Question

我在javascript中的音频和进度栏跟踪方面遇到问题。我正在使用p5.js。

进度条跟踪播放音乐的持续时间，但在暂停时重置为0，在再次播放时恢复为当前时间。

HTML不存在，不需要，css也是如此。

JS依赖项是p5.js，p5.dom.js和p5.sound.js

function draw() {
//this function is called once every frame (once every 1/60 seconds)
//other stuff that has no relation to this problem
musicDuration();
}

//global variables
var music = loadSound(music.mp3);
var currentTimePause = [];

function musicDuration() {
    var currentTimePerc = (music.currentTime() / music.duration()) * width;

// text giving current music time / duration
    strokeWeight(0);
    fill(0, 100, 100);
    textSize(14);
    text(leadingZeroTime(floor(music.currentTime() / 60)) + ':' + leadingZeroTime(floor(music.currentTime() % 60)) + ' / ' + leadingZeroTime(floor(music.duration() / 60)) + ':' + leadingZeroTime(floor(music.duration() % 60)), repairTimerPosition(currentTimePerc - 43), 25, 86);

    //drawing music duration bar
    noStroke();
    fill(190, 70, 70);
    rect(0, 0, width, 10);

     // check if music is playing and return array containing current song position
    if (music.isPlaying()) {
        for (i = 0; i < music.currentTime(); i++) {
            currentTimePause[i] = currentTimePerc;
            console.log(currentTimePause[currentTimePause.length - 1]);
            // filling progress bar along the music.curentTime
            fill(0, 85, 85);
            rect(0, 0, currentTimePerc, 10);
        }
    }
    //if music is paused only draw rectangle second to last value in array, because last is 0. And stop updating array
    else if (music.isPaused()) {
        fill(0, 85, 85);
        rect(0, 0, currentTimePause[currentTimePause.length - 1], 10);
        currentTimePause.length = 0;
        console.log(currentTimePause[currentTimePause.length - 1]);
    } 
}

music.currentTime()-以秒为单位返回歌曲的当前时间。 music.duration()-以秒为单位返回歌曲的持续时间。

我尝试在绘制条形后重置数组，并在绘制条形后将其长度设置为0，但该值返回0。我之所以仍在重置它的假设是，因为它在每一帧都被调用，所以也许函数以正确的长度绘制了条形图，但返回到0或未定义第二帧。

暂停时的javascript进度条长度

0 个答案: