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

[CryNet]

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

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

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

[рони]

animate из jQ на числом JS?

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

[CryNet]

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

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

[рони]

Правда пока не очень получается

???

[CryNet]

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
      },

[CryNet]

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

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

[CryNet]

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

Разобрался:

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

});
}

[рони]

var progress = 1 - options.timing(timeFraction)

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

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

[CryNet]

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

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