當前位置 : IT培訓網 > Web前端 > Web教程 > 如何在HTML中植入音頻(Audio)

如何在HTML中植入音頻(Audio)

時間:2016-12-13 15:36:35??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
標簽(Tag):?? html(100)音頻(4)
在 HTML 中播放音頻并不容易!您需要諳熟大量技巧,以確保您的音頻文件在所有瀏覽器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能夠播放。

如何在網頁中播放音頻呢,制作網頁音頻特效需要哪些代碼呢,在生活中最常見的就是聽歌了,一般都是在網頁中找到這些歌曲,至于如何將歌曲植入網頁的可能都不知道吧,今天我們就來學習下這方面的知識,希望可以幫助大家提高認知!

HTML 音頻(Audio)

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

HTML 多媒體標簽

New : HTML5 新標簽

標簽

描述

<embed>

定義內嵌對象。HTML4 中不贊成,HTML5 中允許。

<object>

定義內嵌對象。

<param>

定義對象的參數。

<audio>New

定義了聲音內容

<video>New

定義一個視頻或者影片

<source>New

定義了media元素的多媒體資源(<video> 和 <audio>)

<track>New

規定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

問題以及解決方法

在 HTML 中播放音頻并不容易!

您需要諳熟大量技巧,以確保您的音頻文件在所有瀏覽器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能夠播放。

在本章,W3CSchool 為您總結了問題和解決方法。

使用插件

瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。

插件可以使用 <object> 標簽 或者 <embed> 標簽添加在頁面上. 

這些標簽定義資源(通常非 HTML 資源)的容器,根據類型,它們即會由瀏覽器顯示,也會由外部插件顯示。

使用 <embed> 元素

<embed>標簽定義外部(非 HTML)內容的容器。(這是一個 HTML5 標簽,在 HTML4 中是非法的,但是所有瀏覽器中都有效)。

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件:

實例

<embed height="50" width="100" src="chhch20161213001.mp3">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

<embed height="50" width="100" src="chhch20161213001.mp3">

<p>如果你無法聽到該音頻,那么可能你的電腦或瀏覽器不支持該文件格式。</p>

<p>或者你沒有打開揚聲器。</p>

 

</body>

</html>

運行結果:

 

點擊試聽

如果你無法聽到該音頻,那么可能你的電腦或瀏覽器不支持該文件格式。

或者你沒有打開揚聲器。

問題:

<embed> 標簽在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。

不同的瀏覽器對音頻格式的支持也不同。

如果瀏覽器不支持該文件格式,沒有插件的話就無法播放該音頻。

如果用戶的計算機未安裝插件,無法播放音頻。

如果把該文件轉換為其他格式,仍然無法在所有瀏覽器中播放。

使用 <object> 元素

<object tag> 標簽也可以定義外部(非 HTML)內容的容器。

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件:

實例

<object height="50" width="100" data="chhch20161213001.mp3"></object>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

<object height="50" width="100" data="chhch20161213001.mp3"></object>

<p>如果你無法聽到該音頻,那么可能你的電腦或瀏覽器不支持該文件格式。</p>

<p>或者你沒有打開揚聲器。</p>

 

</body>

</html>

運行結果:

點擊試聽

如果你無法聽到該音頻,那么可能你的電腦或瀏覽器不支持該文件格式。

或者你沒有打開揚聲器。

問題:

不同的瀏覽器對音頻格式的支持也不同。

如果瀏覽器不支持該文件格式,沒有插件的話就無法播放該音頻。

如果用戶的計算機未安裝插件,無法播放音頻。

如果把該文件轉換為其他格式,仍然無法在所有瀏覽器中播放。

使用 HTML5 <audio> 元素

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

The <audio> element works in all modern browsers.

以下我們將使用 <audio> 標簽來描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個 OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗,它會顯示一個錯誤文本信息:

實例

<audio controls>

  <source src="chhch20161213001.mp3" type="audio/mpeg">

  <source src="chhch20161213001.ogg" type="audio/ogg">

  Your browser does not support this audio format.

