HTML5 <audio> avec la lecture de fade in et fade out

Vieille question, mais si quelqu'un est à la recherche d'un vanilla JS façon de faire ce que je viens de mettre quelque chose en place pour le projet et j'ai pensé à la poster ici depuis ma recherche d'une solution en vain. Si vous travaillez déjà avec une vidéo ou un son élément, il ya une bonne chance que vous n'avez pas vraiment besoin d'utiliser jQuery pour le contrôle de l'objet, de toute façon.

function getSoundAndFadeAudio (audiosnippetId) {

    var sound = document.getElementById(audiosnippetId);

    //Set the point in playback that fadeout begins. This is for a 2 second fade out.
    var fadePoint = sound.duration - 2; 

    var fadeAudio = setInterval(function () {

        //Only fade if past the fade out point or not at zero already
        if ((sound.currentTime >= fadePoint) && (sound.volume != 0.0)) {
            sound.volume -= 0.1;
        }
        //When volume at zero stop all the intervalling
        if (sound.volume === 0.0) {
            clearInterval(fadeAudio);
        }
    }, 200);

}

Cette version ne permet pas pour l'édition de l'fadeout temps (2 secondes) mais vous pouvez assez facilement argumentize il. Entièrement generisize ce, de la logique supplémentaire serait nécessaire pour d'abord vérifier ce que le volume a été mis en place dans le but de connaître le facteur de fondu de sortie. Dans notre cas, nous prérégler le volume à 1 déjà pour le navigateur et le volume de contrôle est en dehors de la utilisateurs mains comme c'est pour un diaporama de chose donc il n'était pas nécessaire.

Pour se rendre à une partie spécifique de l'audio que vous voulez vérifier le seekable timerange et il suffit de régler le currentTime de façon aléatoire en fonction de ce qui est disponible.

Ici sont un couple de fonctions de fondu de sortie courant de la chanson et de fade-in nouvelle chanson.

HTML:

<audio loop autoplay="1" onPlay="audioVolumeIn(this);"><br>
    <source src="/test/new/imgs/audio_bg.ogg" type="audio/ogg; codecs=vorbis"><br>
    <source src="/test/new/imgs/audio_bg.wav" type="audio/wav"><br>
<source src="/test/new/imgs/audio_bg.mp3" type="audio/mpeg"><br>

Javascript:

    function audioVolumeIn(q){
       if(q.volume){
          var InT = 0;
          var setVolume = 0.2; //Target volume level for new song
          var speed = 0.005; //Rate of increase
          q.volume = InT;
          var eAudio = setInterval(function(){
              InT += speed;
              q.volume = InT.toFixed(1);
              if(InT.toFixed(1) >= setVolume){
                 clearInterval(eAudio);
                 //alert('clearInterval eAudio'+ InT.toFixed(1));
              };
          },50);
       };
   };

   function audioVolumeOut(q){
       if(q.volume){
          var InT = 0.4;
          var setVolume = 0;  //Target volume level for old song 
          var speed = 0.005;  //Rate of volume decrease
          q.volume = InT;
          var fAudio = setInterval(function(){
              InT -= speed;
              q.volume = InT.toFixed(1);
              if(InT.toFixed(1) <= setVolume){
                 clearInterval(fAudio);
                 //alert('clearInterval fAudio'+ InT.toFixed(1));
              };
          },50);
       };
   };