Animate audio volume with AnimationJS

Hello, my friends!

In this example, I want to show how you can animate the volume of an audio element using the AnimationJS module.

Example: https://pimenov.com.ua/demo/animationjs/sound.html

HTML

<div class="wrapper" id="field" data-title="">
    <button data-role="fadeIn">Sound fade In</button>
    <button data-role="fadeOut">Sound fade Out</button>
    <audio autoplay loop>
        <source src="sound.mp3" type="audio/wav">
    </audio>
</div>

JavaScript

import {animate} from "@olton/animationjs";

const audio = document.querySelector('audio');
const btns = document.querySelectorAll("button");

btns.forEach( (el) => {
    el.addEventListener("click", (e) => {
        const btn = e.target;
        const role = btn.getAttribute('data-role');
        let draw;

        if (role === 'fadeIn') {
            draw = (t, p) => {
                audio.volume = p;
            }
        } else {
            draw = (t, p) => {
                audio.volume = 1 - p;
            }
        }
        animate({
            el: audio,
            draw: draw,
            dur: 2000
        })
    })
} )

Also, to set draw, you can use plain object.
To fade volume in:

draw = {
    volume: 1
}

and, to fade volume out:

draw = {
    volume: 0
}