悬停播放声音 – Web Audio API 版

我们都对 HTML5 canvas 的功能印象深刻。创建一种标准化和逻辑化的 2d 绘图操作方法的想法为一个令人惊叹的新世界打开了大门，在这个世界里，一个程序员可以学习一门语言并开发出可以部署到所有相关平台的惊人产品！想想这对我们来说有多重要。现在想想谁会想要一个拥有错误、故障的音频系统、只在你点击后几秒钟发出声音并且有时完全忘记发出声音的惊人的图形应用程序？如果你走 HTML5 <audio> 元素路线，你就会得到这种产品（*尤其是在移动平台上*）。在桌面浏览器中它更好，但不幸的是，由于本文范围之外的原因，它永远不会完美。但截至目前，对于桌面来说，仍然存在希望。未来移动应用程序也存在希望。这个希望的名字是……

Web Audio API

Web Audio API 旨在实现高精度和低级访问。你实际上可以将数据位写入样本。我不确定样本是什么，但我认为它与麦克风在特定时间点对空气的压力有关（也就是麦克风的驱动器位置）。如果你问我，这相当底层。在 Google Chrome 中，所有音频功能都由一个单独的线程处理，以确保不会出现故障。

8 月 21 日，Mozilla 开始公开宣布他们正在放弃其 最初的、开创性的“音频数据 API”，并开始在其浏览器中实现 Google 的“Web Audio API”。但这意味着，在撰写本文时，你需要为 Firefox 使用一个后备方案。

你可以从 Chris Wilson 的这个 Google I/O 演讲中听到很多有用的信息

如何使用它

不幸的是，与普通的 HTML5 音频元素相比，你需要使用更多 JavaScript 才能使用 Web Audio API，但通常情况下，Web Audio API 的精度是必不可少的。

首先我们需要加载声音，这可以通过这样的函数来完成

// you'll put the PCM audio in here
var audioBuffer = null;  
var context = new webkitAudioContext();

function loadDogSound(url, variableToBufferSound) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.responseType = 'arraybuffer';

  // Decode asynchronously
  request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
      variableToBufferSoundIn = buffer;
    }, onError);
  }
  request.send();
}

然后我们播放缓冲区，使用这样的函数

function playSound(buffer) {

  // creates a sound source
  var source = context.createBufferSource();

  // tell the source which sound to play
  source.buffer = buffer;          

  // connect the source to the context's destination (the speakers)           
  source.connect(context.destination);       
  
  // play the source now
  source.noteOn(0);                          
}

对于我们这些只是想播放简单的鼠标悬停音效的设计师来说，这实在太多了。幸运的是，我为使用 Web Audio API 搭建了一个 小型 JavaScript 框架。

使用这个新的 API，只需要做以下几件事：

1. 创建一个 AudioContext
2. 将声音加载到该 AudioContext 中
3. 播放声音

所有这些步骤都是单行代码！包含了对旧 HTML5 的后备支持！

<script src="javascripts/webAudioApiForDesigners.js"></script>

<script>
// 1
var context = initializeNewWebAudioContext();

// 2
context.loadSound('audio/beep.ogg', 'beep');

$("#nav-one a")
  .mouseenter(function() {
    // 3
   context.playSound('beep');
  });
</script>

查看演示

HTML5 音频元素可能是不好的选择的原因列表

• 声音在错误的时间听到的延迟问题
• 同时播放多个声音文件时出现无法解释的爆裂声
• 可以同时播放的 HTML5 音频元素数量有限

HTML5 可能更适合你的项目的原因

• 使用简单直接
• 可以很好地播放背景音乐
• 最终（大胆猜测：不早于未来 3 年内）这些 html DOM 元素的错误将被修复

更多信息

HTML5 Rocks 提供了一个 可靠的入门介绍。