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

Posted 2023-02-25

【中文标题】我可以使用javascript“转换” <audio> 元素的音量吗？

【英文标题】：Can I "transition" the volume of an <audio> element, using javascript?

【发布时间】：2017-11-29 20:16:07

【问题描述】：

如果我希望随着时间的推移不定期地更改<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 语法，或者我是否正在寻找一些不存在的东西（目前）？

【问题讨论】：

您可以使用setTimeout 或setInterval 自己实现一个。

这不能用 CSS 完成，因为 volume 是一个对象属性，而不是 CSS 属性。它可以通过 JavaScript 使用 setTimeout() 来完成，你必须自己做数学来决定音量应该多高以及何时。

***.com/questions/7451508/…

您可以获得音频元素的currentTime 属性，并且有一个 timeupdate 事件。与duration 属性一起，您可以进行所需的数学运算，并在正确的时间开始为volume 属性设置较低的值。

我会为此创建一个新的音频文件。

【参考方案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>

【讨论】：

我喜欢你这里的方法，@Sølve - 使用 object（或 array）可以很好地控制在音频的不同阶段提高和降低音量。

【参考方案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

【参考方案3】：

这是我最后想到的：

脚本确定audio 元素的持续时间，之后它会计算音频期间需要开始淡入淡出的时间点。 一个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>

【讨论】：

太棒了！伟大的工作@Rounin。很高兴你最终找到了解决方案！