怎么利用HTML的Audio API的createOscillator生成指定频率的音频信号-html教程-PHP中文网

createOscillator创建的振荡器默认静音，需调用start()并连接destination才能发声；必须在用户交互后初始化AudioContext；频率应通过setValueAtTime()设置；启停需用GainNode实现淡入淡出防爆音；调度须基于audioContext.currentTime。

怎么利用html的audio api的createoscillator生成指定频率的音频信号

createOscillator 本身不生成可直接播放的音频信号

直接调用 createOscillator() 创建的振荡器默认处于“未启动”状态，且输出是静音——它不会自动连接到扬声器。必须显式调用 start()，并至少连接到一个目的地（如 destination 或 gainNode），否则听不到任何声音。

常见错误现象：TypeError: Cannot read property 'connect' of undefined（忘记获取 audioContext.destination）；或无声但控制台无报错（漏掉 osc.start() 或连接链断裂）。

必须在用户交互（如 click、touchstart）后首次创建 AudioContext，否则多数浏览器会静音或拒绝启动
frequency 是 AudioParam，应使用 setValueAtTime() 或 setTargetAtTime() 设置，避免直接赋值 osc.frequency.value = 440（虽不报错，但可能触发非预期调度）
振荡器一旦 start() 后不可重复调用 start()，需新建实例或用 stop() + 重建

基础正弦波生成：连接 destination 的最小可行路径

生成 440Hz 纯音的最简流程是：创建上下文 → 创建振荡器 → 设置频率 → 连接输出 → 启动。

let audioContext;
let osc;

function playTone() {
  if (!audioContext) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
  }
  osc = audioContext.createOscillator();
  osc.type = 'sine'; // 可选 'square'/'sawtooth'/'triangle'
  osc.frequency.setValueAtTime(440, audioContext.currentTime);
  osc.connect(audioContext.destination);
  osc.start();
}

// 在按钮点击中调用
document.getElementById('play').onclick = playTone;

注意：osc.start() 必须在 connect() 之后，且不能在 audioContext 被挂起（suspended）状态下执行——所以务必在用户手势后才初始化上下文。

避免爆音和实现平滑启停

直接 start()/stop() 会导致波形突变，产生“咔哒”声。真实场景中需用 GainNode 控制音量包络。

创建 gainNode = audioContext.createGain()，设初始增益为 0
将 osc 连接到 gainNode，再连到 destination
启动时用 gainNode.gain.setValueAtTime(0, t); gainNode.gain.linearRampToValueAtTime(1, t + 0.01) 实现 10ms 淡入
停止前先淡出：gainNode.gain.cancelAndHoldAtTime(gainNode.gain.value, audioContext.currentTime); gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.02)，再 osc.stop()

不这样做，高频连续启停（如模拟按键音）会快速积累失真和听觉疲劳。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

频率精度与 Web Audio 的调度机制

osc.frequency 支持高精度设置（如 440.0001 Hz），但实际输出受硬件采样率和调度延迟影响。关键点在于：所有时间参数（start(), setValueAtTime()）都基于 audioContext.currentTime，而非 Date.now() 或 setTimeout。

例如，想在 2 秒后精准播放 880Hz 音：

const when = audioContext.currentTime + 2;
osc.frequency.setValueAtTime(880, when);
osc.start(when); // 注意：start() 接收时间戳参数

若用 setTimeout(() => osc.start(), 2000)，误差可能达 10–50ms，且无法保证与音频时钟对齐。复杂节奏或音效同步必须依赖 currentTime 调度。

另外，createOscillator() 不适合长时间运行（如 >30 秒）——部分浏览器会在后台标签页节流或暂停定时器，导致音高漂移或中断。需要持续发声时，应拆分为短周期重触发，并监控 audioContext.state 是否变为 suspended。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！