Question

我开发了一个类似于SoundCloud的音频滑块（底部的滑块，允许你擦过轨道），除了一件事之外，一切都很完美。它在前一个播放曲目的宽度[/时间]和当前播放曲目之间来回闪烁。

我不知道为什么会发生这种情况，并且已经被遗忘了很长一段时间。

这是我目前的 JavaScript ＆amp;的的jQuery ：

function trackToSlider(wave){
    // get the duration of current playing song
    var waveDuration = wave.getDuration(); 

    // check every 0.1s how far in the song is
    var getWidthAndMax = setInterval(function(){
        // currentWidth is the current percentage of the width of the slider from 100%
        var currentWidth = (wave.getCurrentTime() / waveDuration) * 100;

        makeSliderIncrease(currentWidth, waveDuration);
    }, 100);

    function makeSliderIncrease(currentWidth, maxWidth){
        // if the current time is more than or equal to the songs duration, set the width of the slider to 100% and clear the interval 
        if(currentWidth >= maxWidth){
            clearInterval(getWidthAndMax);
            $('#inner-slider').css('width', '100%');
        // otherwise set the width percentage equal to currentwidth
        } else {
            $('#inner-slider').css('width', currentWidth + '%');
        }
    }
}

以下是 HTML 中的相对元素：

<!-- play or pause track button !-->
<div onclick="trackToSlider(wave);"></div>

<!-- the audio slider which keeps on flickering !-->
<div class="audio-slider-container">
    <div id="outer-slider">
        <div id="inner-slider"></div>
    </div>
</div>

我希望你们都能理解我目前所处的位置。我试图对所有内容进行评论，以便更容易理解。

我觉得问题是，因为它已经设置了一个宽度，在它移动到下一个轨道之前，当新轨道尝试设置新宽度时，它会在两个宽度之间轻弹一直，但我可能是错的。

感谢所有帮助或建议，

感谢。的： - ）

Answer 1

我认为你的每个音轨都使用相同的div。我的假设是你的clearInterval函数重置wave的currentWidth，并使它返回0调用tracktoSlider两次。但根据给定的代码我可以说的全部内容。尝试在每次开始新曲目时向html添加＃inner-slider，并在每次曲目结束时将其删除

div的宽度在先前的宽度和当前宽度之间闪烁

1 个答案: