Плавный 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.

Но что делать, если я в данный момент играю Sound1 на 0.75 громкости, и я хочу в конечном итоге играть Sound2 на той же громкости после кроссфейда.

Как вычислить правильный диапазон для x? С чего начать и где прекратить цикл?

1 3
javascript html html5 html5-audio

1 ответ:

Вы должны умножить вычисленный выигрыш: 

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