일시 중지 버튼을 클릭 할 때 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> 

내가 내 경우에는/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 : 당신이을로 오디오를 필요 .animate`

<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); 
}