Comment avoir fondu / sortie sur l'audio HTML5

Je crée une musique de fond simple qui n'a qu'un seul bouton pour jouer et arrêter la musique. Mais j'aimerais ajouter un fondu. Mais ça ne marche pas.

Mon code:

var beepTwo = $("#musicBeat")[0]; beepTwo.play(); $("#dan").click(function() { if (beepTwo.paused == false) { beepTwo.pause(); } else { beepTwo.play(); } }); $beepTwo.animate({volume: newVolume}, 1000);

JSFiddle

J'ai trouvé $audio.animate({volume: newVolume}, 1000); Dans un autre post mais ne fonctionne pas pour moi ou peut-être que je ne l'ai pas utilisé correctement. Quoi qu'il en soit, je veux avoir un fondu et disparaître lorsque le bouton est pressé. Donc, il joue avec fadeIn et s'arrête avec fadeOut. Comment puis je faire ça?

Vous devez surveiller la différence entre HTMLAudioElement ( $('#musicBeat')[0] ) et l'objet jQuery ( $('#musicBeat') ).

play est une méthode de HTMLAudioElement, donc vous devrez l'accéder à ce sujet (comme vous l'avez fait), mais .animate est une méthode jQuery et ne peut être appelée qu'un objet jQuery.

Et vous devez spécifier newVolume (ne peut pas le laisser vide).

 var beepTwo = $("#musicBeat"); beepTwo[0].play(); $("#dan").click(function() { if (beepTwo[0].paused == false) { beepTwo.animate({volume: 0}, 2000, 'swing', function() { // really stop the music beepTwo[0].pause(); }); } else { beepTwo[0].play(); beepTwo.animate({volume: 1}, 2000); } });