罗伯特·穆格（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 hereoscillators[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

Web音频API：制作自己的Web合成器相关推荐

  1. 使用Web Speech API制作语音控制的音频播放器

    /* For hiding / showing the extra block */ .sp_hiddenblock {margin: 2px;border: 1px solid rgb(250, 1 ...

  2. Web性能API——帮你分析Web前端性能

    开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户端浏览设备的出现与网站功能的日益复杂化,对于性能的专注也 ...

  3. Waud.js – 使用HTML5降级处理的Web音频库

    Waud.js 是一个Web音频库,有一个HTML5音频降级处理方案. 它允许您利用Web音频API为你的Web应用程序控制音频功能.在不支持Web音频API的非现代浏览器使用HTML5音频降级方案. ...

  4. HTML 利用 Web Audio API 进行音频可视化

    利用Web Audio API 进行音乐可视化 1.什么是 Web Audio API: 官方:Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对 ...

  5. 利用Web Audio API将振动数据转化为音频数据并播放

    年初在公司做了一个需求:传感器采集到了机器的振动数据,要在网页中利用这个数据播放出振动的声音. 之前只了解过HTML中的<audio>元素可以通过src属性指定音频文件路径来播放音频,现在 ...

  6. Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo

    1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...

  7. 使用 Web Speech API 在浏览器中朗读文本

    Web Speech API有两个功能:语音合成(语音阅读)和语音识别(语音到文本的转换).SpeechSynthesis API允许您在浏览器中选择语音并大声朗读任何文本. 无论是应用程序中的语音警 ...

  8. webrtc 语音流java_Web语音处理 - Web Audio API WebRTC

    概述 很多设备都具备native的语音输入功能,并提供App来提供语言录入等功能.如果你想开发一些语言应用,那么针对不同的设备平台,包括desktop和移动设备如ios.android,你可能需要使用 ...

  9. Web Audio API与WebSocket播放实时音频

    WebSocket客户端与Web Audio API示例 <!DOCTYPE html> <html><head><meta charset="ut ...

最新文章

  1. DB2 XQuery学习笔记
  2. 批量修改漫游配置文件路径
  3. 退出oracle系统,配置Oracle随系统启动和关闭
  4. python是一种面向对象、直译式的脚本编程语言_什么是python编程语言
  5. protobuf和thrift对比
  6. 有关Struts2a的ction直接使用response异步问题
  7. 图像分割-二阶导数零交叉点的含义
  8. android创建构建方法,Android 应用程序构建实战+原理精讲
  9. 在…视域下是什么意思_电影中出现的出品人是什么意思？你需要了解下
  10. java中case语句_Java:switch-case语句
  11. 《Unity_5.X_3D游戏开发技术详解与典型案例》pdf
  12. 智慧校园家校综合信息化管理系统平台
  13. Auto.js蚂蚁森林自动偷能量脚本
  14. c++笔记③1109
  15. Excel 2010 VBA 入门 095 数据处理之用数组实现分列
  16. 思科、华为交换机链路聚合（LACP）配置实例
  17. RelativeLayout.LayoutParams.addRule()方法
  18. 商业智能BI与业务结构分析
  19. 用Marvelous Designer是如何构建人物角色3d服装的
  20. 在外企工作三年的高手 给大家一些英语学习得建议和忠告

热门文章

  1. ecc算法的代码实现
  2. “算法有偏见，比人强就行？”其实影响很广泛！
  3. 软考系统架构师倒计时第2天
  4. matlab仿真的优势,新手必看 saber和simulink的区别与优势
  5. Android自定义View——实现联系人列表字母索引
  6. Vikki与您共享系列七：社会化网络能让你赚钱吗？（2）
  7. 百度地图级别总共有19级，以下为详细内容
  8. 阿里开源android脚手架,GitHub - HiJesse/Gaea: Android 脚手架(组件化, 插件化)
  9. python | 一篇文章正则表达式全学会
  10. php json入门,JSON基础知识