我可以使用javascript“转换” <audio> 元素的音量吗？

Question

如果我希望随着时间的推移不规则地改变opacitya 的<div>，我可以使用 CSSanimation和@keyframes：

.myDiv {
  animation: myAnimation 10s linear;
}

@keyframes myAnimation {

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

}

}

但是，如果我想要的东西改变volume了的<audio class="my-audio">以相同的方式不规则元素随着时间的推移？

我知道我可以开始：

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

但是我怎样才能将volumeto 0.99, when 81%of the sound clip has beenplayed and淡化到 a volumeto 0.0, when 100%of the sound clip has beenplayed?

这种听觉转换是否有 javascript 语法，或者我正在寻找不存在的东西（还）？

Answer 1

这是我最后想到的：

1. 该脚本确定元素的持续时间audio，然后计算音频期间需要开始淡入淡出的点。
2. A开始通过反复检查属性来setInterval监控已播放的内容。audiocurrentTime
3. 在淡入淡出的起点，asetInterval开始重复减小volume的audio，直到达到零。

工作示例：

var myAudio = document.getElementsByTagName('audio')[0];
var myAudioVolume = 1.0;
var myAudioDuration;
var myAudioPlayInterval;
var myAudioCheckInterval;
var myAudioDuration1Percent;
var myAudioFadeStart = 30; // 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);
        console.log('myAudio volume is now ' + myAudioVolume);
        myAudio.volume = myAudioVolume;

        if (myAudioVolume < 0.05) {
            
            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>