如何在音频HTML5上淡入/淡出 [英] how to have fade in/out on audio HTML5

问题描述

我正在制作一个简单的背景音乐，只有一个按钮可以播放和停止音乐。但我想补充淡化。但是不起作用。

I am creating a simple background music which has only one button to play and stop the music. But I would like to add fade to it. But does not work.

我的代码：

var beepTwo = $("#musicBeat")[0];
beepTwo.play();



$("#dan").click(function() {
  if (beepTwo.paused == false) {
      beepTwo.pause();

  } else {
      beepTwo.play();
  }
});


$beepTwo.animate({volume: newVolume}, 1000);

JSFiddle

我找到了 $ audio.animate（{volume：newVolume}，1000 ）; 在另一篇文章中，但对我不起作用，或者我没有正确使用它。无论如何，我想按下按钮时淡入淡出并淡出。所以它用fadeIn播放并用fadeOut停止。我该怎么做？

I found $audio.animate({volume: newVolume}, 1000);in another post but does not work for me or maybe I didnt use it correctly. Anyway I want to have a fade in and fade out when the button is pressed. So it plays with fadeIn and stops with fadeOut. How can I do that?

推荐答案

你必须注意HTMLAudioElement（ $）之间的区别（'#musicBeat'）[0] ）和jQuery对象（ $（'＃musicBeat'））。

You have to watch out for the difference between the HTMLAudioElement ($('#musicBeat')[0]) and the jQuery Object ($('#musicBeat')).

play 是HTMLAudioElement的一个方法，所以你必须通过它访问它（就像你一样），但是 .animate 是一个jQuery方法，只能在jQuery对象上调用。

play is a method of the HTMLAudioElement, so you'll have to access it over that (as you did), but .animate is a jQuery method and can only be called on a jQuery object.

你必须指定newVolume（可以'把它留空）。

And you have to specify newVolume (can't leave it empty).

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

这篇关于如何在音频HTML5上淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！