Как сделать плавный audio fadeIn и fadeout на JS?
 

Здравствуйте. Нужно сделать fadeIn и fadeout музыки. На jQ есть отличный метод animate, который умеет это делать плавно и очень удобный:

https://codepen.io/CryNet/pen/VwKprLG

Есть что-то похожее на JS? Нужно добиться такого же функционала, но на JS (проект на React). Может вы видели портированный метод animate из jQ на числом JS? Аналогичный метод на JS не умеет в музыку

https://learn.javascript.ru/js-anima...tura-animatsii

Спасибо. Пробую. Правда пока не очень получается :)

???

Ну, вроде получилось:

https://drive.google.com/drive/folde...sW?usp=sharing

CryNet,
нет смысла изменять плавность анимации в данном случае

timing: function(timeFraction) {
        return Math.pow(timeFraction, 2);
      },

можно просто

timing: function(timeFraction) {
        return timeFraction
      },

Спасибо. Правда я пока не сильно понимю как сделать fadeOut, то есть наоборот - уменьшать громкость

Разобрался:

function animate(options) {

var start = performance.now();

requestAnimationFrame(function animate(time) {

// timeFraction от 0 до 1
var timeFraction = (time - start) / options.duration;
if (timeFraction > 1) timeFraction = 1;



// текущее состояние анимации
var progress = 1 - options.timing(timeFraction)

console.log(progress)

options.draw(progress);

if (timeFraction < 1) {
requestAnimationFrame(animate);
}

});
}

не надо так делать! есть функция draw в ней и меняйте

draw: function(progress) {
        console.log(progress);
        audio.volume =  1 - progress;
      }

Спасибо. Так даже лучше :)