Yahoo!用戶界面博客（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鏈接“只是工作”：銳+ SoundManager 2

“漸進增強”鏈接的MP3，將在原地發揮單擊時，有事必須攔截瀏覽器的正常下載行動，隨後處理請求;通過結合JavaScript和Flash處理負荷和演奏的MP3內容，這可以非常有效地進行。

在個人的追求，跨瀏覽器的DHTML遊戲早在2002年的音頻控制，我開發了一個JS +閃存音頻API調用SoundManager。 因為發展到包括視頻， SoundManager 2實現和擴展Flash的本地聲音API和公開的JavaScript。 結果是cross-browser/platform的腳本音頻功能，它可以幫助彌合差距JS驅動的聲音，直到得到廣泛支持的HTML 5。

結合YUI的SoundManager 2 DOM和事件公用事業，你有一個有效的解決方案嵌入和控制音頻，這能優雅地降低到瀏覽器下載或嵌入播放器。

實際的例子：可播放的MP3鏈接

下面的演示使用YUI和SoundManager 2，以提高MP3鏈接，使其可玩聯。 YUI的事件公用事業攔截點擊鏈接指向MP3文件然後使用SoundManager的API加載和播放，然後返回“假”的有關網址，防止瀏覽器加載鏈接。 隨後點擊切換播放/暫停狀態。

在事件的JavaScript / Flash是不存在，或者如果一切順心，瀏覽器只會落空，並加載像往常一樣的MP3鏈接。

• 演示1（實際）： 播放的MP3鏈接內聯

你的UI添加音頻

基於JavaScript的動畫，過渡和動畫效果的網頁界面設計和增加流動性越來越普遍。 巧妙的應用於音頻，可以補充和進一步增強的用戶界面，使我們的經驗變得更有意義。

在某些應用中，在UI的反饋形式的聲音可以適當和有益的用戶體驗。 音效是常見的基於Flash的網站和基於網絡的遊戲，桌面遊戲音頻通常是一個講故事的重要組成部分。

.. 但也不要做

重要的是要知道何時停止。 回想一下動畫片“正在建設中”。的GIF？ 如何眨眼標籤？ 跑馬燈文字？ 有些東西是最好的獨處。 不是每一個HTML頁面，需要移動，閃爍，幻燈片，閃光燈和嘈雜的是在同一時間，甚至是“好玩”是最好的適度應用。 惱人的自動播放音樂或噪音的用戶可以迅速導致放棄你的網站。

有可能是很好的理由，如標準的HTML表單控件和元素沒有音效或與之相關的通知。 也許是“沉默是金”，這是最好的網站是默認情況下，安靜的地方，不被惱人的分散。

作為一個值得注意的例外，以“沉默的網頁”為主題，Internet Explorer通常會使得“咔嗒”聲時發生頁面導航，大概是為了通知用戶已經開始行動。 這在近年來變得更加柔和，但仍然存在，似乎仍然困擾一些用戶這一天。

“趣”為例：在嘈雜的DOM

儘管沉默參數，以下是一個例子，它可能是像有“噪音”的形式元素，​​按鈕和提供聲音反饋，他們正在使用的DOM元素。 新穎性，是一定要快速穿脫，但它確實增加了一個孩子氣的有趣的UI元素。

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

展望：HTML 5的

本地<audio>和<video>支持將意味著無需依靠第三方插件嵌入和控制更多的媒體格式，在瀏覽器內，它會容易得多。 此外，廣泛的Ja​​vascript API，應鼓勵開發商創造越來越多的創新經驗。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！