音频呼叫界面设计

by Nick Frazier

尼克·弗雷泽(Nick Frazier)

使用网络音频来增强您的用户界面 (Jazz up your user interface with web audio)

When people my age hear the phrase “web audio”, they probably think of Geocities sites of the 90’s with irritating sound loops playing in the background.

当我这个年龄的人听到“网络音频”一词时，他们可能会想到90年代的Geocities网站，并在后台播放令人讨厌的声音循环。

The possibilities then were limited, and sound was quickly abandoned as a component of most web experiences. Other than the occasional “experimental” site or band page, sound on the web since then has been the exception rather than the rule.

那时的可能性是有限的，声音被Swift放弃，成为大多数网络体验的组成部分。 除了偶尔的“实验”网站或乐队页面外，此后在网络上的声音一直是例外，而不是规则。

Web audio has come a long way since then, though. With these advances we now have the opportunity to start looking at sound as a real possibility for the web.

从那时起，网络音频已经走了很长一段路。 有了这些进步，我们现在有机会开始将声音视为网络的真正可能性。

And not just for media-heavy sites. Video game designers have for years understood the value of sound design in even the most mundane menus and user interface interactions. See for example the rich sound design of the Destiny character menus.

不仅限于大量媒体的网站。 多年来，视频游戏设计师已经理解声音设计在即使是最平凡的菜单和用户界面交互中的价值。 例如，请参阅“ 命运”角色菜单的丰富声音设计。

While web interactions are not quite the same, with the continued emphasis on the user experience there is every reason to consider engaging the auditory sense as part of the package.

尽管网络交互并不完全相同，但是随着对用户体验的持续关注，我们有充分的理由考虑将听觉作为包装的一部分。

That doesn’t mean we should start adding firework blasts and blaring trumpets to our landing page just because we can. Unexpected and unwanted sound is a deal-breaker.

这并不意味着我们应该仅仅因为可以就开始添加烟花爆破和吹喇叭。 意外的和不想要的声音会破坏交易 。

So the first question to ask may well be, “Do my users expect sound?” In the case of a game, music, or similar site, they probably do. If so, adding sound to your user interface could be a welcome area of development. (You still probably want to add a master mute button, though.)

因此，第一个要问的问题可能是“我的用户是否期望声音？” 如果是游戏，音乐或类似网站，则可能会这样做。 如果是这样，向您的用户界面添加声音可能是一个受欢迎的开发领域。 (不过，您可能仍想添加一个主静音按钮。)

It is with this frame of mind that I began to explore the addition of subtle sound design into some of my web user interfaces. I had a few goals:

正是基于这种思路，我开始探索在某些Web用户界面中添加微妙的声音设计。 我有一些目标：

• The ability to play a sound on an event (e.g. rollover, click)
  在事件上播放声音的能力(例如，翻转，点击)
• Good performance, low latency
  良好的性能，低延迟
• Good browser coverage
  良好的浏览器覆盖率
• Few to no distracting side effects or annoyances (to avoid Geocities syndrome)
  很少或没有分散注意力的副作用或烦恼(避免出现Geocities综合征)

What follows is an overview of the best practices I’ve come across during my experimentation, based on the current state of the web.

接下来是根据网络的当前状态概述我在实验过程中遇到的最佳实践的概述。

Keep in mind that audio on the web is still a relatively unexplored territory, so there is still much to create and discover in the field.

请记住，网络上的音频仍然是一个相对未开发的领域，因此在该领域仍然有很多要创建和发现的东西。

HTML音频元素 (The HTML Audio Element)

Up until the advent of HTML5, audio on the web was best described as “primitive.” The only way to incorporate sound into a site was with a plug-in like Flash.

在HTML5出现之前，最好将网络音频描述为“原始”。 将声音整合到网站中的唯一方法是使用Flash之类的插件。

HTML5 brought with it the <audio> tag — a modest but important step up. This tag was designed to allow developers to easily stream sounds and music right from the page with one line of code. Simple controls could be embedded by adding one attribute:

