HTML5 多媒體之<audio>標籤使用

阿新 • • 發佈：2020-08-22

一、HTML5 多媒體之<audio>標籤使用

<audio> 標籤定義聲音，比如音樂或其他音訊流。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支援 audio 元素。
</audio>

提示：可以在開始標籤和結束標籤之間放置文字內容，這樣老的瀏覽器就可以顯示出不支援該標籤的資訊。

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

屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音訊在就緒後馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音訊結束時重新開始播放。
preload	preload	如果出現該屬性，則音訊在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的音訊的 URL。

二、音訊格式及瀏覽器支援

目前, <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

三、WebAudio API

更多：

HTML5 <Audio>標籤API整理(三)

HTML5 WebAudioAPI簡介(一)

HTML5 <Audio>標籤API整理(一)

HTML5 多媒體之<audio>標籤使用

一、HTML5 多媒體之<audio>標籤使用 <audio> 標籤定義聲音，比如音樂或其他音訊流。

HTML5 多媒體之<img>標籤使用

一、HTML5 多媒體<img>標籤 <img src=\"/i/eg_tulip.jpg\"alt=\"上海鮮花港 - 鬱金香\" />

HTML5 多媒體之<video>標籤使用

一、HTML5 多媒體之<video>標籤使用 <video> 標籤定義視訊，比如電影片段或其他視訊流。

HTML5 多媒體之<canvas>標籤使用

一、HTML5 多媒體之<canvas>標籤使用 <canvas id=\"myCanvas\" style=\"border: 1px solid blue;\"></canvas>

HTML5 多媒體之<svg>標籤使用

一、HTML5 多媒體之<svg>標籤使用向量圖，可用作字型什麼是SVG？ SVG 指可伸縮向量圖形 (Scalable Vector Graphics)

HTML5 <label>標籤

一、HTML5 <label>標籤 <form> <label for=\"male\">Male</label> <input type=\"radio\" name=\"sex\" id=\"male\" />

HTML5的<progress>標籤怎麼用？

<progress> 標籤表示任務的進度（程序），例：可定義完成多少工作，還有多少工作可以下載等等。該標籤可與JavaScript結合使用，來顯示任務的進度，建立動態的進度條。

mybatis 中<if>標籤bool值型別為false判斷

mybatis 中<if>標籤bool值型別為false判斷對百度的某些文章深惡痛絕，只是ctrl+c和ctrl+v。並且還不能解決問題。

mybatis中的<include>標籤作用(轉載)

MyBatis中sql標籤定義SQL片段，include標籤引用，可以複用SQL片段 sql標籤中id屬性對應include標籤中的refid屬性。通過include標籤將sql片段和原sql片段進行拼接成一個完整的sql語句進行執行。

mybatis的<if>標籤,<foreach>標籤,<collection>標籤,<association>標籤以及useGeneratedKeys用法

<if>標籤 1.判斷非空或不等於 <if test=\"assessTypes!= null and assessTypes!=\'\' \">

<select>標籤的簡單用法

HTML： <!DOCTYPE html> <html> <body> <div> <div> <label>請選擇：</label>

設計模式之 <一> 原型模式(Prototype Pattern)

<淺克隆> public class Address { public Address(){} public Address(String city,String area){ this.city=city;

mybatis <if>標籤踩坑

1 　　<update id=\"update\"> 2update bl_type 3<set> 4<if test=\"typeName!=null and typeNmae!=\'\'\">

<meta>標籤的定時跳轉、重新整理

需求場景：一般用到的不太多，暫時遇到的只有提交的時候，跳轉到等待頁面(裡面有倒計時或者是一個圖片倒計時gif)的時候

HTML <input> 標籤

什麼是<input> 標籤？ <input>標籤用於蒐集使用者資訊。根據不同的type屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。

HTML <map> 標籤多熱點定位手機自適應

<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width,initia

<img>標籤

在HTML中，影象由<img>標籤定義 ■ src屬性要在頁面上顯示影象，需要使用源src屬性來指定圖片的URL地址

在 < input > 標籤裡面比較常用的type屬性以及用法

關於<input>標籤 <input>標籤在HTML程式碼裡面本身是空的，也就是說單獨呼叫<input>標籤是沒有任何作用的，而<input>標籤常用的屬性就是type，而type這個屬性也擁有著很多屬性，這篇文章主

<a>標籤的多重樣式

標籤的多重樣式連結標籤有多重形式顯示，取決於他的環境。沒有單擊過的上面就會顯示是藍色，也就是未訪問連線。

<span>標籤的作用

<!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title>內聯樣式</title>