HTML 音訊

admin發表於2018-10-22
HTML音訊

聲音在HTML中可以以不同的方式播放。

不過在網頁上播放音訊需要一定的格式，下面就對常用的方式做一下簡單介紹。

一.使用外掛:

瀏覽器外掛是一種擴充套件瀏覽器標準功能的小型計算機程式。

外掛可以使用<object>標籤,或者<embed>標籤新增在頁面上. 

這些標籤定義資源（通常非HTML資源）的容器，根據型別，它們即會由瀏覽器顯示，也會由外部外掛顯示。

二.使用<embed>元素:

<embed>標籤定義外部（非HTML）內容的容器。

HTML5新增標籤，在HTML4中是非法的，但是所有瀏覽器中都有效。

下面的程式碼片段能夠顯示嵌入網頁中的MP3檔案: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<embed src="demo/html5/audio/horse.mp3">
<p>如果沒有聽到音訊效果，可能是由於當前瀏覽器不支援。</p>
</body>
</html>

特別說明:

（1）.<embed>標籤在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。

（2）.不同的瀏覽器對音訊格式的支援也不同。

（3）.如果瀏覽器不支援該檔案格式，沒有外掛的話就無法播放該音訊。

（4）.如果使用者的計算機未安裝外掛，無法播放音訊。

（5）.如果把該檔案轉換為其他格式，仍然無法在所有瀏覽器中播放。

二.使用<object>元素:

<object>標籤也可以定義外部（非 HTML）內容的容器。

下面的程式碼片段能夠顯示嵌入網頁中的MP3檔案: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<object data="demo/html5/audio/horse.mp3"></object>
<p>如果沒有聽到音訊效果，可能是由於當前瀏覽器不支援。</p>
</body>
</html>

特別說明:

（1）.不同的瀏覽器對音訊格式的支援也不同。

（2）.如果瀏覽器不支援該檔案格式，沒有外掛的話就無法播放該音訊。

（3）.如果使用者的計算機未安裝外掛，無法播放音訊。

（4）.如果把該檔案轉換為其他格式，仍然無法在所有瀏覽器中播放。

三.使用HTML5<audio>元素:

<audio>是一個HTML5元素，在HTML 4中是非法的，在所有瀏覽器中都有效。

以下將使用<audio>標籤來描述MP3檔案, 同樣新增了一個OGG型別檔案(Firefox和Opera瀏覽器中有效)。

如果失敗，它會顯示一個錯誤文字資訊: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<audio controls>
  <source src="demo/html5/audio/horse.mp3" type="audio/mpeg">
  <source src="demo/html5/audio/horse.ogg" type="audio/ogg">
  你的瀏覽器不支援
</audio>
</body>
</html>

四.最好的HTML解決方法:

下面的例子使用了兩個不同的音訊格式。

<audio>元素會嘗試以mp3或ogg來播放音訊。如果失敗，程式碼將回退嘗試<embed>元素。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<audio controls>
  <source src="demo/html5/audio/horse.mp3" type="audio/mpeg">
  <source src="demo/html5/audio/horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="demo/html5/audio/horse.mp3">
</audio>
</body>
</html>

相關文章