淡出音频后淡入

Question

淡出音频后淡入

3

在我的程序中，开始界面有背景音乐。这个功能是在点击开始按钮后逐渐将背景声音淡出。

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

我已经添加了一个重新开始按钮，它会带你回到起始页面，所以我需要将音乐以相同速度淡入。我尝试了几种方法但它们都不起作用，请问有人能帮我吗？

我需要的是以下类似的东西：

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

- Milo-J

获取当前音量。设置一个表示你已经淡出的标志。反转你已经有的东西。如果音量大约为0并且你已经淡出，就淡入回来。 - Paul S.

请在处理重新启动按钮和淡入音乐方面添加您尝试过的内容。 - Ravi Y

@PaulS.：就像我在问题中尝试的那样？ - Milo-J

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul S. · Answer 1

可能有更好的方法来实现这个，但我只是写了一个音量淡入淡出器来更加熟悉<audio>。

要在你的<audio>上启用它，请使用enableFader(yourAudioNode)，然后要淡出调用yourAudioNode.fadeOut()，或者要淡入调用yourAudioNode.fadeIn()。
它基于监听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);
    };
}

我在Google Chrome的开发者控制台上测试了它，使用这个页面。

var a = document.getElementById('song');
enableFader(a);
a.fadeOut();
// a.fadeIn();