如何用js创建声音

问题来源

实习时的项目有一个节拍器的需求（根据谱子打节拍）

考虑了两种方式，当然可以使用一个简短的音频文件，在每个拍子到来时播放。抱着不增加额外资源的原则，我便提出了这样一个问题：JS 能不能创造声音？

查阅资料

HTML5 Web Audio API 是一个非常强大的 API，但因为在实习之前极少接触音频文件，所以我对其并不了解。

我们需要利用其中的 AudioContext

实现方式

const tick = () => {
    // 兼容 webkit
    const context = new (window.AudioContext || window.webkitAudioContext)();
    // 创建一个振荡器(声音源于震动)
    const osc = context.createOscillator();
    // 指定波形 sine/square/triangle/sawtooth 
    osc.type = 'square';
    // 指定 频率(与音调/音高有关)
    osc.frequency.value = 500; // Hz
    // 和音频设备关联(通常为扬声器)
    osc.connect(context.destination);
    // 播放声音
    osc.start();
    // 声音停止(在0.1s后)
    osc.stop(context.currentTime + 0.1);
}

问题

1.不能创建一个声音然后反复的播放这个声音。播放完毕后会自动销毁，再播放需要重新创建。针对于我的需求，很浪费性能，因为我需要短时间内播放很多次。

2.经过测试，短时间好像只能创建50个，但实际要打的拍子很可能不止50个。（短时间创建限制50个是我的推测，每次都打到一半不出声了，我看好像是停在了50个拍子）

解决

只创建一个音频，只在必要时 osc.connect()，连接扬声器

参考

https://www.zhangxinxu.com/wordpress/2017/06/html5-web-audio-api-js-ux-voice/