javascript - 使用jQuery setInterval后音频元素音量未重置

Question

下面的代码随机选择并播放(由用户选择的)不同音高的音频元素。我正在研究淡入淡出选项；用户指定以秒为单位的淡入时间，该淡入时间由ID(fade.value)传递。

我实际上有两个问题:
A)在第一次迭代中，音频元素在开始播放之前就开始褪色。
B)重复调用同一元素时，如果淡入时间长于重复时间，则无法正确重置音量(这是tone.volume=1的预期点)，但会“保持下降”。

function pickAndPlay(pitchSet, saturation){
    var pitchCheck = rand(1,100);
    if (pitchCheck <= saturation){
        fyshuffle (pitchSet); // the Fischer-Yates shuffle
        var tone = document.getElementById(pitchSet[0]);
        tone.currentTime = 0;
        tone.volume = 1;
        tone.play();
        if(fadeTime.value>0){
            $(tone).animate({volume: 0}, fadeTime.value*1000);

        };
        document.getElementById("noteName").value=pitchSet[0];
        console.log(iteration);
        iteration++;
        console.log("tone.volume:"+tone.volume);
    };
};
function nextThing(millis,pitchSet,saturation){  
    if(iteration==0){pickAndPlay(pitchSet,saturation)};
    return setInterval(pickAndPlay,millis,pitchSet,saturation);  // this needs `return`: https://stackoverflow.com/questions/44609995/settimeout-recursion-javascript
};

感谢您提供任何有关解决这些问题的建议或引用。

Answer 1

对于第二个问题，当音频再次开始播放时，动画仍在运行。只需使用jQuery stop方法:

function pickAndPlay(pitchSet, saturation){
    var pitchCheck = rand(1,100);
    if (pitchCheck <= saturation){
        fyshuffle (pitchSet);
        var tone = document.getElementById(pitchSet[0]);
        tone.currentTime = 0;
        $(tone).stop();
        tone.volume = 1;
        tone.play();
        if(fadeTime.value>0){
            $(tone).animate({volume: 0}, fadeTime.value*1000); console.log(fadeTime.value);
        };
        document.getElementById("noteName").value=pitchSet[0];
        iteration++;
    };
};