html5中 media（播放器）的api使用指南_html5教學技巧

直接奉上範例程式碼，廢話就不多說了。

複製程式碼

程式碼如下:

HTML5 音訊API

HTML5 音訊API 演示，作者：http://github.com/LearnShare" target="_blank">LearnShare.

最後更新@2013-04-23 20:40:00
新增資訊表
update @2013-04-22 14:54:00
新增DOM 事件
update @ 2013-04-22 12:47:00
新增getCurrentSrc 按鈕

檢視程式碼http ://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/” target ="_blank">LearnShare.github.io。
API 參考：https://developer.mozilla.org/ zh-CN /docs/DOM/HTMLMediaElement" target="_blank">HTMLMediaElement;和http://www.w3schools.com/tags/ref_av_dom.asp ” target="_blank">音訊/視訊DOM 引用

音訊元素

;開啟開發者工具查看控制台日誌。

控制

播放按鈕>
暫停按鈕>
getPaused按鈕>
getEnded


音量-
音量
getVolume


getSrc
playMusic1
playMusic2
removeMusic
getCurrentSrc


> ">getInitialTime
getDuration
getSeeking
jumpTo_30s
getCurrentTime
getPlayed



autoplay_off
getAutoplay


controls_show
controls_hide
getControls按鈕>


loop_on
loop_off
getLoop


preload_metadata
getPreload< ;/按鈕>


getDefaultMulated按鈕>
靜音按鈕>
取消靜音
getMulated


getDefaultPlaybackRate按鈕>
播放速率-按鈕>
播放速率按鈕>
getPlaybackRate 按鈕>


getNetworkState
getReadyState
getBuffered
getSeekable

>

玩家屬性

控制：











;

自動播放：	td >
預設配對：
defaultPlaybackRate:
循環：
預先載入：

玩家資訊

src：
;


currentSrc:



持續時間： td>



當前時間：



結束：

tr>

暫停：



靜音：



音量：


;
播放速率：

播放狀態

networkState:< ;/td>



就緒狀態： ;



緩衝：



可查找：



已播放：



錯誤：

tr>

audio-controls.js

複製程式碼

程式碼如下：

