我可以使用 javascript "transition" <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 到 [=25] 时，我怎样才能将 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 元素的持续时间，之后它计算音频中淡入淡出需要开始的点。
A setInterval 开始，它通过反复检查 currentTime 属性.

audio

在淡入淡出的起点，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>

Answer 3

这是我的解决方案：

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
}

我可以使用 javascript "transition" <audio> 元素的体积吗？

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

html

javascript

transition

html5-audio