为 Web 应用添加 UI 音效

前几天我读了 Raphael Salaja 的文章《Web 上的声音》。这篇文章阐述了声音在 Web 应用中的重要性，以及如何通过适度地集成声音来显著提升用户体验，例如提供反馈和改善可用性。

这篇文章写得非常好，我强烈推荐大家阅读。不过，我很好奇他们是如何实现这些声音效果的，因为文章本身并没有提到任何库或工具。于是，我像往常一样深入研究了源代码，发现他们使用了一个名为 SND（也是开源的）的神奇库来实现这些声音效果。

SND 非常有趣，它是一个小巧的 JavaScript 库，可以非常轻松地为 Web 应用添加 UI 声音。它提供了一个简单的 API，可以为各种 UI 交互播放声音，例如按钮点击、通知、警告、错误等等。

正如文章标题所示，使用 SND 为 Web 应用添加声音真的只需要“一瞬间”。

SND 采用了一种有趣的音频使用方式：将库集成到你的应用后，只需在需要播放声音的 HTML 元素中添加预定义的类即可。

SND 提供三种音频套件供选择，每种套件都具有不同的声音特征：正弦波、钢琴和工业音乐。

例如，你可以像这样将 SND 库与正弦波套件集成：

<script src="https://cdn.jsdelivr.net/gh/snd-lib/snd-lib@v1.2.4/dist/browser/snd.js?kit=01"></script>

这里，kit=01 查询参数表示我们要使用正弦波音色库。类似地，你可以使用 kit=02 选择钢琴音色库，使用 kit=03 选择工业音色库。

接下来，如果你想在点击按钮时播放点击声，只需像这样将 snd__button 类添加到按钮元素即可：

<button class="snd__button">点击我</button>

这样，每次点击按钮时，它都会播放点击声，就这么简单。无需任何额外的 JavaScript 代码！

这里有一个我创建的 CodePen 演示，展示了 SND 的工作原理。

好处在于，即使连续点击，声音也能流畅播放，没有任何延迟或中断。所有音频播放的细节处理都由库本身完成。

此外，如果需要更精细地控制声音，可以使用 SND 提供的 JavaScript API。例如，你可以像这样以编码方式播放声音：

const snd = new Snd();

snd.load(Snd.KITS.SND01).then(() => {
  // you can add listeners to UI events:
  document.getElementById("btn").addEventListener("click", () => {
    // snd.play(Snd.SOUNDS.CELEBRATION);
    snd.playNotification();
  });
});

关于 SND，我还注意到它使用了一种叫做音频精灵的技术来优化声音的加载和播放。SND 不会为每个 UI 交互单独加载音频文件，而是将多个声音合并成一个音频文件（精灵），并根据需要播放该文件的特定片段。这种方法减少了 HTTP 请求的数量，提高了性能。

总的来说，我对 SND 印象深刻，将来在需要 UI 音效的 Web 项目中，我一定会考虑使用它。