HTML5 Audio(音頻)

TML5 提供了播放音頻文件的標準。

互聯網上的音頻

直到現在，仍然不存在一項旨在網頁上播放音頻的標準。

今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。

HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素。

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

如需在 HTML5 中播放音頻，你需要使用以下代碼：

實例

<audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的瀏覽器不支持 audio 元素。</audio>

control 屬性供添加播放、暫停和音量控件。

在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本。

<audio> 元素允許使用多個 <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件

音頻格式及瀏覽器支持

目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg:

瀏覽器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

音頻格式的MIME類型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

HTML5 Audio 標簽

標簽	描述
<audio>	定義了聲音內容
<source>	規定了多媒體資源, 可以是多個，在 <video> 與 <audio>標簽中使用

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在很多網站上都會使用到視頻和音頻，HTML5 中提供了展示視頻和音頻的標簽。向網頁嵌入視頻可以使用 <video> 標簽，而嵌入音頻可以使用 <audio> 標簽。這兩個標簽都是 HTML 5 中新增的標簽，兩個標簽中的屬性和方法也很類似，但也有些不同。其中 audio 元素用于定義聲音，比如音樂， video 元素用于定義視頻，如電影等。

向網頁中嵌入視頻

<video> 標簽可以用于定義視頻，且提供了播放、暫停、音量控件來控制視頻。舉個例子，像我們俠課島網站上，課程視頻播放，就是通過 <video> 標簽來實現的。下面我們來看一下如何向網頁中嵌入一個視頻。

示例：

首先我們準備一個視頻，例如一個 test.mp4，然后使用 <video> 標簽嵌入視頻，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學習(9xkd.com)</title>
    </head>
    <body>
        <video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
    </body>
</html>

在瀏覽器中的預覽效果：

從上圖中可以看到，我們通過 <video> 標簽成功向網頁中插入了一個視頻，其中 src 屬性用于引入要播放的視頻的 URL，注意視頻地址一定要正確，如果地址錯誤，視頻是不能顯示的。然后我們通過 width、height 屬性設置了視頻的寬度為 700px ，高度為 400px。

然后可以看到，視頻上還顯示了播放、調整音量等控件，當我們點擊播放按鈕時，視頻就會開始播放。這是因為我們設置了 controls 屬性，如果我們沒有設置這個屬性，視頻將會顯示一個靜止的畫面，并且不管怎么點擊都是沒有反應的。大家可以試一下，不設置 controls 屬性然后在瀏覽器中查看演示效果，這里就不演示給大家看了。

video 元素中的常用屬性如下所示：

有些比較老的瀏覽器可能不支持 <video> 標簽，例如 IE8 及以下的瀏覽器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標簽。

所以我們可以在 <video> 標簽中放置文本內容，這樣當某個瀏覽器不支持此標簽時，就可以顯示提示內容：

<video src="./test.mp4" controls="controls" width="700px" height="400px">
    您的瀏覽器不支持 video 標簽
</video>

這樣用戶就會知道，是因為瀏覽器不支持所以加載視頻不成功，可以換一個瀏覽器。

視頻的格式

像我們平時看到的視頻格式有很多種，例如常見的有 mp4、AVI、mov、rmvb、Ogg 等等，目前 video 元素支持的視頻格式有下面三種：

這三種視頻格式，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器，Ogg 格式不支持IE、Safari 瀏覽器，WebM 格式不支持IE、Safari 瀏覽器等。

所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標簽。

source標簽

<source> 標簽可以為媒體元素定義媒介資源，例如 video 和 audio 元素。

例如 <video> 標簽中可以包含多個 <source> 標簽，<source> 標簽可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式。

示例：

例如我們插入的視頻播放器，帶有兩個源文件，瀏覽器會根據需要來選擇源文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學習(9xkd.com)</title>
    </head>
    <body>
        <video controls="controls" width="700px" height="400px">
            <source src="./test.mp4" type="video/mp4">
            <source src="./test.ogg" type="video/ogg">
            您的瀏覽器不支持 video 標簽
        </video>
    </body>
</html>

像上述代碼中，如果是 Safari 瀏覽器就會選擇第一個源文件，如果是 Firefox 瀏覽器則會選擇第二個源文件。

