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的详细使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。