生成正弦波并在浏览器中播放[关闭]

Posted 2023-02-24

【中文标题】生成正弦波并在浏览器中播放[关闭]

【英文标题】：Generate sine wave and play it in the browser [closed]

【发布时间】：2016-01-10 18:08:49

【问题描述】：

我需要一个示例代码：

生成正弦波（一组样本），然后

播放它。

使用 javascript 中的一些 html5 API 在浏览器中完成。

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

【问题讨论】：

你试过什么？生成正弦波的意思并不完全清楚

@Binventionm 通过“生成正弦波”我的意思是使用 Math.sin() 函数在 -1 到 1 的范围内创建一个任意长度和频率的样本数组。跨度>

所以您正在尝试以数学方式创建正弦波并将其作为音频文件读取？

只是为了澄清：没有 HTML 5 API。无论文档类型如何，平台和 JavaScript 机器提供的任何 API 都可以提供，只是并非所有文档都允许执行脚本，但 SVG 和 HTML 可以。此外，有些 API 是标准化的，有些则不是。

@exebook：也许重新表述这个优秀问题的好方法是说你想“听一个函数”；函数（例如 Math.sin）作为参数传递，生成缓冲区数组，然后播放。很遗憾，自以为是的无所不知的人已经结束了这个问题。我不认为“为什么不使用振荡器”是反对这个问题的好论据。也许，对于那些缺乏想象力的人来说，它可能看起来像这样。无论如何，为了使目的“比必要的更清晰”，这是我的建议。

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