</audio>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

<audio controls>

  <source src="chhch20161213001.mp3" type="audio/mpeg">

  <source src="chhch20161213001.ogg" type="audio/ogg">

  您的瀏覽器不支持該音頻格式。

</audio>

 

</body>

</html>

運行結果:

點擊試聽

問題:

<audio> 標簽在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗證。

您必須把音頻文件轉換為不同的格式。

<audio> 元素在老式瀏覽器中不起作用。

最好的 HTML 解決方法

下面的例子使用了兩個不同的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗,代碼將回退嘗試 <embed> 元素。

實例

<audio controls height="100" width="100">

  <source src="chhch20161213001.mp3" type="audio/mpeg">

  <source src="chhch20161213001.ogg" type="audio/ogg">

  <embed height="50" width="100" src="chhch20161213001.mp3">

</audio>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

<audio controls>

  <source src="chhch20161213001.mp3" type="audio/mpeg">

  <source src="chhch20161213001.ogg" type="audio/ogg">

  <embed height="50" width="100" src="chhch20161213001.mp3">

</audio>

 

</body>

</html>

運行結果:

點擊試聽

問題:

您必須把音頻轉換為不同的格式。

<embed> 元素無法回退來顯示錯誤消息。

雅虎媒體播放器 - 一個簡單的添加音頻到你網站上的方式

使用雅虎播放器是免費的。如需使用它,您需要把這段 JavaScript 插入網頁底部:

雅虎播放器可以播放MP3以及其他各種格式。你只需添加一行代碼到你的頁面或 博客中就可以輕松地將您的HTML頁面制作成 專業的播放列表:

實例

<a href="chhch20161213001.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

<p><a href="chhch20161213001.mp3">Play mp3</a></p>

<p><a href="chhch20161213002.wav">Play wav</a></p>

 

<script src="https://mediaplayer.yahoo.com/latest"></script>

 

</body>

</html>

運行結果:

Play mp3

Play wav

如果你要使用它,您需要把這段 JavaScript 插入網頁底部:

<script src="http://mediaplayer.yahoo.com/latest"></script>

然后只需簡單地把 MP3 文件鏈接到您的 HTML 中,JavaScript 會自動地為每首歌創建播放按鈕:

<a href="song1.mp3">Play Song 1</a>

<a href="song2.wav">Play Song 2</a>

...

...

雅虎媒體播放器為您的用戶提供的是一個小型的播放按鈕,而不是完整的播放器。不過,當您點擊該按鈕,會彈出完整的播放器。

請注意,這個播放器始終停靠在窗框底部。只需點擊它,就可將其滑出。

使用超鏈接

如果網頁包含指向媒體文件的超鏈接,大多數瀏覽器會使用"輔助應用程序"來播放文件。

以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接,瀏覽器會啟動"輔助應用程序"來播放該文件:

實例

<a href="chhch20161213001.mp3">Play the sound</a>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

<h2>Linking To a Song</h2>

 

<p><a href="chhch20161213001.mp3">點擊此處播放</a></p>

 

</body>

</html>

運行結果:

Linking To a Song

點擊此處播放

內聯的聲音說明

當您在網頁中包含聲音,或者作為網頁的組成部分時,它被稱為內聯聲音。

如果您打算在 web 應用程序中使用內聯聲音,您需要意識到很多人都覺得內聯聲音令人惱火。同時請注意,用戶可能已經關閉了瀏覽器中的內聯聲音選項。

我們最好的建議是只在用戶希望聽到內聯聲音的地方包含它們。一個正面的例子是,在用戶需要聽到錄音并點擊某個鏈接時,會打開頁面然后播放錄音。

隨著互聯網的發展,音頻設備逐漸的提升,高品質的音響設備充斥著我們的生活,打開頁面就可以聽到無數首歌曲,如果你也想在網頁音頻中奉獻自己的一份理想,那就趕緊行動吧!

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天