如果 body 有 class 淡入 mp3 声音，否则淡出

Question

如果 body 有 class 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);
}

如果 body 有 class 淡入 mp3 声音，否则淡出

if body has class Fade in mp3 sound else fade out

javascript

jquery

html5-audio

jquery-animate