HTML5附带了<aud io>标签，这是一个适度但重要的步骤。 此标签旨在使开发人员可以使用一行代码轻松地从页面直接流式传输声音和音乐。 通过添加一个att ribute可以嵌入简单的控件：

<audio id=”snare” src=”snare-2.mp3" controls></audio>

The result:

结果：

By itself, the usefulness of this tag is limited. But HTML5 also introduced a JavaScript API, HTMLAudioElement, that provides the ability to programmatically play sounds.

就其本身而言，此标签的用途是有限的。 但是HTML5还引入了JavaScript API HTMLAudioElement ，该API提供了以编程方式播放声音的功能。

Adding sounds to events using this interface looks like this:

使用此界面向事件添加声音如下所示：

function playSound () {   document.getElementById(“snare”).play(); }

This allows you to trigger a sound using JavaScript.

这使您可以使用JavaScript触发声音。

Here’s an example of this in use:

这是一个正在使用的示例：

Try clicking twice, though, and you will immediately experience one of the major drawbacks to HTML audio.

但是，尝试单击两次，您将立即遇到HTML音频的主要缺点之一。

With HTML audio, playing a sound more than once is tricky. If you used only the play() function and one source, the browser will wait until it finishes playing the sound before it allows you to trigger another sound. In fact, even with multiple sources, HTML audio has limited ability to play several sounds at once.

使用HTML音频，多次播放声音非常棘手。 如果仅使用play()函数和一个源，则浏览器将等待直到完成播放声音，然后才允许您触发另一种声音。 实际上，即使有多个来源，HTML音频也具有一次播放几种声音的能力。

One trick I found to enable faster triggering (using only one source) is to always stop the sound before playing it. Note the API doesn’t include a “stop” function, but reloading the file does the trick:

我发现启用更快的触发(仅使用一个来源)的一个技巧是始终在播放声音之前停止声音。 请注意，API不包含“停止”功能，但是重新加载文件可以解决问题：

function playSound () {   document.getElementById(“snare”).load();  document.getElementById(“snare”).play();}

Now we should be able to hit those rapid fire snares like the next 9th Wonder:

现在我们应该能够像下一个9th Wonder一样Swift击中网罗：

Choosing the best audio format for web use was once a tricky task. Cross-browser compatibility of formats was all over the place. You usually had to have multiple versions of the same files, with different extensions, at the ready to be prepared for whatever browser your site might encounter.

为网络选择最佳的音频格式曾经是一项艰巨的任务。 跨浏览器的格式兼容性无处不在。 通常，必须准备好具有相同扩展名的相同文件的多个版本，以便为您的网站可能遇到的任何浏览器做好准备。

Now it’s simpler: use MP3s.

现在更简单：使用MP3。

Other than Internet Explorer 8 (which is all but dead) and Opera Mini (which doesn’t support audio anyways), MP3 files should work just about anywhere.

除了Internet Explorer 8(几乎全部消失)和Opera Mini(无论如何都不支持音频)之外，MP3文件应该可以在任何地方使用。

They’re also compact. If all you have are wav files or some other format, go ahead and use a conversion utility (I use MH Audio Converter) and get everything standardized to mp3.

它们也很紧凑。 如果您只有wav文件或其他格式的文件，请继续使用转换实用程序(我使用MH Audio Converter )，然后将所有内容标准化为mp3。

网络音频API：巨大的飞跃 (Web Audio API: A Giant Leap)

HTML audio provides a passable solution to sound. Particularly, I found that using it through a JavaScript library called Buzz made it a flexible and simple option.

HTML音频为声音提供了一种可行的解决方案。 特别是，我发现通过称为BuzzJavaScript库使用它使其成为一种灵活而简单的选择。

But there are still numerous drawbacks:

但是仍然存在许多缺点：

• Playing multiple sounds in quick succession is a subpar experience
  快速连续播放多种声音是一种出色的体验
• The ability to manipulate the sound is limited
  操纵声音的能力是有限的
• Syncing sounds is a pain
  同步声音很痛苦

