Question

如果我希望随着时间的推移不定期更改opacity <div>，我可以使用CSS animation和@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;

但是，当声音片段的volume播放时，如何将0.99更改为81%，并将{1}}均匀地淡化为volume 0.0 ，当声音剪辑的100%播放时？

这种听觉过渡是否存在javascript语法，或者我是否在寻找尚未存在的东西？

Answer 1

我保证有更好的方法，无论是性能还是简单。但是，如果我理解你的问题是正确的，那么我试图解决这个问题：

＆＃13;

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];
      }
    })
  }
}

＆＃13;

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

＆＃13;

Answer 2

这是我最终想出的：

脚本确定audio元素的持续时间，然后计算淡入淡出需要开始的音频期间的点。
开始setInterval，通过反复检查audio属性来监控currentTime的播放量。
在淡入淡出的开始点，setInterval开始重复减少volume的{{1}}，直至达到零。

工作示例：

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);

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
}

我可以过渡＆＃34; <audio>元素的音量，使用javascript？

3 个答案: