[英]Jquery - fade in audio after fading out
In my program I have background music on the start screen. 在我的程序中,我在开始屏幕上有背景音乐。 This function is to fade my back ground sound out once the start button is clicked. 此功能用于在单击开始按钮后淡出背景声音。
$(bgMusic).on('timeupdate', function () {
var vol = 1,
interval = 250;
if (bgMusic.volume == 1) {
var intervalID = setInterval(function () {
if (vol > 0) {
vol -= 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
}, interval);
}
});
I have now added a restart button which takes you back to the start screen so I need to fade the music back in at the same speed. 我现在添加了一个重启按钮,它会将您带回到开始屏幕,因此我需要以相同的速度将音乐淡入淡出。 I have tried a few things but they don't work, can someone help me? 我尝试过一些东西,但是它们不起作用,有人可以帮助我吗?
I need something along these lines: 我需要这些方面的东西:
$(bgMusic).off('timeupdate', function () {
var vol = 0,
interval = 250;
if (bgMusic.volume == 0) {
var intervalID = setInterval(function () {
if (vol < 0) {
vol += 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
}, interval);
}
});
There are probably better ways to do this, but I just wrote a volume fader to get more accustomed to <audio>
. 可能有更好的方法来做到这一点,但我只是写了一个音量推子来更习惯<audio>
。
To enable it on your <audio>
by enableFader(yourAudioNode)
, then to fade out call yourAudioNode.fadeOut()
, or to fade in call yourAudioNode.fadeIn()
. 要通过enableFader(yourAudioNode)
在<audio>
上启用它,然后淡出调用yourAudioNode.fadeOut()
,或者淡入调用yourAudioNode.fadeIn()
。
It is based around listening for timeupdate so unless you specify a slower rate, it will change the volume at the frequency explained here . 它基于监听timeupdate,因此除非您指定较慢的速率,否则它将以此处说明的频率更改音量。
function enableFader(node, per_step, min_interval) {
'use strict';
var fadeOut, fadeIn;
node.fadeSettings = {
dir : 0,
step : per_step || 0.05,
interval : min_interval || 0.150,
lastTime : -Infinity
};
fadeOut = function fadeOut() {
var vol = this.volume,
settings = this.fadeSettings,
ctime = this.currentTime,
dtime = Math.abs(ctime - settings.lastTime);
if (settings.dir === -1 && dtime >= settings.interval && vol > 0) {
settings.lastTime = ctime;
this.volume = (vol - settings.step).toFixed(2);
} else if (vol <= 0 || settings.dir !== -1) {
this.removeEventListener('timeupdate', fadeOut);
settings.dir = 0;
}
};
fadeIn = function fadeIn() {
var vol = this.volume,
settings = this.fadeSettings,
ctime = this.currentTime,
dtime = Math.abs(ctime - settings.lastTime);
if (settings.dir === 1 && dtime >= settings.interval && vol < 1) {
settings.lastTime = ctime;
this.volume = (vol + settings.step).toFixed(2);
} else if (vol >= 1 || settings.dir !== 1) {
this.removeEventListener('timeupdate', fadeIn);
settings.dir = 0;
}
};
node.fadeOut = function () {
this.fadeSettings.dir = -1;
this.addEventListener('timeupdate', fadeOut, false);
};
node.fadeIn = function () {
this.fadeSettings.dir = 1;
this.addEventListener('timeupdate', fadeIn, false);
};
}
I tested it on this page using my dev console in Google Chrome. 我使用谷歌浏览器中的开发控制台在此页面上测试了它。
var a = document.getElementById('song');
enableFader(a);
a.fadeOut();
// a.fadeIn();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.