web audio api
This article is part of a web dev series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
Before the Web Audio API, HTML5 gave us the audio element. It might seem hard to remember now, but prior to the audio element, our best option for sound in a browser was a plugin! The audio element was, indeed, exciting but it had a pretty singular focus. It was essentially a video player without the video, good for long audio like music or a podcast, but ill-suited for the demands of gaming. We put up with (or found workarounds for) looping issues, concurrent sound limits, glitches and total lack of access to the sound data itself.
在使用Web Audio API之前，HTML5提供了audio元素。 现在似乎很难记住，但是在audio元素之前，我们最好的浏览器声音选择是插件！ audio元素确实令人兴奋，但它的焦点非常单一。 它本质上是没有视频的视频播放器，适合于音乐或播客之类的长音频，但不适用于游戏需求。 我们忍受(或找到解决方法)循环问题，并发声音限制，故障以及完全无法访问声音数据本身。
Fortunately, our patience has paid off. Where the audio element may have been lacking, the Web Audio API delivers. It gives us unprecedented control over sound and it’s perfect for everything from gaming to sophisticated sound editing. All this with a tidy API that’s really fun to use and well supported.
幸运的是，我们的耐心得到了回报。 可能缺少audio元素的地方，将提供Web Audio API。 它为我们提供了前所未有的声音控制能力，非常适合从游戏到复杂的声音编辑的所有操作。 所有这些都带有一个整洁的API，使用起来非常有趣并且得到了很好的支持。
Let’s be a little more specific: Web Audio gives you access to the raw waveform data of a sound and lets you manipulate, analyze, distort or otherwise modify it. It is to audio what the canvas API is to pixels. You have deep and mostly unfettered access to the sound data. It’s really powerful!
让我们更具体一点：Web Audio使您可以访问声音的原始波形数据，并可以对其进行操作，分析，变形或其他修改。 音频是什么画布API是像素。 您可以对声音数据进行深入而几乎不受限制的访问。 它真的很强大！
This tutorial is the second in a series on Flight Arcade – built to demonstrate what’s possible on the web platform and in the new Microsoft Edge browser and EdgeHTML rendering engine. Interactive code and examples for this article are also located at: http://www.flightarcade.com/learn/
本教程是Flight Arcade系列文章中的第二篇，旨在演示在Web平台以及新的Microsoft Edge浏览器和EdgeHTML呈现引擎中可能实现的功能 。 本文的交互式代码和示例也位于： http : //www.flightarcade.com/learn/
Even the earliest versions of Flight Simulator made efforts to recreate the feeling of flight using sound. One of the most important sounds is the dynamic pitch of the engine which changes pitch with the throttle. We knew that, as we reimagined the game for the web, a static engine noise would really seem flat, so the dynamic pitch of the engine noise was an obvious candidate for Web Audio.
即使是最早的Flight Simulator 版本 ，也努力通过声音来重现飞行的感觉。 最重要的声音之一是发动机的动态俯仰，其随着节气门而改变。 我们知道，当我们对网络游戏进行重新构想时，静态的引擎噪音似乎真的很平坦，因此，引擎噪音的动态音调显然是Web Audio的候选者。
You can try it out interactively here.
您可以在此处以交互方式进行尝试 。
Less obvious (but possibly more interesting) was the voice of our flight instructor. In early iterations of Flight Arcade, we played the instructor’s voice just as it had been recorded and it sounded like it was coming out of a sound booth! We noticed that we started referring to the voice as the “narrator” instead of the “instructor.” Somehow that pristine sound broke the illusion of the game. It didn’t seem right to have such perfect audio coming over the noisy sounds of the cockpit. So, in this case, we used Web Audio to apply some simple distortions to the voice instruction and enhance the realism of learning to fly!
不太明显(但可能更有趣)的是我们的飞行教练的声音。 在Flight Arcade的早期迭代中，我们播放了教练的声音，就像它被录制的一样，听起来好像是从录音棚出来的！ 我们注意到，我们开始将声音称为“讲述人”而不是“讲师”。 原始的声音以某种方式打破了游戏的幻想。 在座舱的嘈杂声音中传来如此完美的音频似乎是不对的。 因此，在这种情况下，我们使用Web Audio将一些简单的失真应用于语音指令，并增强了学习飞行的真实感！
There’s a sample of the instructor audio at the end of the article. In the sections below, we’ll give you a pretty detailed view of how we used the Web Audio API to create these sounds.
本文结尾处有一个讲师音频样本。 在以下各节中，我们将为您提供有关如何使用Web Audio API创建这些声音的非常详细的视图。
The first step in any Web Audio project is to create an AudioContext object. Some browsers (including Chrome) still require this API to be prefixed, so the code looks like this:
任何Web Audio项目的第一步都是创建一个AudioContext对象。 某些浏览器(包括Chrome)仍然需要为此API加上前缀，因此代码如下所示：
Then you need a sound. You can actually generate sounds from scratch with the Web Audio API, but for our purposes we wanted to load a prerecorded audio source. If you already had an HTML audio element, you could use that but a lot of times you won’t. After all, who needs an audio element if you’ve got Web Audio? Most commonly, you’ll just ‘download the audio directly into a buffer with an http request:
然后，您需要声音。 实际上，您可以使用Web Audio API从头开始生成声音，但是出于我们的目的，我们希望加载预先录制的音频源。 如果您已经有了HTML audio元素，则可以使用它，但是很多时候不会。 毕竟，如果您拥有Web Audio，谁需要audio元素？ 最常见的情况是，您只需通过http请求将音频直接下载到缓冲区中：
Now we have an AudioContext and some audio data. Next step is to get these things working together. For that, we need…
现在我们有了一个AudioContext和一些音频数据。 下一步是使这些东西协同工作。 为此，我们需要……
Just about everything you do with Web Audio happens via some kind of AudioNode and they come in many different flavors: some nodes are used as audio sources, some as audio outputs and some as audio processors or analyzers. You can chain them together to do interesting things.
使用Web Audio所做的几乎所有事情都是通过某种AudioNode发生的，它们具有多种不同的风格：有些节点用作音频源，有些用作音频输出，有些用作音频处理器或分析器。 您可以将它们链接在一起以做一些有趣的事情。
You might think of the AudioContext as a sort of sound stage. The various instruments, amplifiers and speakers that it contains would all be different types of AudioNodes. Working with the Web Audio API is a lot like plugging all these things together (instruments into, say, effects pedals and the pedal into an amplifiers and then speakers, etc.).
您可能将AudioContext视为一种声音舞台。 它包含的各种乐器，放大器和扬声器都是不同类型的AudioNode。 使用Web Audio API就像将所有这些东西连接在一起(将乐器插入效果踏板，然后将踏板插入放大器，然后再插入扬声器等)。
Well, in order to do anything interesting with our newly acquired AudioContext audio sources, we need to first encapsulate the audio data as a source AudioNode.
好吧，为了对我们新获得的AudioContext音频源做任何有趣的事情，我们需要首先将音频数据封装为源AudioNode。
That’s it. We have a source. But before we can play it, we need to connect it to a destination node. For convenience, the AudioContext exposes a default destination node (usually your headphones or speakers). Once connected, it’s just a matter of calling start and stop.
而已。 我们有消息来源。 但是在播放之前，我们需要将其连接到目标节点。 为了方便起见，AudioContext公开了一个默认的目标节点(通常是您的耳机或扬声器)。 连接后，只需调用启动和停止即可。
It’s worth noting that you can only call to start() once on each source node. That means “pause” isn’t directly supported. Once a source is stopped, it’s expired. Fortunately, source nodes are inexpensive objects, designed to be created easily (the audio data itself, remember, in a separate buffer). So, if you want to resume a paused sound you can simply create a new source node and call start() with a timestamp parameter. AudioContext has an internal clock that you can use to manage timestamps.
值得注意的是，您只能在每个源节点上调用一次start() 。 这意味着不直接支持“暂停”。 源停止后，它就过期了。 幸运的是，源节点是廉价的对象，旨在轻松创建(记住，音频数据本身在单独的缓冲区中)。 因此，如果要恢复暂停的声音，只需创建一个新的源节点并使用timestamp参数调用start()即可。 AudioContext有一个内部时钟，您可以使用它来管理时间戳。
That’s it for the basics, but everything we’ve done so far (simple audio playback) could have done with the old audio element. For Flight Arcade, we needed to do something more dynamic. We wanted the pitch to change with the speed of the engine.
基本内容就是这样，但是到目前为止，我们所做的一切(简单的音频播放)都可以使用旧的audio元素完成。 对于Flight Arcade，我们需要做一些更动态的事情。 我们希望俯仰随着发动机的速度而变化。
That’s actually pretty simple with Web Audio (and would have been nearly impossible without it)! The source node has a rate property which affects the speed of playback. To increase the pitch we just increase the playback rate:
对于Web Audio，这实际上非常简单(没有它几乎是不可能的)！ 源节点的速率属性会影响播放速度。 要增加音调，我们只需提高播放速度：
The engine sound also needs to loop. That’s also very easy (there’s a property for it too):
引擎声音也需要循环播放。 这也很容易(也有一个属性)：
But there’s a catch. Many audio formats (especially compressed audio) store the audio data in fixed size frames and, more often than not, the audio data itself won’t “fill” the final frame. This can leave a tiny gap at the end of the audio file and result in clicks or glitches when those audio files get looped. Standard HTML audio elements don’t offer any kind of control over this gap and it can be a big challenge for web games that rely on looping audio.
但是有一个陷阱。 许多音频格式(尤其是压缩的音频)将音频数据存储在固定大小的帧中，而且，音频数据本身通常不会“填充”最终帧。 这可能会在音频文件的末尾留下一个很小的间隙，并在这些音频文件循环播放时导致咔嗒声或毛刺。 标准HTML音频元素无法对这种差距进行任何控制，对于依赖循环音频的网络游戏来说，这可能是一个巨大的挑战。
Fortunately, gapless audio playback with the Web Audio API is really straightforward. It’s just a matter of setting a timestamp for the beginning and end of the looping portion of the audio (note that these values are relative to the audio source itself and not the AudioContext clock).
幸运的是，使用Web Audio API进行无缝音频播放非常简单。 只需为音频循环部分的开始和结束设置时间戳即可(请注意，这些值是相对于音频源本身而不是AudioContext时钟的)。
So far, everything we’ve done has been with a source node (our audio file) and an output node (the sound destination we set early, probably your speakers), but AudioNodes can be used for a lot more, including sound manipulation or analysis. In Flight Arcade, we used two node types (a ConvolverNode and a WaveShaperNode) to make the instructor’s voice sounds like it’s coming through a speaker.
到目前为止，我们所做的一切都是通过一个源节点(我们的音频文件)和一个输出节点(我们尽早设置的声音目标，可能是您的扬声器)实现的，但是AudioNodes可以用于更多用途，包括声音处理或分析。 在Flight Arcade中，我们使用了两种节点类型(ConvolverNode和WaveShaperNode)使讲师的声音听起来像是通过扬声器传来的。
From the W3C spec:
根据W3C规范 ：
Convolution is a mathematical process which can be applied to an audio signal to achieve many interesting high-quality linear effects. Very often, the effect is used to simulate an acoustic space such as a concert hall, cathedral, or outdoor amphitheater. It can also be used for complex filter effects, like a muffled sound coming from inside a closet, sound underwater, sound coming through a telephone, or playing through a vintage speaker cabinet. This technique is very commonly used in major motion picture and music production and is considered to be extremely versatile and of high quality.
卷积是一种数学过程，可以应用于音频信号以实现许多有趣的高质量线性效果。 通常，该效果用于模拟声学空间，例如音乐厅，大教堂或室外露天剧场。 它也可以用于复杂的滤镜效果，例如从壁橱内部发出的低沉声音，水下声音，通过电话发出的声音或通过老式扬声器箱播放的声音。 这种技术非常普遍地用于大型电影和音乐的制作中，并且被认为具有极高的通用性和高质量。
Convolution basically combines two sounds: a sound to be processed (the instructor’s voice) and a sound called an impulse response. The impulse response is, indeed, a sound file but it’s really only useful for this kind of convolution process. You can think of it as an audio filter of sorts, designed to produce a specific effect when convolved with another sound. The result is typically far more realistic than simple mathematical manipulation of the audio.
卷积基本上结合了两种声音：一种待处理的声音(教师的声音)和一种称为冲激响应的声音。 脉冲响应的确是一个声音文件，但实际上仅对这种卷积过程有用。 您可以将其视为各种音频过滤器，旨在与其他声音卷积时产生特定的效果。 其结果通常比简单的音频数学运算要真实得多。
To use it, we create a convolver node, load the audio containing the impulse response and then connect the nodes.
要使用它，我们创建一个卷积器节点，加载包含脉冲响应的音频，然后连接这些节点。
To increase the distortion, we also used a WaveShaper node. This type of node lets you apply mathematical distortion to the audio signal to achieve some really dramatic effects. The distortion is defined as a curve function. Those functions can require some complex math. For
为了增加失真，我们还使用了WaveShaper节点。 这种类型的节点可让您对音频信号应用数学失真，以实现一些真正的戏剧性效果。 失真定义为曲线函数。 这些功能可能需要一些复杂的数学运算。 对于
the example below, we borrowed a good one from our friends at MDN.
在下面的示例中，我们从MDN的朋友那里借来了一个不错的东西。
Notice the stark difference between the original waveform and the waveform with the WaveShaper applied to it.
注意原始波形和应用了WaveShaper的波形之间的明显差异。
You can try it out interactively here.
您可以在此处以交互方式进行尝试 。
The example above is a dramatic representation of just how much you can do with the Web Audio API. Not only are we making some pretty dramatic changes to the sound right from the browser, but we’re also analyzing the waveform and rendering it into a canvas element! The Web Audio API is incredibly powerful and versatile and, frankly, a lot of fun!
上面的示例生动地展示了您可以使用Web Audio API做多少事情。 我们不仅可以通过浏览器对声音进行一些非常显着的改变，而且还可以分析波形并将其渲染到画布元素中！ Web Audio API的功能强大且用途广泛，坦率地说，它很有趣！
Microsoft has a bunch of free learning on many open source JavaScript topics and we’re on a mission to create a lot more with Microsoft Edge. Here are some to check-out:
微软在许多开源JavaScript主题上有大量免费学习知识，我们的使命是利用Microsoft Edge创造更多内容。 这里有一些要退房：
Microsoft Edge Web Summit 2015 (a complete series of what to expect with the new browser, new web platform features, and guest speakers from the community)
Microsoft Edge Web Summit 2015 (关于新浏览器，新的Web平台功能以及社区来宾演讲者的期望的完整系列)
Build of //BUILD/ and Windows 10 (including the new JavaScript engine for sites and apps)
// BUILD /和Windows 10的构建 (包括用于站点和应用程序的新JavaScript引擎)
Advancing JavaScript without Breaking the Web (Christian Heilmann’s recent keynote)
在不中断网络的情况下推进JavaScript (Christian Heilmann最近的主题演讲)
Hosted Web Apps and Web Platform Innovations (a deep-dive on topics like manifold.JS)
托管的Web应用程序和Web平台创新 (深入研究诸如歧管(JS)之类的主题)
Practical Performance Tips to Make your HTML/JavaScript Faster (a 7-part series from responsive design to casual games to performance optimization)
使您HTML / JavaScript更快的实用性能技巧 (从响应设计到休闲游戏到性能优化的7个系列文章)
The Modern Web Platform JumpStart (the fundamentals of HTML, CSS, and JS)
现代Web平台JumpStart (HTML，CSS和JS的基础知识)
And some free tools to get started: Visual Studio Code, Azure Trial, and cross-browser testing tools – all available for Mac, Linux, or Windows.
还有一些免费的入门工具： Visual Studio Code ， Azure试用版和跨浏览器测试工具 -所有这些工具都可用于Mac，Linux或Windows。
This article is part of the web dev tech series from Microsoft. We’re excited to share Microsoft Edge and the new EdgeHTML rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.
本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您共享Microsoft Edge和新的EdgeHTML渲染引擎 。 获取免费的虚拟机或者在你的Mac，iOS设备，Android或Windows设备上远程测试modern.IE 。
翻译自: https://www.sitepoint.com/dynamic-sound-with-the-web-audio-api/
web audio api
相关资源：Web Audio API 中文文档(官方pdf)