4.1 音頻

4.1.1 音頻格式

常見的音頻格式有Wave、AIFF、MIDI、AU、MP3、OGG等。

1．Wave

Wave音頻的擴展名為.wav，是錄音時使用的標準的WINDOWS文件格式，是一種由Microsoft和IBM聯合開發的用于音頻數字存儲的標準，它采用RIFF文件格式結構，非常接近于AIFF和IFF格式。

2．AIFF

AIFF（Audio Interchange File Format）音頻的擴展名是.aiff或.aif，是一種文件格式存儲的數字音頻（波形）的數據。AIFF支持各種比特決議、采樣率和音頻通道。它是Apple公司開發的一種聲音文件格式，被Macintosh平臺及其應用程序所支持。

3．MIDI

MIDI（Musical Instrument Digital Interface）音頻的擴展名為.mid，是20世紀80年代初為解決電聲樂器之間的通信問題而提出的。MIDI是編曲界最廣泛的音樂標準格式，可稱為“計算機能理解的樂譜”。它用音符的數字控制信號來記錄音樂。

4．AU

AU音頻擴展名為.au，是為UNIX系統開發的一種音樂格式，和WAV非常相像，在大多數的音頻編輯軟件中也都支持此音樂格式。在Java自帶的類庫中能得到播放支持。

5．MP3

MP3（MPEG-1 Audio Layer-3）音頻擴展名為.mp3，是最流行的音樂文件格式。它大幅度地降低了音頻數據量，而對于大多數用戶來說重放的音質與最初的不壓縮音頻相比沒有明顯下降。

6．OGG

OGG（OGGVobis）音頻擴展名為.ogg，類似于MP3等的音樂格式。它完全免費、開放和沒有專利限制。OGG文件格式可以不斷地進行大小和音質的改良，而不影響原有的編碼器或播放器。

7．MPEG-4 Audio

MPEG-4 Audio音頻擴展名為.m4a，純音頻的MPEG-4格式使用了先進的音頻編碼技術ACC（Advanced Audio Coding）的編碼器，得到了QuickTime、iTunes等軟件和iPod、iPad等移動設備的支持。

4.1.2 audio元素

到目前為止，仍然不存在網頁上播放音頻的標準，在HTML5之前，大多數音頻是通過插件播放的，例如Flash，但是并非所有瀏覽器都安裝有符合要求的插件。HTML5中通過audio元素來播放聲音文件或者音頻流。目前，audio元素支持OGG、MP3、WAV 3種音頻格式，audio元素具體支持的音頻還和瀏覽器有關，例如Chrome 3.0支持OGG和MP3格式的音頻。audio元素插入單個資源音頻的使用方法如下：

<audio>與</audio>之間的內容是供不支持audio元素的瀏覽器顯示的。

audio元素允許插入多個資源音頻，瀏覽器將使用第一個可以識別的格式，使用方法如下：

audio元素的常用屬性包括：

● autoplay——如果出現該屬性，則音頻就緒后開始自動播放。

● controls——如果出現該屬性，則向用戶顯示播放的控制條，例如播放、暫停、定位、時間顯示、音量控制、全屏切換等常用控件。如果開發人員不希望使用默認的控制條，也可以使用JavaScript自定義控制條。

● loop——如果出現該屬性，音頻自動循環播放。

● muted——如果出現該屬性，音頻靜音。

● preload——如果出現該屬性，則音頻在頁面加載時加載，并預備播放。如果出現autoplay屬性，則此屬性無效。

● src——音頻資源的URL。

● readyState——用于返回音頻當前播放位置的就緒狀態。

● volume——音頻資源的播放音量，范圍為0.0～1.0，0.0為靜音，1.0為最大音量。

● currentTime——音頻的當前播放位置，返回值為時間，單位為秒（s）。

● duration——音頻的可持續時間，單位為秒（s）。

audio元素的使用示例可參考audio.html。

audio.html：

audio.html在Chrome瀏覽器中的顯示效果如圖4-1所示，單擊播放按鈕后會播放音頻。

4.1.3 JavaScript控制Audio對象

除了可以直接在頁面中添加audio元素之外，還可以使用JavaScript腳本控制audio元素，使頁面更加自由靈活地播放音頻文件。

audio元素是Audio對象的實例，是HTML5中的新對象，可以通過document對象的getElementById()來訪問audio元素，也可以通過document對象的createElement("audio")來創建audio元素。

Audio對象的主要事件包括：

● addTextTrack()——向音頻添加新的文本軌道。

● canPlayType()——檢查瀏覽器是否能夠播放指定的音頻類型。

● fastSeek()——在音頻播放器中指定播放時間。

● getStartDate()——返回新的Date對象，表示當前時間線偏移量。

● load()——重新加載音頻元素。

● play()——開始播放音頻。

● pause()——暫停當前播放的音頻。

在JavaScript腳本中，可以使用audio元素的addEventListener()方法向其添加事件句柄，從而實現當事件發生時調用某個函數。DOM對象的事件本書后文會有詳細介紹。通過腳本控制audio元素的示例可參考audioAndJS.html。

audioAndJS.html：

audioAndJS.html在瀏覽器中的顯示結果如圖4-2所示，當單擊相應按鈕時會實現相應功能。