【问题标题】:Generate sine wave and play it in the browser [closed]生成正弦波并在浏览器中播放[关闭]
【发布时间】:2016-01-10 18:08:49
【问题描述】:

我需要一个示例代码:

  1. 生成正弦波(一组样本),然后

  2. 播放它

使用 JavaScript 中的一些 HTML5 API 在浏览器中完成。

(我正在标记这个网络音频,虽然我不能 100% 确定它是否适用)

【问题讨论】:

  • 你试过什么?生成正弦波的意思并不完全清楚
  • @Binventionm 通过“生成正弦波”我的意思是使用 Math.sin() 函数在 -1 到 1 的范围内创建一个任意长度和频率的样本数组。跨度>
  • 所以您正在尝试以数学方式创建正弦波并将其作为音频文件读取?
  • 只是为了澄清:没有 HTML 5 API。无论文档类型如何,平台和 JavaScript 机器提供的任何 API 都可以提供,只是并非所有文档都允许执行脚本,但 SVG 和 HTML 可以。此外,有些 API 是标准化的,有些则不是。
  • @exebook:也许重新表述这个优秀问题的好方法是说你想“听一个函数”;函数(例如 Math.sin)作为参数传递,生成缓冲区数组,然后播放。很遗憾,自以为是的无所不知的人已经结束了这个问题。我不认为“为什么不使用振荡器”是反对这个问题的好论据。也许,对于那些缺乏想象力的人来说,它可能看起来像这样。无论如何,为了使目的“比必要的更清晰”,这是我的建议。

标签: javascript html audio cross-browser web-audio-api


【解决方案1】:

这是使用跨浏览器AudioContext在浏览器中播放441赫兹正弦波音调的方法。

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var context = new AudioContext();

function playSound(arr) {
  var buf = new Float32Array(arr.length)
  for (var i = 0; i < arr.length; i++) buf[i] = arr[i]
  var buffer = context.createBuffer(1, buf.length, context.sampleRate)
  buffer.copyToChannel(buf, 0)
  var source = context.createBufferSource();
  source.buffer = buffer;
  source.connect(context.destination);
  source.start(0);
}

function sineWaveAt(sampleNumber, tone) {
  var sampleFreq = context.sampleRate / tone
  return Math.sin(sampleNumber / (sampleFreq / (Math.PI * 2)))
}

var arr = [],
  volume = 0.2,
  seconds = 0.5,
  tone = 441

for (var i = 0; i < context.sampleRate * seconds; i++) {
  arr[i] = sineWaveAt(i, tone) * volume
}

playSound(arr)

【讨论】:

  • 虽然这回答了 OP 的问题,但是当您可以使用 WebAudio 的振荡器节点创建所需频率和持续时间的正弦波时,为什么还要费心创建自己的采样正弦波呢?
  • @RaymondToy 因为您可以以所有创造性的方式编辑创建的波形,淡入/淡出、扭曲、剪切、与其他波形混合以及对样本阵列进行任何其他 DSP 软处理。
  • 也许是这样,但这不是问题所在。你想要一个正弦波,而不是某种修改过的正弦波。使用增益节点,您可以进行淡入/淡出、剪切和混音。使用 WaveShaperNode,您可以进行一些变形。
  • Safari 不支持buffer.copyToChannel。改用buffer.getChannelData,直接修改频道如the examples of MDN's BaseAudioContext.createBuffer所示
  • 那个 sn-p 对我不起作用(我在 Macbook pro 上使用 Chrome)。
猜你喜欢
  • 1970-01-01
  • 2013-01-28
  • 1970-01-01
  • 2011-07-03
  • 1970-01-01
  • 2012-07-11
  • 2011-07-25
  • 2018-10-26
  • 1970-01-01
相关资源
最近更新 更多