雅虎的用户界面博客（YUIBlog）

加强与音频锐的应用

声音是主要的感官和日常生活的一个重要组成部分之一，但主要是在网络上被忽略。 Web开发人员都知道，当涉及到HTML，音频添加到一个网站，应该不是那么容易。 这是为什么？ 以下是嵌入的声音，一些想法和一些演示嵌入和控制使用YUI的声音从Javascript的历史问题的一些想法。

演示

如果你像我一样，你可能希望看到一些有趣的东西的前端， 因为读的是工作 ，工作是枯燥的！ ;）感觉自由发挥与演示，然后再阅读的细节。

• 演示1（实践）： 播放MP3链接内嵌
• 演示2（FUN）： 嘈杂的DOM

一个HTML和“多媒体”的简史

网络是相当不错的视觉表现。 这是很容易创建，设计和嵌入图像，文本，并在HTML文件中的链接。 的原生支持HTML 4中，音频和视频今天的媒体格式 - 或者更确切地说，<audio>和<video> - 显眼失踪。

HTML 5应带来的音频和视频嵌入接近/> <img，在不那么遥远的将来简单。 与此同时，我们不得不求助于创造性地开展工作解决的HTML - 5 -域跨越今天的普通的HTML 4，如音频/视频功能支持的浏览器。

嵌入音频的问题（HTML 4）

对于今天的网站上的音频，开发人员常常显示一个HTML链接直接到MP3文件的清单。 这种方法简单，普遍理解和建立索引的搜索引擎，但默认情况下，一个混乱和不一致的浏览体验。

一般提示用户右键单击“另存为”，最后从他们的桌面上打开文件，或点击该链接，并有自己的浏览器下载和打开的MP3文件。 常规的“点击”一般的嵌入播放器的一个新的页面打开或启动一个外部应用程序，如QuickTime或Windows媒体播放器。

不仅是“赤裸裸”的MP3链接额外的工作，并为用户混淆，浏览器的处理方法是一种分心，从他们离开您的网站的经验。

使用<OBJECT> / <EMBED>是另一种通用的方法来直接嵌入MP3或其他内容，但再次遭受不一致的问题，开发商将不知道可能会出现在该区域的网页，用户可以的负载，以便处理该文件类型的应用程序可能有任何的阵列 - 在这种情况下，可能是相同的QuickTime或Windows媒体播放器将处理直接下载将显示在您的网页。 同样，没有一个伟大的解决方案。

闪存部件有时被用来作为一个嵌入的MP3内容的解决方案，但用户界面和外观往往是100％基于Flash的，而不是HTML和CSS为基础的，从而更难以为大多数Web开发人员定制。 HTML 5的标准为基础，以CSS换肤和编写脚本的音频/视频内容应该改变。

在此期间，一些有创意的解决方案可以被用来获得更多的“网络开发人员友好的”音频部件。

制作的MP3链接“只是工作”：YUI + SoundManager 2

要“逐步的增强”链接的MP3，将发挥在的地方被点击时，东西必须拦截浏览器的正常下载动作和后处理的要求，通过结合JavaScript和Flash处理加载和MP3内容播放，这可以做得非常有效。

在个人的追求，跨浏览器的DHTML游戏早在2002年的音频控制，我开发了一个JS +闪存音频API，称为SoundManager。 以来发展到包括视频， SoundManager 2实现和扩展闪存的本机声音API，并公开给JavaScript。 结果是cross-browser/platform脚本的音频功能，它可以帮助的桥梁，直到被广泛支持的HTML 5 JS驱动声音的差距。

结合SoundManager 2 YUI的DOM和事件实用程序，您有一个有效的解决方案可以优雅地降低浏览器下载或嵌入播放器嵌入和控制音频。

实际的例子：可播放MP3链接

下面的演示使用YUI和SoundManager 2，以提高MP3的链接，使其可玩的内联。 YUI的事件公用事业拦截点击链接指向MP3文件，然后使用SoundManager API来加载和播放相关的URL，然后返回“假”，以及防止浏览器加载链接。 随后的点击将切换播放/暂停状态。

在事件的JavaScript / Flash是不存在的，如果别的出错，浏览器只会落空和负载像往常一样的MP3链接。

• 演示1（实践）： 播放MP3链接内嵌

您的UI中添加音频

基于JavaScript的动画，过渡和动画效果，增加流动性Web界面设计和越来越普遍。 威风的应用音频可以补充和进一步加强的用户界面，使经验更有意义。

在某些应用中，用户界面​​反馈的形式中的声音，可适当和有益的用户体验。 音效共同为基于Flash的网站和基于Web的游戏，并在桌面游戏音频中通常是一个讲故事的重要组成部分。

.. 但不要过分做

重要的是要知道何时停止。 回想一下动画片“正在建设中”的GIF？ 闪烁标记如何？ 滚动字幕？ 有些东西是最好单独留在家中。 并不是每一个HTML页面，需要移动，闪烁，幻灯片， 闪光灯和嘈杂的同时;甚至是“好玩”是最好的适度应用。 恼人您的用户自动播放音乐或噪声，可迅速导致放弃你的网站。

有可能是很好的理由，如标准的HTML表单控件和元素没有音响效果或与他们有联系的通知。 也许“沉默是金”，这是最好的，网络是一个安静的地方，默认情况下，恼人的和分散的。

作为一个明显的例外，以“沉默的网页”为主题，Internet Explorer通常会使得“咔嗒”的声音，当发生页面导航，大概是为了通知用户的行动已经开始。 这已成为近代更静音，但仍然存在，仍然似乎惹恼了一些用户这一天。

“趣”的范例：嘈杂的DOM

尽管沉默的参数，下面是它可能会像什么“噪音”的形式元素，​​按钮和作为他们正在使用的DOM元素提供声音反馈的一个例子。 求新肯定是快速穿脱，但它确实幼稚有趣的元素添加到UI。

• 演示2（FUN）： 嘈杂的DOM

展望未来：HTML 5

本地人的<audio>和<video>支持，将意味着它会更容易嵌入和控制更多的媒体格式，无需依靠第三方插件在浏览器内。 此外，一个广泛的JavaScript API应该鼓励开发人员创建越来越多的创新经验。

谈话： bloglines | technorati

分享和扩展： 书签del.icio.us Digg它！ | 书签交易！