步驟 1:將 Flash 物件與音訊標記包裝在一起
不支援音訊標記的瀏覽器會改為載入 Flash 內容。
<audio>
</span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</span><span class="new">
</audio>
步驟 2:新增來源參照
我們可以視需要加入任意數量的「來源」行與格式。如果瀏覽器不支援某個特定格式,系統會改用下一個格式,以此類推。
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" /></span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio></span>
步驟 3:在 Flash 中新增備用廣告
為了安全起見,我們必須在 Flash 音訊播放器中加入備用項,以免瀏覽器不支援我們指定的任何格式。舉例來說,Firefox 3.5 僅支援 Ogg 格式的音訊標記,但可能只有 mp3 檔案可用。
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
swfobject.embedSWF(
"player_mp3_mini.swf",
"player_fallback",
"200",
"20",
"9.0.0",
"",
{"mp3":"test.mp3"},
{"bgcolor":"#085c68"});
}
}
</script></span>
為了方便起見,我們會使用 SWFObject 程式庫透過 JavaScript 插入 Flash 播放器。如要納入程式庫,只要使用 Google AJAX Libraries API,然後在標頭中插入以下兩行:
<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>
步驟 4:新增預設控制項來顯示播放器
這些控制項無法自訂 (請見結尾的範例)。由於無論支援格式為何,系統會顯示這些預設控制項,因此我們必須使用先前建立的條件處理其瀏覽權限。
// TODO: DevSite - Code sample removed as it used inline event handlers
您也可以使用 JavaScript 和 CSS 自行建立播放器。
// TODO: DevSite - Code sample removed as it used inline event handlers