<source> 標簽有三個屬性：

向網頁中嵌入音頻

向網頁中嵌入音頻可以使用 <audio> 標簽，此標簽的使用和 <video> 標簽類似。插入視頻是有畫面的，我們也可以調整視頻的寬和高等，而插入音頻是沒有畫面的。

audio 元素支持的格式和 video 元素也有一點區別：

示例：

例如我們插入一段音頻，在瀏覽器中可以看到，是沒有畫面的，只有聲音：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學習(9xkd.com)</title>
    </head>
    <body>
        <audio controls="controls">
            <source src="./test.mp4" type="audio/mpeg">
            <source src="./test.ogg" type="audio/ogg">
            您的瀏覽器不支持 audio 標簽
        </audio>
    </body>
</html>

在瀏覽器中的演示效果：

向網頁中嵌入音頻時，也可以通過 <source> 標簽來指定兩個源文件，<source> 標簽允許規定兩個視頻或者音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

audio 元素中的常用屬性和 video 元素差不多，但是 audio 元素中沒有 width、height 等屬性。

常用屬性如下所示：

總結

向網頁中嵌入視頻和音頻其實很簡單，要注意 video 元素和 audio 元素支持的視頻、音頻格式類型，如果插入的視頻格式不支持，則視頻或音頻不會顯示。

更多可以查看鏈接：https://www.9xkd.com/

擊右上角的關注，不定期前端干貨分享！！

在前端界當提到音視頻的時候，大家最開始聯想到的可能是<audio>和<video>音視頻標簽。But 大家可能忽視了在html5的api中有一個WebAudio的對象。可以實現時時對音頻數據分析獲取并可視化。效果如下面的視頻(視頻有音樂哦)：demo預覽地址：https://aifly.github.io/toutiao/three.html

Web Audio

Web Audio API使用戶可以在音頻上下文(AudioContext)中進行音頻操作。音頻節點通過它們的輸入輸出相互連接，形成一個鏈或者一個簡單的網。打個比方，我們平時一般聽音樂，把耳機插在手機上，然后把耳塞塞在耳朵里，音頻才可以傳入到我們聽覺系統里面。

而音頻文件本身就是聲音的采樣數據，這些采樣數據可以來自麥克風，也可以來自電子樂器，然后混合成一個單一的復雜的波形。

知識點：

1、獲取音頻上下文對象。

var ac = new (window.AudioContext || window.webkitAudioContext)();

2、創建媒體源。

var audioSrc = ac.createMediaElementSource(oAudio);//oAudio為<audio>對象

3、創建分析器。

var analyser = ac.createAnalyser();

4、我們要將剛獲取到的媒體源對象和分析器對象相互鏈接

audioSrc.connect(analyser);

5、分析器和上下文的destination屬性連接。

analyser.connect(ac.destination);

6、設置分析器的fftSize屬性。

analyser.fftSize = 1024; //這個屬性值一般是2的N次方。
frequencyBinCount 的值固定為analyser.fftSize值的一半. 該屬性通常用于可視化的數據值的數量.也就是說 analyser.frequencyBinCount 的值為512

7、創建用于接收音頻分析返回的數據。

this.arr = new Uint8Array(analyser.frequencyBinCount);
注意這里我們用了Uint8Array類型化的數組。我們平時寫js程序的時候很少會用到這種數組。了解Webgl的童鞋應該知道這個類型化的數組用的比較多。

8、接下來就是要在一個循環周期函數里面不停的獲取音頻數據，然后將數據可視化。

(function render(){
requestAnimationFrame(render);
if (arr.length) {
analyser.getByteFrequencyData(arr);
....arr里面就會時進得到分析的音頻的數據了。//dosomething
}
})();

數據的可視化載體我的這個案例里面是用的ThreeJs。因為threejs本身就是屬于前端圖形學的一個復雜的學科，這里就不再過多的贅述了，后面的文章我會單獨分享有關ThreeJs的文章。這個案例的源代碼已經在demo地址源代碼中找得到。感興趣的可以關注我，這個案例有什么問題的可以評論留言給我或者私信我哦。