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

Question

If I want to change opacityof <div>irregularly over time, I can use CSS animationand @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 an volumeelement of an element <audio class="my-audio">irregularly over time in the same way?

I know that I can start with:

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

But how can I change volumeto 0.99when the 81%sound clip was playing and gradually fading to volumebefore 0.0when the 100%sound clip was playing?

Is there javascript syntax for this kind of auditory transition, or am I looking for something that doesn't exist yet?

Answer 1

:

• script audio, , .
• A setInterval , audio , currentTime.
• setInterval, volume audio, .

:

var myAudio = document.getElementsByTagName('audio')[0];
var myAudioVolume = 1.0;
var myAudioDuration;
var myAudioPlayInterval;
var myAudioCheckInterval;
var myAudioDuration1Percent;
var myAudioFadeStart = 50; // The percentage of playback before the fade starts


setTimeout(function(){
    myAudioDuration = myAudio.duration;
    myAudioDuration1Percent = (myAudio.duration / 100); 
}, 200);


function myAudioFadeVolume() {

    myAudioFader = setInterval(function(){
        myAudioVolume = myAudio.volume;

        myAudioVolume = myAudioVolume - ((1 / myAudioFadeStart) * 2);
        console.log('myAudio volume is now ' + myAudioVolume);
        myAudio.volume = myAudioVolume;

        if (myAudioVolume < 0.1) {
            myAudio.volume = 0;
            clearInterval(myAudioFader);
        }

    }, (myAudioDuration1Percent * 1000));
}

function myAudioFindFadeStart() {

    myAudioCheckInterval = setInterval(function(){

        if (myAudio.currentTime > (myAudioDuration1Percent * myAudioFadeStart)) {

            myAudioFadeVolume();
            clearInterval(myAudioCheckInterval);
        }
    }, 10);
}

setTimeout(function(){
    myAudio.play();
    myAudioFindFadeStart();
}, 1500);

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

Answer 2

, , , . , , :

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>