Воспроизведение HTML5 <audio> с постепенным исчезновением и постепенным исчезновением

Ответ 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;
}

Ответ 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 уже, а контроль громкости браузера выходит за пределы рук пользователей, так как он предназначен для слайд-шоу, поэтому он не нужен.

Чтобы перейти к определенной части аудио, которую вы хотите проверить таймер поиска, и просто установите текущее время в случайном порядке на основе доступных.

Ответ 3

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

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

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

Ответ 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);
       };
   };

Ответ 5

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

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

    }
}