Mute/Unmute 声音 w/o 按钮 HTML5

Question

问题：在 HTML5 中为 静音和取消静音 音频（w/o VideoPlayer）找到有效的函数自动直到定义的时间过去。

我将振荡器的增益设置为从 0 逐渐增加到 1（在每个增益增加单位中被一堆 1 秒的静音打断）直到达到 30 秒。为此，调用了 setValueAtTime 函数（我为增益值和时间值都添加了增量）。

然而，它似乎效率不高，因为迭代不遵循准确的现实生活对应时间，即使参数被单独设置为在特定时间更改值 -> 这需要一个虚拟努力测试。更有趣的是 setValueCurveAtTime 和 setLinearRampAtTime，但它们似乎不允许在增加音调期间分配 "silences"。

找到的唯一参考资料是关于带有自定义按钮的 UserInteraction，这不是自动的；和 JQuery 功能。我发现没有足够精确的文档。例如，函数 "document.getElementById(id).setVolume(0);" 既没有提供定义静音持续时间的选项，也没有提供沿着渐增音调的 30 秒均匀插入此 1s 静音的选项。

定义函数后，我会调用 setTimeout 以便立即播放，然后 setInterval("function()", 30000）。

代码片段

context=new AudioContext();
var oscillator = context.createOscillator();
var gainR = context.createGain(); 
oscillator.connect(gainR);
gainR.connect(context.destination);
gainR.gain.setValueAtTime(0,currenttime);
loudnessup = function (){
var c = currenttime;
var Loud=0.2; 
gainR.gain.setValueAtTime(Loud, c+2);
gainR.gain.setValueAtTime(0, c+3);
gainR.gain.setValueAtTime(Loud+0.05, c+3.5);
gainR.gain.setValueAtTime(0, c+4.5);
//...continues iterations
gainR.gain.setValueAtTime(Loud+0.8, c+28);
gainR.gain.setValueAtTime(0, c+30);};
setTimeout("loudnessup()",currenttime); 
setInterval(function(){
n=n+1; //after 30s the freq value should arise accordingly to an array 
oscillator.frequency.value = frequencies[n];},30000);}

在 30 年代之后，具有更高频率的循环似乎没有进一步发展

Answer 1

下面是一个使用内置高分辨率计时器设置相对于开始时间的短段音量的示例。

它将为每个段创建两个事件以快速增加音量。每个段都被切换，因此第一次会提高音量，第二次会降低音量。使用轻微的斜坡也可以防止声音中出现咔哒声。

使用切换状态，您可以创建两个事件，为每个段定义一个短斜坡。如果切换为真，则从当前音量变为 0，否则从 0 变为当前音量：

var toggle = true;
var now = actx.currentTime;
...

for(var i = 0; i < duration; i += step) {
    var volume = i / duration;

    g.gain.linearRampToValueAtTime(toggle ? volume : 0, now + i);
    g.gain.linearRampToValueAtTime(toggle ? 0 : volume, now + i + 0.012);
    toggle = !toggle;
}

实例

document.querySelector("button").onclick = function() {
  this.style.display = "none";
  playSound();                     // first play
  setInterval(playSound, 30000);   // next play, after and every 30 sec.
};
  
function playSound() {
  
  var duration = 30, step = 1, toggle = false,
      actx = new (AudioContext || webkitAudioContext)(),
      osc = actx.createOscillator(),
      g = actx.createGain();

  osc.frequency.value = 440;
  g.gain.value = 0;
  osc.connect(g); 
  g.connect(actx.destination);

  var now = actx.currentTime;

  for(var i = 0; i < duration; i += step) {
    // volume for this segment when toggled on
    var volume = i / duration;
    
    // create a short ramp using two events 12ms appart
    g.gain.linearRampToValueAtTime(toggle ? volume : 0, now + i);
    g.gain.linearRampToValueAtTime(toggle ? 0 : volume, now + i + 0.012);
    toggle = !toggle;
  }

  osc.start();
  osc.stop(now + duration);
};

button {font:bold 20px sans-serif}

<button>Start</button>

Mute/Unmute 声音 w/o 按钮 HTML5

Mute/Unmute Sound w/o Button HTML5

html

javascript

mute

html5-audio

实例