ボディにクラスmp3のサウンドが残っている場合フェードアウト

Question

ボディにクラスfp-viewing-0がある場合、mp3の音量を1にフェードインしようとしています これはどのように動作しないのですか？どうすればこの問題を解決できますか？

コード：

var audio0 = document.getElementById('audio-0'); 
audio0.volume = 0; 

setInterval(function(){ 
      if ($("body").hasClass("fp-viewing-0")) { 
      audio0.animate({volume: 1}, 1000); 
      } 

else { 
    audio0.animate({volume: 0}, 1000); 
      } 

}, 100); 

HTML

<audio id="audio-0" src="1.mp3" autoplay="autoplay"></audio> 

私も試してみた：

$("#audio-0").prop("volume", 0); 


setInterval(function(){ 
      if ($("body").hasClass("fp-viewing-0")) { 
      $("#audio-0").animate({volume: 1}, 3000); 
      } 

else { 
    $("#audio-0").animate({volume: 0}, 3000); 
      } 

}, 100); 

よろしく！

Answer 1

jqueryのアニメーション部分を手作業で作成したフェードに変更しました。そのために、私はフェードタイムを作成し、フェード効果を操作するステップ数を計算します。それは組織化されますように、より良い

var audio0 = document.getElementById('audio-0'); 
audio0.volume = 0; 

if ($("body").hasClass("fp-viewing-0")) { 
    audio0.volume = 1; //max volume 
    var fadeTime = 1500; //in milliseconds 
    var steps = 150; //increasing makes the fade smoother 
    var stepTime = fadeTime/steps; 
    var audioDecrement = audio0.volume/steps; 

    var timer = setInterval(function(){ 
     audio0.volume -= audioDecrement; //fading out 

     if (audio0.volume <= 0.03){ //if its already inaudible stop it 
       audio0.volume = 0; 
       clearInterval(timer); //clearing the timer so that it doesn't keep getting called 
     } 
    }, stepTime); 
} 

はそれに応じてこれらの値フェードを受け取る関数の中でこのすべてを置くために、次のようになります。

多くは、よりコンパクトで読みやすいあなたのコードになるだろう

function fadeAudio(audio, fadeTime, steps){ 
    audio.volume = 1; //max 
    steps = steps || 150; //turning steps into an optional parameter that defaults to 150 
    var stepTime = fadeTime/steps; 
    var audioDecrement = audio.volume/steps; 

    var timer = setInterval(function(){ 
     audio.volume -= audioDecrement; 

     if (audio.volume <= 0.03){ //if its already inaudible stop it 
      audio.volume = 0; 
      clearInterval(timer); 
     } 
    }, stepTime); 
} 

：

var audio0 = document.getElementById('audio-0'); 
audio0.volume = 0; 
if ($("body").hasClass("fp-viewing-0")) { 
    fadeAudio(audio0, 1500); 
}