html5中audio的详细使用
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的详细使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 眼睛哭肿了怎么快速消肿 妙招三:铁勺子冰
- 下一篇: 国外稳定的免费PHP空间byethost