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

如何在HTML5網頁中插入Audio(音頻)

時間:2016-12-07 14:33:02??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
音頻輸出的質量決定我們的聽覺,所以一款好的音頻播放器可以提高我們的聽覺世界,如果你想要制作精美的音樂播放器,想要體驗一把音頻來帶的刺激,那就趕緊加入我們吧,讓我們一起制作音頻小軟件,并植入到網頁之中,讓

音頻是什么呢,和視頻有什么關聯呢,其實音頻和視頻一樣,只不過一個是聽,一個是看而已,兩者結合起來就組成了一個完整的視頻了。那么如何在HTML5網頁中插入音頻呢,想要知道的話,趕緊隨IT培訓網小編一起來看看吧!

HTML5 Audio(音頻)

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

HTML5 Audio 標簽

標簽

描述

<audio>

定義了聲音內容

<source>

規定了多媒體資源, 可以是多個,在 <video> 與 <audio>標簽中使用

 

互聯網上的音頻

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

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

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

瀏覽器支持

如何在HTML5網頁中插入Audio(音頻)_www.oalvodamoda.com

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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

HTML5 Audio - 如何工作

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

實例

<audio controls>

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

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

您的瀏覽器不支持 audio 元素。

</audio>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

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

</head>

<body>

<audio controls>

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

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

您的瀏覽器不支持 audio 元素。

</audio>

</body>

</html>

運行結果:

如何在HTML5網頁中插入Audio(音頻)_www.oalvodamoda.com

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

 

音頻輸出的質量決定我們的聽覺,所以一款好的音頻播放器可以提高我們的聽覺世界,如果你想要制作精美的音樂播放器,想要體驗一把音頻來帶的刺激,那就趕緊加入我們吧,讓我們一起制作音頻小軟件,并植入到網頁之中,讓更多的人受益。

頂一下
(4)
66.7%
踩一下
(2)
33.3%
------分隔線----------------------------
------分隔線----------------------------
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)播放
五月情天