Воспроизведение HTML5 с fade in и fade out

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

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

26
audio html5 javascript volume

5 ответов

путь jQuery...

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

Edit: где $audio-это jQuery-обернутый аудиоэлемент, а newVolume-двойной между 0 и 1.

Edit: эффективный объем мультимедиа элемента-это объем, интерпретируемый относительно диапазона от 0.0 до 1.0, при этом 0.0 молчит, а 1.0-самая громкая настройка, значения между увеличением громкости. Диапазон не обязательно должен быть линейным. http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#effective-media-volume

86

старый вопрос, но если кто-то ищет способ vanilla 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 секунды), но вы могли бы довольно легко argumentize его. Полностью обобщая это, потребуется дополнительная логика, чтобы также сначала проверить, на что был установлен объем, чтобы узнать фактор, с помощью которого он исчезнет. В нашем случае мы уже настроили громкость на 1, а регулятор громкости браузера вышел из рук пользователей, так как он предназначен для слайд-шоу, поэтому он не нужен.

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

17

Я создал для этого простой lib с помощью setTimeout ().

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

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

3

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

    }
}
0

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

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