Can I "transition" the volume of an <audio> element, using javascript?

Question

If I wish to change the opacity of a <div> irregularly over time, I can use CSS animation and @keyframes:

.myDiv {
  animation: myAnimation 10s linear;
}

@keyframes myAnimation {

    0% {opacity: 1;}
   80% {opacity: 1;}
   81% {opacity: 0.99;}
  100% {opacity: 0;}

}

}

But what if I want to change the volume of an <audio class="my-audio"> element irregularly over time in an identical manner?

I know I can begin with:

var myAudio = document.getElementsByClassName('my-audio')[0];
myAudio.volume = 1.0;

But how can I change the volume to 0.99, when 81% of the sound clip has played and fade uniformly down to a volume to 0.0, when 100% of the sound clip has played?

Is there a javascript syntax for this kind of aural transition or am I looking for something which doesn't exist (yet)?

Answer 1

I guarantee there is a better way of doing this, both performance wise and simplicity. However, here is my attempt of solving this case if I understood your question correct:

var myAudio = document.getElementsByClassName('my-audio')[0];

myAudio.onloadedmetadata = function() {
  myAudio.ontimeupdate = function() {
    fadeVolume(kFrame)
  };
};

var kFrame = {
  0: 0,
  10: .10,
  20: .20,
  30: .30,
  40: .40,
  50: .50,
  60: 0
}

function fadeVolume(settings) {
  if (settings) {
    var keys = Object.keys(settings);
    var duration = myAudio.duration;
    var currentTime = myAudio.currentTime;
    var percentage = (currentTime / duration) * 100;

    keys.forEach(key => {
      if (key <= percentage) {
        myAudio.volume = settings[key];
      }
    })
  }
}

<audio class="my-audio" controls>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="audio/ogg">
</audio>