罗伯特·穆格（Robert Moog）创造了著名的最早的商业模块化合成器之一。 他的发明包括大量的电线和旋钮，使音乐家能够创作出从未听过的声音。 这些仪器也不便宜，即使是最基本的仪器也要花费数千美元。
现在，由于有了Web Audio API，我们可以创建自己听起来相似的合成器，可以为您的心脏内容配置这些合成器，总计$ 0。 不仅如此，借助网络，我们可以立即将合成器分发给世界上任何人。
如果您尚未阅读本网络音频系列中的先前教程，建议您在阅读本教程之前先回头阅读，因为它们涵盖了使用Web Audio API和从头开始创建声音的基础知识。
入门
让我们开始创建一个基本HTML页面。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add sound to your web app</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div class="container">
<h1>Synthesizer!</h1>
</div>
</body>
</html> 以及我们的styles/main.css文件中的一些基本样式。
body {
font-family: sans-serif;
}
.container {
margin: auto;
width: 800px;
}键盘
合成器需要的最重要的东西可能是键盘。 幸运的是，我创建了一个JavaScript小片段，它将为您的页面添加一个虚拟键盘。 下载Qwerty Hancock的副本，并在页面底部引用它，就像这样。
<script src="scripts/qwerty-hancock.min.js"></script>然后向您的页面添加一个ID为“键盘”的空div。
<div id="keyboard"></div>这是将在其中插入键盘的页面上的位置。
我们还将要为合成器设置一个专用JavaScript文件，因此我们也要创建该文件，并在包含Qwerty Hancock的位置对其进行引用。
<script src="scripts/qwerty-hancock.min.js"></script>
<script src="scripts/synth.js"></script>在synth.js中，我们将通过执行以下操作来初始化键盘。
var keyboard = new QwertyHancock({
id: 'keyboard',
width: 600,
height: 150,
octaves: 2
});这告诉我们页面将键盘实例插入ID为“ keyboard”的元素中，将其尺寸调整为600 x 150 px，并使键盘上的键数覆盖两个八度。 保存并刷新浏览器，以查看漂亮的屏幕键盘。 使用按键，触摸或鼠标可以看到笔记在按下时变亮。
Qwerty Hancock为我们提供了两个事件侦听器， keyUp和keyDown 。 这些使我们能够钩住键盘并编写在按下键盘时触发的代码。 它还告诉我们按下了哪个音符，以及它对应的频率（以赫兹为单位） 。
keyboard.keyDown = function (note, frequency) {
console.log('Note', note, 'has been pressed');
console.log('Its frequency is', frequency);
};
keyboard.keyUp = function (note, frequency) {
console.log('Note', note, 'has been released');
console.log('Its frequency was', frequency);
};剧烈振荡
让我们在按下一个键时启动一个振荡器。 一秒钟后，我们将停止它，以便它不会永远持续下去。
var context = new AudioContext();
keyboard.keyDown = function (note, frequency) {
var osc = context.createOscillator();
osc.connect(context.destination);
osc.start(context.currentTime);
osc.stop(context.currentTime + 1);
}; 为什么要在keyDown函数中创建振荡器？ 那不是效率低下吗？ 振荡器设计为轻巧的，使用后将其丢弃。 您实际上只能使用一次。 将它们视为某种怪异的音频烟花。
现在，当我们按下一个键时，我们会听到声音。 它有点响，所以让我们创建一个gainNode来充当主音量控件。
var context = new AudioContext(),
masterVolume = context.createGain();
masterVolume.gain.value = 0.3;
masterVolume.connect(context.destination);
keyboard.keyDown = function (note, frequency) {
var osc = context.createOscillator();
osc.connect(masterVolume);
masterVolume.connect(context.destination);
osc.start(context.currentTime);
osc.stop(context.currentTime + 1);
};反复演奏一个音符的键盘不是很有趣，因此让我们在开始演奏之前先将频率插入振荡器。
osc.frequency.value = frequency; 可爱。 现在我们需要在松开琴键之后而不是在一秒钟之后停止振荡器的播放。 因为我们是在keyDown函数内部创建振荡器，所以我们需要跟踪哪个振荡器正在播放哪个频率，以便在释放键时停止它。 一种简单的方法是创建一个空对象，然后将频率添加为键，以及哪个振荡器将其作为该值播放。
var oscillators = {};
keyboard.keyDown = function (note, frequency) {
// Previous code here
oscillators[frequency] = osc;
osc.start(context.currentTime);
}; 这意味着我们可以轻松地使用从noteUp函数获得的频率来停止该特定振荡器。
keyboard.keyUp = function (note, frequency) {
oscillators[frequency].stop(context.currentTime);
};现在，浏览器中有一个功能全面的（非常基础的）合成器！ 好的，目前听起来还不太好，但是让我们看看是否可以更改它。
首先要做的是更改振荡器输出的波形类型。 有四种基本类型可供选择：正弦波，正方形，三角形和锯齿形。 每种不同的波形听起来都不同。 和他们一起玩，然后选择您喜欢的人。 对于此示例，我将选择“锯齿”。
osc.type = 'sawtooth';在那里，听起来更好。
您很难找到使用单个振荡器的合成器。 大多数合成器通过组合不同类型的不同振荡器来增强声音。 让我们看看如果添加另一个声音。 记住，我们需要将所有连接加倍，并且需要向阵列添加相同频率的振荡器。 这意味着我们可以遍历它们，以停止所有演奏同一音符的振荡器。
keyboard.keyDown = function (note, frequency) {
var osc = context.createOscillator(),
osc2 = context.createOscillator();
osc.frequency.value = frequency;
osc.type = 'sawtooth';
osc2.frequency.value = frequency;
osc2.type = 'triangle';
osc.connect(masterVolume);
osc2.connect(masterVolume);
masterVolume.connect(context.destination);
oscillators[frequency] = [osc, osc2];
osc.start(context.currentTime);
osc2.start(context.currentTime);
};
keyboard.keyUp = function (note, frequency) {
oscillators[frequency].forEach(function (oscillator) {
oscillator.stop(context.currentTime);
});
};最后，让我们使用上一教程中学到的技巧。 我们可以添加一些合唱效果，通过使振荡器稍微失谐来增加声音的闪烁感。
osc.detune.value = -10;
osc2.detune.value = 10;美丽，合成器Kraftwerk将为之骄傲！ 与完成的文章一起玩，或在GitHub上回购仓库以根据您的心脏内容调整合成器。
翻译自: https://code.tutsplus.com/tutorials/the-web-audio-api-make-your-own-web-synthesizer--cms-23887
扫一扫
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
