HTML5 <audio>воспроизведение с постепенным увеличением и уменьшением

Question

Я бы хотел начать и остановить воспроизведение HTML5 в произвольной позиции с периодами постепенного появления и исчезновения, чтобы сгладить впечатление от прослушивания.

Какие механизмы существуют для этого? Вручную увеличить громкость с помощью setTimeout ()?

Answer 1

Способ 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#effective-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,
    } = {},
) {
    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<void>((resolve) => {
        const timer = setInterval(() => {
            element.volume = originalVolume + (
                easing(tick / ticks) * delta
            );
            if (++tick === ticks) {
                clearInterval(timer);
                resolve();
            }
        }, interval);
    });
}

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

Answer 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 случайным образом в зависимости от того, что доступно.

Answer 3

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

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

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

Answer 4

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

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

Answer 5

Это простая функция тайм-аута для затухания звука (в данном случае от 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);
        }

    }
}