使用javascript/html5动态生成声音

Question

是否可以使用javascript/html生成恒定的声音流？例如,要生成永久正弦波,我会有一个回调函数,只要输出缓冲区即将变空,就会调用它:

function getSampleAt(timestep)
{
    return Math.sin(timestep);
}

(我的想法是使用它来制作一个交互式合成器.我事先不知道按键的长度,所以我不能使用固定长度的缓冲区)

Answer 1

您现在可以在大多数浏览器中使用Web Audio API(IE和Opera Mini除外).

试试这段代码:

// one context per document
var context = new (window.AudioContext || window.webkitAudioContext)();
var osc = context.createOscillator(); // instantiate an oscillator
osc.type = 'sine'; // this is the default - also square, sawtooth, triangle
osc.frequency.value = 440; // Hz
osc.connect(context.destination); // connect it to the destination
osc.start(); // start the oscillator
osc.stop(context.currentTime + 2); // stop 2 seconds after the current time

如果你想降低音量,可以这样做:

var context = new webkitAudioContext();
var osc = context.createOscillator();
var vol = context.createGain();

vol.gain.value = 0.1; // from 0 to 1, 1 full volume, 0 is muted
osc.connect(vol); // connect osc to vol
vol.connect(context.destination); // connect vol to context destination
osc.start(context.currentTime + 3); // start it three seconds from now

在阅读Web Audio API工作草案时,我从铬的实验中获得了大部分内容,我从@brainjam的链接中找到了它.

我希望有所帮助.最后,检查chrome检查器中的各种对象(ctrl-shift-i)非常有用.

Answer 2

使用HTML5音频元素

audio目前还不能使用JavaScript和元素进行跨浏览器生成持续音频,正如Steven Wittens 在关于创建JavaScript合成器的博客文章中所述:

"......没有办法排队合成音频块以实现无缝播放".

使用Web Audio API

该网络音频API的设计,方便的JavaScript音频合成.Mozilla开发者网络有一个基于Web的音频发生器,适用于Firefox 4+ [ 演示1 ].将这两行添加到该代码中,您可以在按键时使用生成合成器生成持续音频[ 演示2 - 仅在Firefox 4中工作,首先单击"结果"区域,然后按任意键]:

window.onkeydown = start;  
window.onkeyup = stop;

BBC 关于Web Audio API的页面也值得回顾.遗憾的是,对Web Audio API的支持尚未扩展到其他浏览器.

可能的解决方法

要创建目前的跨浏览器合成器,您可能必须通过以下方式回退预先录制的音频:

1. 使用长预先录制的ogg/mp3样本音,将它们嵌入到单独的audio元素中,并在按键时启动和停止它们.
2. 嵌入包含音频元素的swf文件并通过JavaScript控制播放.(这似乎是Google Les Paul Doodle采用的方法.)

Answer 3

Web Audio API即将推出Chrome.请参阅http://googlechrome.github.io/web-audio-samples/samples/audio/index.html

按照"入门"中的说明进行操作,然后查看非常令人印象深刻的演示.

更新(2017):到目前为止,这是一个更加成熟的界面.该API记录在https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

Answer 4

当然!你可以在这个演示中使用音调合成器:

audioCtx = new(window.AudioContext || window.webkitAudioContext)();

show();

function show() {
  frequency = document.getElementById("fIn").value;
  document.getElementById("fOut").innerHTML = frequency + ' Hz';

  switch (document.getElementById("tIn").value * 1) {
    case 0: type = 'sine'; break;
    case 1: type = 'square'; break;
    case 2: type = 'sawtooth'; break;
    case 3: type = 'triangle'; break;
  }
  document.getElementById("tOut").innerHTML = type;

  volume = document.getElementById("vIn").value / 100;
  document.getElementById("vOut").innerHTML = volume;

  duration = document.getElementById("dIn").value;
  document.getElementById("dOut").innerHTML = duration + ' ms';
}

function beep() {
  var oscillator = audioCtx.createOscillator();
  var gainNode = audioCtx.createGain();

  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  gainNode.gain.value = volume;
  oscillator.frequency.value = frequency;
  oscillator.type = type;

  oscillator.start();

  setTimeout(
    function() {
      oscillator.stop();
    },
    duration
  );
};

frequency
<input type="range" id="fIn" min="40" max="6000" oninput="show()" />
<span id="fOut"></span><br>
type
<input type="range" id="tIn" min="0" max="3" oninput="show()" />
<span id="tOut"></span><br>
volume
<input type="range" id="vIn" min="0" max="100" oninput="show()" />
<span id="vOut"></span><br>
duration
<input type="range" id="dIn" min="1" max="5000" oninput="show()" />
<span id="dOut"></span>
<br>
<button onclick='beep();'>Play</button>

玩得开心!

我在这里得到了Houshalter的解决方案: 如何让Javascript发出哔哔声？

你可以在这里克隆和调整代码: JS Bin上的音频合成器演示

兼容的浏览器:

• Chrome移动版和桌面版
• Firefox移动和桌面Opera移动,迷你和桌面
• Android浏览器
• Microsoft Edge浏览器
• iPhone或iPad上的Safari

不兼容

• Internet Explorer版本11(但可以在Edge浏览器上运行)