HTML5 音频合成基础：使用 OscillatorNode 创建基础音调-H5教程-PHP中文网

要用 web audio api 的 oscillatornode 合成基础音调，核心是创建振荡器、设置频率与波形、连接到音频上下文输出，并在合适时机启动和停止——整个过程不依赖外部文件，纯代码生成声音。

html5 音频合成基础：使用 oscillatornode 创建基础音调

要用 Web Audio API 的 OscillatorNode 合成基础音调，核心是创建振荡器、设置频率与波形、连接到音频上下文输出，并在合适时机启动和停止——整个过程不依赖外部文件，纯代码生成声音。

创建并配置 OscillatorNode

先获取或创建 AudioContext，再用 context.createOscillator() 实例化振荡器。它默认以 440 Hz（标准 A4 音）和正弦波（"sine"）启动，但应显式设置关键参数：

type：可选 "sine"（最纯净）、"square"（含奇次谐波，较硬朗）、"sawtooth"（丰富谐波，略刺耳）、"triangle"（柔和，近似正弦）
frequency：单位 Hz，例如 261.63 是中央 C（C4），可用公式 440 * Math.pow(2, (n - 69) / 12) 计算 MIDI 音符对应频率
detune：单位 cents（±100 cents = ±1 半音），微调音高，比直接改 frequency 更适合精细控制

连接输出并触发播放

振荡器必须连接到音频图中的某个目的地才能发声，最常见的是 context.destination（系统扬声器）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

调用 oscillator.connect(context.destination)
用 oscillator.start([when]) 启动，when 是相对于 context.currentTime 的时间戳（秒），设为 context.currentTime 表示立即播放
必须调用 start() 才能发声；未调用则静音，即使已连接

安全停止与资源清理

振荡器一旦启动，会持续发声直到显式停止或上下文挂起。为避免内存泄漏和意外噪音：

用 oscillator.stop([when]) 停止，同样支持定时停止（如 context.currentTime + 1 播放 1 秒后停）
停止后不可再次 start()，需重新创建新实例
若页面长期闲置，浏览器可能自动暂停 AudioContext；用户交互（如点击）后需调用 context.resume() 恢复

合成一个中央 C 音（C4）示例

以下代码可直接运行，播放约 1 秒的纯正弦波 C4 音：

const context = new (window.AudioContext || window.webkitAudioContext)();
const osc = context.createOscillator();
osc.type = 'sine';
osc.frequency.value = 261.63; // C4
osc.connect(context.destination);
osc.start(context.currentTime);
osc.stop(context.currentTime + 1);

注意：首次使用需用户手势触发（如按钮点击），否则部分浏览器会拒绝启动音频上下文。