单击时逐渐关闭音频

Question

我有一首自动播放的引擎歌曲，我希望当我点击我的按钮时声音会关闭 "progressively" 以获得流畅的音量减小并以 0.1 或 0.2 的音量结束，某人有想法吗？这是我的实际代码：

<audio autoplay>
   <source src="../audio/2445.mp3">
</audio>

<button>turn off</button>

Answer 1

不确定这样做是否正确，您可以这样做：

<audio autoplay id='aud'>
   <source src='http://upload.wikimedia.org/wikipedia/commons/5/5b/Ludwig_van_Beethoven_-_Symphonie_5_c-moll_-_1._Allegro_con_brio.ogg'>
</audio>

<button id='btn'>turn off</button>

JS:

var audio = document.getElementById('aud'), interval;
document.getElementById('btn').onclick = turnOff;
function turnOff(){
    if(audio && !audio.paused){
        interval = setInterval(function(){
            console.log('audio volume: ', audio.volume);
            if(!audio || audio.paused || audio.volume < 0.1){
                clearInterval(interval);
            }else{
                audio.volume -= .05; // change this value as per your liking
            }
        }, 200); // change this value as per your liking
    }
}

我想更好的方法是 web-audio。

单击时逐渐关闭音频

turn off audio progressively on click

javascript

html

audio

volume

Fiddle Demo