javascript - 淡入淡出 HTML5 音频逻辑

我正在尝试交叉淡化 HTML5 音频(不是 webaudio)并使用等功率交叉淡化曲线:

var gain1 = Math.cos(x * 0.5 * Math.PI);
var gain2 = Math.cos((1.0 - x) * 0.5 * Math.PI);

但是我对此有一些逻辑问题。

假设我有两个声音实例 Sound1 和 Sound2，它们都具有相同的来源。

如果 Sound1 以全音量( 1.00 )播放，并且我想在交叉淡入淡出后最终以全音量播放 Sound2，则它们很容易交叉淡化。我只需要将 x 的值从 0 循环到 100 并将 gain1 设置为 Sound1 的音量并将 gain2 设置为 Sound2 的音量。

但是，如果我目前正在以 0.75 音量播放 Sound1，并且我想在淡入淡出后以相同的音量播放 Sound2，该怎么办？

如何计算 x 的正确范围？ 从哪里开始，从哪里停止循环？

最佳答案

您必须乘以计算的增益:

var original_gain1 = 1.0;
var original_gain2 = 0.75;

var final_gain1 = original_gain1 * Math.cos(x * 0.5 * Math.PI);
var final_gain2 = original_gain2 * Math.cos((1.0 - x) * 0.5 * Math.PI);

一个简单的交叉淡入淡出需要一个异步循环。使用以下代码，您可以启动循环以将 x 从 0 增加到 1，然后返回。这些函数将在每个循环中调用 updateGains。

var x = 0;

var crossfade_speed = 0.05;

function crossfadeTo1()
{
    // if we havent reached 1.0
    if ( x<1.0 )
    {
        // increase x
        x += crossfade_speed;

        // continue the asynchronous loop after 200ms (it will update volumes 5 times a second)
        setTimeout( crossfadeTo1, 200 );
    }
    else
    {
        // set x the maximum ( we can go over 1.0 in the loop )
        x = 1.0;

        // we dont call the function again, so the loop stops
    }

    // call your function with x to update gains
    updateGains( x );
}

function crossfadeTo0()
{
    // if we havent reached 0.0
    if ( x>0.0 )
    {
        // decrease x
        x -= crossfade_speed;

        // continue the asynchronous loop after 200ms (it will update volumes 5 times a second)
        setTimeout( crossfadeTo0, 200 );
    }
    else
    {
        // set x the minimum ( we can go under 0.0 in the loop )
        x = 0.0;

        // we dont call the function again, so the loop stops
    }

    // call your function with x to update gains
    updateGains( x );
}

关于javascript - 淡入淡出 HTML5 音频逻辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32155105/