iT邦幫忙

DAY 7
8

HTML5試試看系列 第 7

[HTML5試試看-7] audio媒體播放

今天看了一下audio標籤,發現他繼承了一個特別的介面,專門用來控制媒體:[Media elements](http://www.w3.org/TR/html5/video.html#media-elements 4.8.9),發現之前寫得偵測程式還缺這個,就補了一下。看起來目前檯面上的支援HTML5的瀏覽器,對於audio/video標籤的支援都很完整。(格式就很難說)

不過今天太忙,要同時介紹跟測試這兩個標籤太操了,所以偷懶一下,介紹audio就好。
先來試一下怎樣可以用最簡單的方法來播放audio...看了一下規格書,從Media Element相關屬性裡面看起來,好像設定好src跟autoplay,音樂就會自動播放。如果再加上loop屬性,就可以循環播放,當作背景音樂:

 <html lang="zh-TW">
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf8">
 
 
 <audio src="bwv4_overture.mp3" autoplay loop>
 </audio>
 
 

這樣就可以直接取代bgsound或是用object內嵌mp3。如果還想控制音樂播放,最快的方法是加上controls屬性:

<audio src="bwv4_overture.mp3" controls>

這樣瀏覽器就會顯示一個基本播放控制的操作介面:

如果想要自訂操作介面...疑?好像沒啥事件可以用?所以可能需要用setInterval來調整播放狀態。audio標籤的DOM物件,提供許多狀態相關屬性及方法,所以完全透過Javascript等來控制是可以實現的,先來看看有啥:

  1. src:大家都很熟,應該不用介紹
  2. currentSrc:疑?為啥還有這個?原來除了使用src,Media Elements還可以把source標籤當作子物件。每個source物件有各自的src屬性指到媒體檔案,在不確定瀏覽器對於媒體類型的支援程度時,可以同時指定多個不同格式的source,這樣瀏覽器可以挑他支援的格式來播放。currentSrc在最初是空字串,等到瀏覽器挑了他支援格式的媒體URL,就會在這裡顯示。
  3. networkState:網路狀態,包含媒體URL的狀況
  4. preload
  5. buffered
  6. readyState:媒體資料讀取的狀態
  7. seeking
  8. currentTime:目前播放的時間
  9. startTime:開始播放的時間
  10. duration:總長度...好累,底下只列出來,後面再說明
  11. paused
  12. defaultPlaybackRate
  13. playbackRate
  14. played
  15. seekable
  16. ended
  17. autoplay
  18. loop
  19. controls
  20. volume
  21. muted
  22. load()
  23. canPlayType()
  24. play()
  25. pause()

真是洋洋灑灑...怕來不及寫出分享,所以先觀察看看,稍微改一下程式,這樣就可以在播放時每隔一秒更新audio物件的狀態:

 <html lang="zh-TW">
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf8">
 
 
 <audio src="bwv4_overture.mp3" controls id="player"></audio>
 <div id="panel"></div>
 
 
 <script>
 (function(window, undefined) {
 	var player = document.getElementById('player'),
 	map =  ['error','src','currentSrc','networkState','readyState','preload','buffered','played','seekable','seeking','currentTime','startTime','duration','paused','defaultPlaybackRate','playbackRate','ended','autoplay','loop','controls','volume','muted'];
 	window.setInterval(function(){
 		var str = '';
 		for(var i=0, j=map.length; i<j; i++) {
 			str += map[i] + ' : ' + player[map[i]] + '<br>\n';
 		}
 		document.getElementById('panel').innerHTML = str;
 	}, 1000);
 })(window);
 </script>

這樣就可以看到播放時狀態的變化:

嗯嗯,看起來有幾個重點:

  1. startTime是媒體開始的時間
  2. duration是長度(時間)
  3. currentTime是目前播放的位置(時間)
  4. paused暫停時他的值會是true,否則是false
  5. ended只是媒體是否播放到結束的時間點
  6. seeking如果拖拉播放進度,他的值會是true,否則是false
  7. volume控制或指示音量,他的值是從0到1的浮點數
  8. muted控制或指示靜音,靜音時為true,否則為false

另外有幾個屬性是TimeRanges物件,包含:

  1. buffered
  2. played
  3. seekable

TimeRanges有一個屬性及兩個方法,length顯示裡面有幾個timerange,然後用start(n)可以取出第n個range的開始時間,end(n)則可取出結束時間。

稍微調整一下程式來顯示TimeRanges的內容,可以看到:

...所以,跟duration、currentTime等作用差不多嘛。不過如果支援一些streaming media,也許這裡會有不同。

另外,還有幾個方法:

  1. play()播放媒體
  2. pause()暫停播放
  3. canPlayTime(TypeString)傳入媒體的MIME type資訊,返回值是...是否支援的資訊。
  4. load()中斷一切動作來載入媒體

總之(呼,趕上了)利用這些屬性與方法,就可以做出自訂的播放功能吧(時間不夠做啦,對不起)。明天來看看video吧,不過得先準備一下影片檔...(到底有什麼格式可以支援的阿?)另外,其實還是有「事件」,看到後面才發現...明天再說吧。

參賽文章


上一篇
[HTML5試試看-6] 新的內容組織方法
下一篇
[HTML5試試看-8] video媒體播放
系列文
HTML5試試看30

2 則留言

0
fillano
iT邦超人 1 級 ‧ 2010-10-18 22:56:16

補充一下,在媒體還沒播放前,played裡面沒東西,播放一次到完以後,played就不會有變化。

其實用chrome的開發工具觀察,在本機跑的時候,mp3一次就GET完...所以不太看得出buffered跟seekable這兩個TimeRanges有什麼差別。應該把他移到遠端的網站跑跑看...

另外,要實作seek的話,其實currentTime數值是可讀寫的,透過寫入就可以改變播放位置。只是我還沒仔細看過相關事件...好像沒地方可以影響到seeking的狀態。

不過上網找一下,應該有已經有很多精彩的播放器示範了。

fillano iT邦超人 1 級 ‧ 2010-10-18 22:59:03 檢舉

對了,FireFox4竟然不支援mp3,所以沒抓畫面!我用Chrome跟IE9代替。我想ogg應該可以,但是不知道怎樣轉XD...再上網找找

fillano iT邦超人 1 級 ‧ 2010-10-18 23:06:18 檢舉

補上顯示TimeRanges物件資訊的html(太長了...只好用gist):
http://gist.github.com/632349

我要留言

立即登入留言