window.onload=function(){
// 取得音訊元素
var audio=document.getElementById("audio");
// play()
document. getElementById("play").onclick=function(){
audio.play();
console.log("play");
};
// 暫停()
document.getElementById("pause").onclick=function(){
audio.pause();
console.log("pause");
};
// 暫停
document.getElementById("get_paused").onclick=function(){
console.log("audio.paused: " audio.paused);
};
// 結束
文件.getElementByIdId ("get_ending").onclick=function(){
console.log("audio.ending: " audio.ished);
};
// 設定音量-
document. getElementById(> // 設定音量-
document. getElementById( "volume_down").onclick=function(){
audio.volume-=0.2;
console.log("volume-0.2");
};
// 設定音量
document.getElementById("volume_up").onclick=function(){
audio.volume =0.2;
console.log("volume 0.2");
};
// 取得volume
document.getElementById("get_volume").onclick=function(){
console.log("audio.volume: " audio.volume);
};
// 取得src

document.getElementById("get_src").onclick=function(){
console.log("audio.src: " audio.src);
};
// 設定src_music1
document. getElementById("play_music1").onclick=function(){
audio.src="./media/music1.mp3";
updateSrc();
updateCurrentSrc();
控制台. log("播放音樂1");
};
// 設定src_music2
document.getElementById("play_music2").onclick=function(){
audio.src="./media /music2.mp3";
updateSrc();
updateCurrentSrc();
console.log("播放音樂2");
};
// 設定remove_music audio.src="";
console.log("刪除音樂");
};
// 取得currentSrc
document.getElementById("get_current_src").onclick=function(){
console.log("audio.currentSrc: " audio.currentSrc);
};
文檔 取得initialTime
.getElementById("get_initial_time").onclick=function(){
console.log("audio.initialTime: " audio.initialTime);
};
// 取得持續時間
document. getElementById ("get_duration").onclick=function(){
console.log("audio.duration: " audio.duration);
};
// 取得搜尋
document.getElementById( " get_seeking").onclick=function(){
console.log("audio.seeking: " audio.seeking);
};
// 設定currentTime
document.getElementBy " ).onclick=function(){
audio.currentTime=30;
console.log("jumpTo 30s");
};
// 取得currentTime
document.getElementBy(> // 取得currentTime
document。 " get_current_time").onclick=function(){
console.log("audio.currentTime: " audio.currentTime);
};
// 播放
document.getElementById("get_played" ).onclick=function(){
console.log("audio.played:");
var range=audio.played;
var n=ranges.length;
for(var i =0;i console.log("("ranges.start(i) ","ranges.end(i) ")");
}
};
// 自動播放
document.getElementById("autoplay_on").onclick=function(){
audio.autoplay=true;
updateAutoplay();
console.log(> updateAutoplay();
console.log("自動播放on ");
};
// 自動播放關閉
document.getElementById("autoplay_off").onclick=function(){
audio.autoplay=false;
updateAutoplay() ;
console.log("自動播放關閉");
};
// 取得自動播放
document.getElementById("get_autoplay").onclick=function(){
console .log(" audio.autoplay: " audio.autoplay);
};
// 控制顯示
document.getElementById("controls_show").onclick=function(){
audio.controls =true;
updateControls();
console.log("controls show");
};
// 控制項隱藏
document.getElementById("controls_hh"). (){
audio.controls=false;
updateControls();
console.log("controls hide");
};
// 取得控制項
document. ("get_controls" ).onclick=function(){
console.log("audio.controls: " audio.controls);
};
// 迴圈
document.getElementById("loop_on "). onclick=function(){
audio.loop=true;
updateLoop();
console.log("loop on");
};
// 循環關閉
document.getElementById("loop_off").onclick=function(){
audio.loop=false;
updateLoop();
console.log("循環關閉");
};
// 取得迴圈
document.getElementById("get_loop").onclick=function(){
console.log("audio.loop: " audio.loop);
};
// 預先載入元資料
document.getElementById("preload_metadata").onclick=function(){
audio.preload="metadata";
updatePreload();
console. log("預先載入元資料");
};
// 取得預先載入 document.getElementById("get_preload").onclick=function(){ console.log("audio .preload: " audio.preload) ;};
// 取得defaultMulated
document.getElementById("get_default_muted").onclick=function(){
console.log("audio.defaultMulated: " audio.defaultMulated);
// 靜音 document.getElementById("mute").onclick=function(){
audio.muted=true;
updateMulated();
console.log("音頻靜音");
};
// 取消靜音
document.getElementById("unmute").onclick=function(){
audio.muted=false;
updateMulated();
console.log("音訊取消靜音");
};
// 靜音 document.getElementById("get_muted").onclick=function(){
console.log("音訊.muted: " audio.muted);
};
// 取得defaultPlaybackRate
document.getElementById("get_default_playback_rate").onclick=function(){
console.log("audsio. defaultPlaybackRate : " audio.defaultPlaybackRate);
};
// 設定playbackRate-
document.getElementById("playback_rate_down").onclick=function(){
7.2; 🎜 > console.log("playbackRate-0.2");
};
// 設定playbackRate
document.getElementById("playback_rate_up").onclick=function(){
audioplay. 0.2 ;
console.log("playbackRate 0.2");
};
// 取得playbackRate
document.getElementById("get_playback_rate").onclick=function(){
conole. log ("audio.playbackRate: " audio.playbackRate);
};
// 取得網路狀態
document.getElementById("get_network_state").onclick=function(){
console.log (" audio.networkState: " audio.networkState);
};
// 取得readyState
document.getElementById("get_ready_state").onclick=function(){
console.log("聲音的。 ReadyState: " audio.readyState);
};
// 取得緩衝
document.getElementById("get_buffered").onclick=function(){
console.log("audio.buffered:"audio.buffered: ");
var range=audio.buffered;
var n=ranges.length;
for(var i=0;i console.log("(" range.start(i) "," Ranges.end(i) ")");
}
};
// 取得可尋找
document.getElementById("get_seekable").onclick = function(){
console.log("audio.seekable:");
var range=audio.seekable;
var n=ranges.length;
for(var i=0; i console.log("("ranges.start(i) ","ranges.end(i) ")");
}
};

// DOM 事件

// abort
audio.addEventListener("abort",function(){
console.log("event:abort");
});
// canplay
audio.addEventListener("canplay",function(){
console.log("event:canplay");
});
// canplaythrough
音訊.addEventListener("canplaythrough",function(){
console.log("event:canplaythrough");
});
// periodchange
audio.addEventListener("durationchange",function ( ){
updateDuration();
console.log("event:durationchange");
});
// 清空
audio.addEventListener("emptied",function() {
updateSrc();
updateCurrentSrc();
updateDuration();
updatePaused();
updateNetwork();
update;
updateSeekable();
updatePlayed();
console.log("event:emptied");
});
// 結束
audio.addListListener("ending" , function(){
updateEnded();
console.log("event:ished");
});
//loadeddata
audio.addEventListenerener("loadeddata",function ( ){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:loadeddata"); // 載入元資料
audio.addEventListener("loadedmetadata",function(){
console.log("event:loadedmetadata");
});
// loadstart
audio.addEventListener("loadstart",function(){
console.log("event:loadstart");
});
// 暫停
audio.addEventListener("pause" ,function (){
updatePaused();
console.log("event:pause");
});
// 播放
audio.addEventListener("play",function () {
updatePaused();
console.log("event:play");
});
// 播放
audio.addEventListener("playing",function() {
console.log("event:playing");
});
// 文件
audio.addEventListener("progress",function(){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:progress");
});
// 速率變化
});
// 速率變化
});
// 速率變化。 audio.addEventListener ("ratechange",function(){
updatePlaybackRate();
console.log("event:ratechange");
});
// 尋求
音訊。 addEventListener(" Seed",function(){
console.log("event:seeked");
});
// 尋求
audio.addEventListener("seeking",function() {
console.log("event:seeking");
});
// 雕塑
audio.addEventListener("stalled",function(){
console.log(" event:stalled ");
});
// 掛起
audio.addEventListener("掛起",function(){
console.log("event:suspend");
});
// timeupdate
audio.addEventListener("timeupdate",function(){
updateCurrentTime();
updateEnded( );
updatePlayed();
console.log("event:timeupdate");
});
//volumechange
audio.addtListener("volumeEvent",function(){
updateVolume();
console.log("event:volumechange");
});
// waiting
audio.addEventListener("waiting",function(){
audio.addEventListener("waiting",function(){ console.log("event:waiting");
});
updateAutoplay();
updateControls();
updateDefaultMulated();
updateDefaultLbackRate( ();
updatePreload();
updateSrc();
updateCurrentSrc();
updateDuration();
updateCurrent(); updateMulated();
updateEnded();
updatePlaybackRate();
updateNetworkState();
updateReadyState(); updatePlayed();
updateError();
};
//更新資訊表的函數
//自動播放
updateAutoplay(){
//自動播放
updateAutoplay(){
document. getElementById ("autoplay").innerHTML=audio.autoplay;
}
//控制
function updateControls(){
document.getElementById("controls"). 🎜 >}
// defaultMulated
function updateDefaultMulated(){
document.getElementById("default_muted").innerHTML=audio.defaultMulated; document.getElementById("default_playback_rate").innerHTML=audio.defaultPlaybackRate;
}
//迴圈
函數。 innerHTML=audio.loop;
}
//預加載
function updatePreload(){
document.getElementById("preload").innerHTML=audio.preload;
}
// src
function updateSrc(){
document.getElementById("src").innerHTML=audio.src;
}
// currentSrc
function update document .getElementById("current_src").innerHTML=audio.currentSrc;
}
//持續時間
function updateDuration(){
document.getElementById("duration"y.期間;
}
// currentTime
函數 updateCurrentTime(){
document.getElementById("current_time").innerHTML=audio.currentTime;
}
}
updateEnded(){
document.getElementById("end").innerHTML=audio.ished;
}
//暫停
函數updatePaused(){
document.getElementBy( ).innerHTML=audio.paused;
}
//靜音
函數updateMulated(){
document.getElementById("muted").innerHTML=audio.muted;
}
// 音量
function updateVolume(){
document.getElementById("volume").innerHTML=audio.volume;
}
//playbackRate
function up > document.getElementById("playback_rate").innerHTML=audio.playbackRate;
}
// networkState
函數updateNetworkState(){
document.getElementById("network_stateyId("network_state). networkState;
}
//readyState
function updateReadyState(){
document.getElementById("ready_state").innerHTML=audio.readyState;
}
>function updateBuffered(){
var range=audio.buffered;
var str="";
var n=ranges.length;
for(var i=0;i str ="("ranges.start(i)","ranges.end(i)")";
if(i!=n-1){
str ="
";
}
}
document.getElementById("buffered").innerHTML=str;
}
//可尋找
範圍=audio.seekable;
var str="";
var n=ranges.length;
for(var i=0;i str ="(" range.start(i) "," range.end(i) ")";
if(i!=n-1){
str ="
";
}
}
document.getElementById("seekable").innerHTML=str;
}
// 已播放
function updatePlayed(){
var range=audio.played; var n=ranges.length;
for(var i=0;i str ="("ranges.start(i)","ranges .end (i) ")";
if(i!=n-1){
str ="
";
}
}
document.getElementById("已播放") .innerHTML=str;
}
//錯誤
function updateError(){
document.getElementById("error").innerHTML=audio.error;
}