jQueryでsetInterval後にオーディオ要素のボリュームがリセットされない

Question

以下のコードは、（ユーザーが選択したさまざまなピッチの）オーディオ要素をランダムに選択して再生します。私はフェードオプションに取り組んでいます。ユーザーはID（fade.value）によって渡されるフェードタイムを秒単位で指定します。

実際には2つの問題があります。 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

2番目の質問では、オーディオが再生を開始するときにアニメーションが実行されています。 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++; 
    }; 
};