单击暂停按钮时的fadeOut（）声音

Question

单击暂停按钮时如何使声音淡出？

<script> 
var sounds = [ 
    "sounds/royksopp.mp3", 
    "sounds/9thwonder.mp3", 
    "sounds/thisbeat.mp3", 
    "sounds/mosdef.mp3", 
    "sounds/bewater.mp3", 
    "sounds/boutdre.mp3", 
    "sounds/masterflash.mp3", 
    "sounds/2ep.mp3", 
    "sounds/drewestcoast.mp3", 
    "sounds/poetry.mp3", 
    "sounds/mfdoom.mp3", 
    "sounds/oizo.mp3", 
]; 

function StartOrStop(audioFile) { 
    srcAudio = sounds[Math.floor(Math.random() * sounds.length)]; 
    var audie = document.getElementById("myAudio"); 
    audie.addEventListener('ended', function() { 
     this.currentTime = 0; 
     this.play(); 
    }, false); 

    if (audie.paused == false) { 
     audie.pause(); 
    } else { 
     audie.src = srcAudio; 
     audie.play(); 
    } 
} 
</script> 

然后，我把它叫做：

<audio id="myAudio"></audio> 

<button id="idj-play-button" onclick="StartOrStop()" class="btn btn-lg"><i class="glyphicon glyphicon-play"></i> 
</button> 

<button id="idj-pause-button" onclick="StartOrStop()" class="btn btn-lg hide"><i class="glyphicon glyphicon-refresh"></i> 
</button> 

我需要改变我的if/else语句audie.pause()什么？我试过audie.animate({volume: 0}, 1000);，但没有奏效。

谢谢。

Answer 1

试试这个：

<script> 
    var sounds = [ 
     "sounds/royksopp.mp3", 
     "sounds/9thwonder.mp3", 
     "sounds/thisbeat.mp3", 
     "sounds/mosdef.mp3", 
      "sounds/bewater.mp3", 
      "sounds/boutdre.mp3", 
      "sounds/masterflash.mp3", 
      "sounds/2ep.mp3", 
     "sounds/drewestcoast.mp3", 
      "sounds/poetry.mp3", 
      "sounds/mfdoom.mp3", 
     "sounds/dreams.mp3", 
     "sounds/oizo.mp3", ]; 

    function Start(audioFile) { 
     srcAudio = sounds[Math.floor(Math.random()*sounds.length)]; 
     var audie = document.getElementById("myAudio"); 
     audie.addEventListener('ended', function() { 
     this.currentTime = 0; 
     this.play(); 
     }, false); 

       $(audie).animate({volume: 0.9}, 0); 
       audie.src = srcAudio; 
       audie.play(); 

      } 

    function Stop(audioFile) { 
     var audie = document.getElementById("myAudio"); 

       $(audie).animate({volume: 0}, 400); 

      } 
</script> 

HTML：

<audio id="myAudio"></audio> 

<button id="idj-play-button" onclick="Start()" class="btn btn-lg"><i class="glyphicon glyphicon-play"></i> 
</button> 

<button id="idj-pause-button" onclick="Stop()" class="btn btn-lg hide"><i class="glyphicon glyphicon-refresh"></i> 
</button> 

Answer 2

audie.animate({volume: 0}, 1000);只有当你有jQuery时才能工作。

你可以做这样的修改：

if (audie.paused == false) { 
    let interval = setInterval(() => { 
     if (audie.volume == 0) { 
      audie.pause(); 
      clearInterval(interval); 
     } 
     audie.volume -= 0.05; 
    }, 800); 
}