Enter the Web Audio API. Web Audio is the proper successor to HTML Audio, and solves some of the problems of the latter while also adding a vast amount of flexibility.

输入Web Audio API。 Web Audio是HTML Audio的适当继承者，它解决了HTML Audio的一些问题，同时还增加了大量的灵活性。

With Web Audio, developers now have a robust set of tools to create sound engines on the level of platform games and pro software synthesizers.

借助Web Audio，开发人员现在拥有一组强大的工具，可以在平台游戏和专业软件合成器级别上创建声音引擎。

Using Web Audio instead of HTML Audio, we can create a button click sound that layers on top of itself rather than clipping, as this visualization demonstrates:

使用Web Audio而不是HTML Audio，我们可以创建一个按钮单击声音，该声音在其自身之上分层而不是剪辑，如以下可视化演示所示：

There are a couple catches, though, one of which I ran up against immediately: Web Audio is complicated. If you crack open one of the many excellent API tutorials online (I recommend Boris Smus’s book Web Audio API, the entire text of which is available for free on the O’Reilly site), the first thing you’ll notice is that merely playing a single sound can require a couple dozen lines of code.

但是，有两个问题，我立即遇到其中一个问题：Web Audio非常复杂。 如果您在线打开了许多优秀的API教程之一(我推荐Boris Smus的书Web Audio API ，其完整文本可以在O'Reilly网站上免费获得)，那么您会注意到的第一件事是，仅播放单个声音可能需要几十行代码。

The solution I found to this is SoundJS. SoundJS, part of the CreateJS suite of tools, is a powerful sound library with a gentle learning curve. Part of its power is in abstracting away many of the details of the lower level audio APIs, such that the same code can be run on HTML Audio, Web Audio, or even Flash audio, depending on what the user’s browser supports.

我发现的解决方案是SoundJS 。 SoundJS是CreateJS工具套件的一部分，是一个功能强大的声音库，具有轻松的学习曲线。 它的部分功能是抽象出较低级音频API的许多细节，以便可以根据用户的浏览器支持的功能，在HTML音频，Web音频甚至Flash音频上运行相同的代码。

But I’ve found that where it really excels is in its handling of Web Audio. Now instead of writing a page of code to play a sound, you can write this:

但是我发现它真正擅长的地方在于处理Web Audio。 现在，您无需编写代码页面即可播放声音，可以编写以下代码：

function loadSound () {   createjs.Sound.registerSound(“snare-2.mp3”, soundID); }

function playSound () {   createjs.Sound.play(soundID); }

Try it out and listen to the difference (and sonic improvement):

试试看，听一下区别(和声音改善)：

The other major catch is that the Web Audio standard is still in flux — it’s currently a working draft, and there is no support in Internet Explorer.

另一个主要问题是Web Audio标准仍在不断变化中-它目前是一个工作草案，并且Internet Explorer中不提供支持。

At a finer grain, there are currently some additional limitations to audio in general, most notably on mobile devices:

总体而言，目前对音频存在一些其他限制，尤其是在移动设备上：

• With iOS devices, sound is initially locked and will not play until a user-initiated event occurs. This is apparently a measure to reduce bandwidth.
  在iOS设备上，声音最初是锁定的，直到用户启动事件发生后才会播放。 这显然是减少带宽的一种措施。
• With Android devices, there is no control over audio volume, and you can only play audio as part of a user-initiated event.
  在Android设备上，无法控制音量，您只能在用户启动的事件中播放音频。

These limitations may not matter as much with the click events, like I’ve demonstrated so far, but they may come into play once more sophisticated UI sound design is employed. Which brings us to our last step.

这些限制可能与单击事件无关紧要，就像我到目前为止已经演示的那样，但是一旦采用了更复杂的UI声音设计，它们可能就会发挥作用。 这使我们进入了最后一步。

网络音频走得更远 (Going Further with Web Audio)

When I started thinking about “UI Sound Design,” my first thought was click events. But once that was solved, I wondered about other possibilities. What about rollover events? Or scroll events? Or something completely different? With Web Audio, I’ve found that there are a world of possibilities.

当我开始考虑“ UI声音设计”时，我首先想到的是点击事件。 但是，一旦解决，我想知道其他可能性。 过渡事件呢？ 还是滚动事件？ 还是完全不同的东西？ 使用Web Audio，我发现存在无限的可能性。

Web Audio allows you to add several different types of pro-level effects to your audio chain. For example:

网络音频使您可以向音频链添加几种不同类型的专业级效果。 例如：

• BiquadFilterNodes can be used as highpass/lowpass/notch filters

  BiquadFilterNodes可以用作高通/低通/陷波滤波器

• ConvolverNodes can be used for reverb

  ConvolverNodes可用于混响

• DelayNodes can be used for delay effects

  DelayNodes可用于延迟效果

• StereoPannerNodes allow for panning left and right

  StereoPannerNodes允许左右平移

• AnalyserNodes enable data analysis and visualization

  AnalyserNodes支持数据分析和可视化

What if, I thought, you used a BiquadFilterNode in conjunction with an event handler that tracks mouse proximity to a button? You could change a sound based on how close to the button your mouse pointer is. Moog-style filter sweeps in your UI — how cool would that be?

我想，如果您将BiquadFilterNode与事件处理程序结合使用，该事件处理程序跟踪鼠标与按钮的接近程度，该怎么办？ 您可以根据鼠标指针与按钮的接近程度来更改声音。 Moog样式的过滤器在您的UI中扫荡 -那有多酷？

It turns out that SoundJS makes this, too, relatively easy (although tweaking the library’s Web Audio context is not as well documented as the rest of the API). Using some of the more advanced parts of the API, I found that you can “insert” a filter into SoundJS’s Web Audio setup, and fiddle to your heart’s content. Adjust the filter based on mouse movements, and voila, a proximity filter:

事实证明，SoundJS也使此操作相对容易(尽管对库的Web Audio上下文的调整不如API的其余部分所记录)。 通过使用API​​的一些更高级的部分，我发现您可以“将”过滤器“插入”到SoundJS的Web Audio设置中，并摆弄您内心的内容。 根据鼠标的移动和近距离过滤器来调整过滤器：

If you want to experiment yourself, check out the SoundJS code in the above pen. The proximity algorithm is based on this CSS-Tricks snippet from Chris Coyier.

如果您想尝试一下自己，请查看上述笔中的SoundJS代码。 接近算法是基于这个 CSS-技巧克里斯Coyier片段。

天空是极限 (The Sky’s the Limit)

With Web Audio, web developers seem to finally have a deep and powerful toolbox for designing and manipulating audio. It’s also ripe for developing new ideas and techniques, as it’s really just beginning to be incorporated into modern web user experiences.

有了Web Audio，Web开发人员似乎终于有了一个强大而强大的工具箱，用于设计和处理音频。 开发新思想和新技术的时机已经成熟，因为它实际上才刚刚开始融入现代Web用户体验中。

My own explorations scratch the surface. I’m continuing to search for new ways to engage others with sound, and I look forward to seeing where things go next.

我自己的探索从头开始。 我一直在寻找新的方法来吸引其他人的声音，并且我期待看到下一步的发展。

其他资源 (Additional Resources)

SoundJS Visualizer Demo: The source code for this demo is the best resource if you want to start pulling apart the SoundJS Web Audio graph

SoundJS Visualizer演示 ：如果要开始分解SoundJS Web音频图，则此演示的源代码是最佳资源。

Designing Sound: Sound design inspiration from the masters.

设计声音 ：来自大师的声音设计灵感。

Chrome Experiments: Another amazing collection of design (both visual and auditory) inspiration.

Chrome实验 ：另一个令人惊叹的设计灵感集(视觉和听觉)。

A version of this story was originally published at fraziern.github.io on August 14, 2016.

该故事的版本最初于2016年8月14日发布在fraziern.github.io 。

翻译自: https://www.freecodecamp.org/news/web-audio-for-the-user-interface-1592687f898c/

音频呼叫界面设计