作者：当我们想到 HTML 应用程序中的声音时，可能会想到两件事：我们记得所有那些在页面加载时开始播放大声、令人讨厌的背景音乐的网站，然后我们想到音乐播放应用程序。
然而，声音可以更丰富：在构建沉浸式应用程序体验时，它可以成为一个至关重要的属性。它可以增强触觉反馈，或向用户传达活动或状态变化。当收到新电子邮件时发出一声提示音，或者在发生错误时发出一声取消提示音，可以让最终用户更容易理解。
在 HTML5 之前，大多数开发人员不得不求助于 Flash、Quicktime、Real Player 或 Windows Media Player 等插件技术来播放音频。当然，这些技术需要在用户的计算机上安装，并且插件处于活动状态。
使用 HTML5，我们有一个音频元素，它原生支持声音播放。与任何 HTML 元素一样，您甚至可以通过提供回退内容来与旧技术配合使用。例如，只需链接到音频文件即可。
由于并非所有浏览器都支持相同的音频格式（MP3 不是免费格式，因此无法在开源浏览器中解码），因此您可以提供不同格式的相同音频。
示例
如果您确实需要为所有浏览器（包括那些不理解 HTML5 的浏览器）提供播放器 - 我在这篇博文中收集了一些信息。
当您的应用程序检查 HTML5、Canvas 和您的功能所需的所有其他内容是否受支持时，向后兼容性就不那么令人担忧了，但是您仍然可能存在跨浏览器兼容性问题，因为浏览器供应商尚未完全达成对通用功能实现的共识。也就是说，所有主流浏览器都提供了对音频的基本支持。
您无需在 HTML 中包含音频元素，也可以在 JavaScript 中动态创建它们。
var aSound = document.createElement('audio');
aSound.setAttribute('src', 'PlayMe.ogg');
aSound.load()
但是，在 HTML 中使用<audio>标签可能有一些优势。
- 使用该标签可以增强标记的语义完整性。
- 它使您的代码更易于阅读和理解。
<audio>标签可以显示控件，以便用户可以使用本机控件播放音频并在其中查找，这些控件也可以通过键盘访问。<audio>标签有一个可选的preload属性，它告诉浏览器在用户开始播放音频之前加载音频。- 浏览器引用资产的加载顺序不同。通过利用该顺序，您可以帮助提高应用程序的性能。
以下是一些在 HTML5 中使用<audio>标签的示例。
在这种情况下，音频元素不可见，并且 MySound.ogg 只能通过在元素实例上调用 play 方法来播放。
document.getElementById('MySound').play();
通过添加controls属性，您可以显示播放器控件，以便用户可以通过与它们交互来播放音频文件。
这些控件因浏览器和操作系统而异，但都具有以下图像中所示的相同功能。
您可以使用简单的 JavaScript 代码在适当的时候轻松隐藏或显示音频元素的控件（例如，当 UI 状态发生变化时）。
var myAudio = document.getElementById( "TimerBellSound" );
if ( myAudio.hasAttribute("controls") ) {
myAudio.removeAttribute("controls") ;
}
else {
myAudio.setAttribute("controls", "controls")
}
正如 Terrill Thompson 在他的博文中所解释的 HERE，我们也可以轻松创建自定义播放器。这不仅为我们提供了定义自己的用户界面的灵活性，还让我们能够解决可访问性问题。他的播放器如下所示，并且在浏览器和操作系统之间具有统一的外观和风格。
那么声音可以在您的应用程序中做什么？例如，考虑以下应用程序原型。
此应用程序将成为运动员的计时器。使用时，运动员不会坐在运行该应用程序的设备前。它将在他们的电脑、平板电脑或手机上运行，虽然他们可能会偶尔查看一下时间，但大多数情况下，他们将依靠声音反馈来指示何时开始锻炼、何时休息以及何时增加或减少锻炼强度。
HTML5 中的音频元素使向您的应用程序添加声音变得既简单又直接。
3 条评论