1. 程式人生 > >html5中audio的詳細使用

html5中audio的詳細使用

ros ont font 只讀 microsoft loop ext 循環 -h

html5的audio功能上已經非常強大,回放,跳轉,緩沖等以前只能用flash才能實現的功能,html5的audio都能輕松搞定

最近的一個項目使用到了這個功能,把我使用的情況寫下來,供大家參考, 因為我需要的功能很簡單,所以做的不復雜,如果要使用更多的功能,可以參考下面的api,能實現很多高大上的功能

audio 相關的 api

<audio src=”音頻的地址”>備用(當瀏覽器不支持audio時顯示的內容)</audio>

控制函數功能說明

  • load() 加載音頻、視頻軟件,通常不必調用,除非是動態生成的元素,用來在播放前預加載
  • play() 加載並播放音頻、視頻文件,除非文件已經暫停在其他位置,否則默認重頭開始播放
  • pause() 暫停處於播放狀態的音頻、視頻文件

audio 的只讀媒體特性有:

只讀屬性屬性說明

  • duration 獲取媒體文件的播放時長,以s為單位,如果無法獲取,則為NaN
  • paused 如果媒體文件被暫停,則返回true,否則返回false
  • ended 如果媒體文件播放完畢,則返回true
  • startTime 返回起始播放時間,一般是0.0,除非是緩沖過的媒體文件,並一部分內容已經不在緩沖區
  • error 在發生了錯誤後返回的錯誤代碼
  • currentSrc 以字符串形式返回正在播放或已加載的文件,對應於瀏覽器在source元素中選擇的文件

audio 可腳本控制的特性值:

  • autoplay 自動播放已經加載的的媒體文件,或查詢是否已設置為autoplay
  • loop 將媒體文件設置為循環播放,或查詢是否已設置為loop
  • currentTime 以s為單位返回從開始播放到目前所花的時間,也可設置currentTime的值來跳轉到特定位置
  • controls 顯示或者隱藏用戶控制界面
  • volume 在0.0到1.0間設置音量值,或查詢當前音量值
  • muted 設置是否靜音
  • autobuffer 媒體文件播放前是否進行緩沖加載,如果設置了autoplay,則忽略此特性

對於這些屬性,主流的瀏覽器都支持。可是別以為就沒有了兼容性,在音頻播放流中,有兩個陣營。firefox 和 opera 支持 ogg 音頻,safari 和 ie 支持 mp3.幸好Google的chrome都支持。

<div id="audioControl">
	<div class="play">
		<span id="play">Play</span>
	</div>
</div>

<audio id="media" src="test.mp3"></audio>

var media = $(‘#media‘)[0];
var audioTimer = null;

//綁定播放暫停控制
$(‘.play‘).bind(‘click‘, function() {
    playAudio();
}); 

//播放暫停切換
function playAudio() {
    if(media.paused) {
        play();
    } else {
        pause();
    }
}

//播放
function play() {
    media.play();
    $(‘#play‘).html(‘Pause‘);
}

//暫停
function pause() {
    media.pause();
    $(‘#play‘).html(‘Play‘);
}

html5中audio的詳細使用