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

Question

如果我希望随着时间的推移不定期地更改<div> 的opacity，我可以使用CSS animation 和@keyframes：

.myDiv {
  animation: myAnimation 10s linear;
}

@keyframes myAnimation {

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

}

}

但是，如果我想以相同的方式随着时间的推移不规则地更改 <audio class="my-audio"> 元素的 volume 怎么办？

我知道我可以开始：

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

但是，当声音剪辑的81% 播放并均匀淡入volume 到0.0 时，我如何将volume 更改为0.99，当声音剪辑的100% 有玩了吗？

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

Answer 1

我保证有更好的方法来做到这一点，无论是性能还是简单。但是，如果我理解你的问题是正确的，这是我解决这个案例的尝试：

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>

Answer 2

这是我的解决方案：

audio = new Audio(`example.ogg`);
for (let i = 0; i < 10; i ++) {
   setTimeout(() => {
      audio.volume = 1 - i * 0.1;
      if (i === 9) audio.pause();
   }, i * 200); // 2 sec; change this number to raise or lower the duration
}

Answer 3

这是我最后想到的：

1. 脚本确定audio 元素的持续时间，之后它会计算音频期间需要开始淡入淡出的时间点。
2. 一个setInterval 开始，通过反复检查currentTime 属性来监控audio 播放了多少。
3. 在淡入淡出的起点，setInterval 开始，它反复减少 audio 的 volume，直到达到零。

工作示例：

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>