Воспроизведение HTML5 ‹аудио› с нарастанием и затуханием

Путь jQuery...

$audio.animate({volume: newVolume}, 1000);

Редактировать: где $audio — аудиоэлемент, заключенный в jQuery, а newVolume — двойное значение между 0 и 1.

Редактировать: эффективная громкость мультимедиа элемента — это громкость, интерпретируемая относительно диапазона от 0,0 до 1,0, где 0,0 — это тишина, а 1,0 — самая громкая настройка, промежуточные значения увеличивают громкость. Диапазон не обязательно должен быть линейным. http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#efficient-media-volume

Редактировать: люди публикуют ванильные реализации JavaScript, поэтому я опубликую ванильный TypeScript, который сохраняет анимацию колебания jQuery (просто удалите информацию о типе, если вы хотите запустить это в JavaScript). Отказ от ответственности, это полностью не проверено:

export async function adjustVolume(
    element: HTMLMediaElement,
    newVolume: number,
    {
        duration = 1000,
        easing = swing,
        interval = 13,
    }: {
        duration?: number,
        easing?: typeof swing,
        interval?: number,
    } = {},
): Promise<void> {
    const originalVolume = element.volume;
    const delta = newVolume - originalVolume;

    if (!delta || !duration || !easing || !interval) {
        element.volume = newVolume;
        return Promise.resolve();
    }

    const ticks = Math.floor(duration / interval);
    let tick = 1;

    return new Promise(resolve => {
        const timer = setInterval(() => {
            element.volume = originalVolume + (
                easing(tick / ticks) * delta
            );

            if (++tick === ticks + 1) {
                clearInterval(timer);
                resolve();
            }
        }, interval);
    });
}

export function swing(p: number) {
    return 0.5 - Math.cos(p * Math.PI) / 2;
}

Старый вопрос, но если кто-то ищет ванильный JS-способ сделать это, я просто написал кое-что для проекта и подумал, что опубликую его здесь, так как мои поиски решения были напрасными. Если вы уже работаете с видео- или аудиоэлементом, есть большая вероятность, что вам все равно не нужно использовать jQuery для управления объектом.

function getSoundAndFadeAudio (audiosnippetId) {

    var sound = document.getElementById(audiosnippetId);

    // Set the point in playback that fadeout begins. This is for a 2 second fade out.
    var fadePoint = sound.duration - 2; 

    var fadeAudio = setInterval(function () {

        // Only fade if past the fade out point or not at zero already
        if ((sound.currentTime >= fadePoint) && (sound.volume != 0.0)) {
            sound.volume -= 0.1;
        }
        // When volume at zero stop all the intervalling
        if (sound.volume === 0.0) {
            clearInterval(fadeAudio);
        }
    }, 200);

}

Эта версия не позволяет редактировать время затухания (установлено на 2 секунды), но вы можете довольно легко аргументировать это. Чтобы полностью обобщить это, потребуется дополнительная логика, чтобы также сначала проверить, какая громкость была установлена, чтобы узнать фактор, с помощью которого она исчезнет. В нашем случае мы уже установили громкость на 1, а регулятор громкости в браузере не находится в руках пользователей, поскольку он предназначен для слайд-шоу, поэтому в нем не было необходимости.

Чтобы перейти к определенной части аудио, вам нужно проверить доступный временной диапазон и просто установить currentTime случайным образом в зависимости от того, что доступно.

Я создал для этого простую библиотеку, используя setTimeout().

Исходный код доступен здесь:

https://github.com/miohtama/Krusovice/blob/master/src/tools/fade.js

Вот несколько функций для затухания текущей песни и появления новой песни.

HTML:

<audio loop autoplay="1" onPlay="audioVolumeIn(this);"><br>
    <source src="/test/new/imgs/audio_bg.ogg" type="audio/ogg; codecs=vorbis"><br>
    <source src="/test/new/imgs/audio_bg.wav" type="audio/wav"><br>
<source src="/test/new/imgs/audio_bg.mp3" type="audio/mpeg"><br>

Javascript:

    function audioVolumeIn(q){
       if(q.volume){
          var InT = 0;
          var setVolume = 0.2; // Target volume level for new song
          var speed = 0.005; // Rate of increase
          q.volume = InT;
          var eAudio = setInterval(function(){
              InT += speed;
              q.volume = InT.toFixed(1);
              if(InT.toFixed(1) >= setVolume){
                 clearInterval(eAudio);
                 //alert('clearInterval eAudio'+ InT.toFixed(1));
              };
          },50);
       };
   };

   function audioVolumeOut(q){
       if(q.volume){
          var InT = 0.4;
          var setVolume = 0;  // Target volume level for old song 
          var speed = 0.005;  // Rate of volume decrease
          q.volume = InT;
          var fAudio = setInterval(function(){
              InT -= speed;
              q.volume = InT.toFixed(1);
              if(InT.toFixed(1) <= setVolume){
                 clearInterval(fAudio);
                 //alert('clearInterval fAudio'+ InT.toFixed(1));
              };
          },50);
       };
   };

Это простая функция тайм-аута для затухания звука (в данном случае от 0 до 100). Он использует глобальную переменную. Тем не менее, все еще борюсь со всем пакетом. Я обязательно проверю способ jQuery от sfjedi.

function FadeIn() {

    var sound = document.getElementById('audiosnippet');

    var vol = $.global.volume;

    if ( vol < 100 )
        {
            sound.volume = (vol / 100);
            $.global.volume = $.global.volume + 10;
            setInterval(function() { FadeIn() }, 1200);
        }

    }
}