html5_html5 튜토리얼 스킬의 미디어(플레이어)에 대한 API 사용 가이드

샘플 코드만 제공할 테니 너무 장황한 말은 하지 않겠습니다.

코드 복사

코드는 다음과 같습니다.

HTML5 오디오 API

http://github.com/LearnShare"의 HTML5 오디오 API 데모 target="_blank">LearnShare.

마지막 업데이트 @2013-04-23 20:40:00
정보 테이블 추가
업데이트 @2013-04-22 14:54:00
DOM 이벤트 추가
업데이트 @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 참조

< ;h2>오디오 요소

개발자 도구를 엽니다. 콘솔 로그를 보려면

컨트롤

재생
pause
getPaused
getEnded


volume-
volume < ;/button>
getVolume


getSrc
< ;button id="play_music1">playMusic1
playMusic2
removeMusic
getCurrentSrc


getInitialTime
getDuration
getSeeking
jumpTo_30s
< ;button id="get_current_time">getCurrentTime
getPlayed



autoplay_off
getAutoplay


controls_show
controls_hide
getControls 버튼>


loop_on
loop_off
getLoop


preload_metadata
getPreload< ;/button>


getDefaultMulated
음소거
음소거 해제
getMute


getDefaultPlaybackRate
playbackRate-
playbackRate
< ;button id="get_playback_rate">getPlaybackRate


getNetworkState

getBuffered
getSeekable

플레이어 속성

자동 재생:



< ;td>컨트롤:



defaultMute:



defaultPlaybackRate:< ;/td>



loop:> ;



사전 로드:

플레이어 정보

tr>








< ;tr>

src:
currentSrc:
기간:
현재 시간:
종료됨:
일시중지됨:
음소거됨:
볼륨:
playbackRate:

재생 상태

> ;

















tr>

networkState:< ;/td>
readyState:
버퍼됨:
검색 가능:
재생됨:
오류:

audio-controls.js

复代码

代码如下:

window.onload=function(){
// 오디오 요소 가져오기
var audio=document.getElementById("audio");
// play()
문서. 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);
};
// 종료
document .getElementById("get_ended").onclick=function(){
console.log("audio.ended: " audio.ended);
};
// 볼륨 설정-
문서. 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");
};
// 가져오기 볼륨
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("play music1");
};
// src_music2 설정
document.getElementById("play_music2").onclick=function(){
audio.src="./media /music2.mp3";
updateSrc();
updateCurrentSrc();
console.log("play music2");
};
//remove_music
문서를 설정합니다. getElementById("remove_music").onclick=function(){
audio.src="";
console.log("remove music");
};
// 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);
};
// 현재 시간 설정
document.getElementById("jump_to" ).onclick=function(){
audio.currentTime=30;
console.log("jumpTo 30s");
};
// 현재 시간 가져오기
document.getElementById(" get_current_time").onclick=function(){
console.log("audio.currentTime: " audio.currentTime);
};
// 재생
document.getElementById("get_played" ).onclick=function(){
console.log("audio.played:");
var ranges=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("autoplay on ");
};
// 자동 재생 끄기
document.getElementById("autoplay_off").onclick=function(){
audio.autoplay=false;
updateAutoplay();
console.log("autoplay off");
};
// 자동 재생 가져오기
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_hide").onclick=function(){
audio.controls=false;
updateControls();
console.log("controls hide");
};
// 컨트롤 가져오기
document.getElementById("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("loop off");
};
// 루프 가져오기
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) ;
};
// defaultMute 가져오기
document.getElementById("get_default_muted").onclick=function(){
console.log("audio.defaultMute: " audio.defaultMute);
};
// 음소거
document.getElementById("mute").onclick=function(){
audio.muted=true;
updateMated();
console.log("오디오 음소거 ");
};
// 음소거 해제
document.getElementById("unmute").onclick=function(){
audio.muted=false;
updateMated();
console.log("audio unmute");
};
// 음소거 해제
document.getElementById("get_muted").onclick=function(){
console.log("audio .muted: " audio.muted);
};
// defaultPlaybackRate 가져오기
document.getElementById("get_default_playback_rate").onclick=function(){
console.log("audio.defaultPlaybackRate : " audio.defaultPlaybackRate);
};
// 재생 속도 설정-
document.getElementById("playback_rate_down").onclick=function(){
audio.playbackRate-=0.2;
console.log("playbackRate-0.2");
};
// 재생 속도 설정
document.getElementById("playback_rate_up").onclick=function(){
audio.playbackRate =0.2 ;
console.log("playbackRate 0.2");
};
// 재생 속도 가져오기
document.getElementById("get_playback_rate").onclick=function(){
console.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("audio. ReadyState: " audio.readyState);
};
// 버퍼링됨
document.getElementById("get_buffered").onclick=function(){
console.log("audio.buffered: ");
var ranges=audio.buffered;
var n=ranges.length;
for(var i=0;i console.log("(" ranges.start(i) "," ranges.end(i) ")");
}
};
// 검색 가능
document.getElementById("get_seekable").onclick= function(){
console.log("audio.seekable:");
var ranges=audio.seekable;
var n=ranges.length;
for(var i=0;i< ;n;i ){
console.log("(" ranges.start(i) "," ranges.end(i) ")");
}
};

// DOM 이벤트

// 중단
audio.addEventListener("abort",function(){
console.log("event:abort");
});
// 재생 가능
audio.addEventListener("canplay",function(){
console.log("event:canplay");
});
// 재생 가능
오디오 .addEventListener("canplaythrough",function(){
console.log("event:canplaythrough");
});
// 기간 변경
audio.addEventListener("durationchange",function( ){
updateDuration();
console.log("event:durationchange");
});
// 비움
audio.addEventListener("emptied",function(){
updateSrc();
updateCurrentSrc();
updateDuration();
updatePaused();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
updatePlayed();
console.log("event:emptied");
});
// 종료됨
audio.addEventListener("ended", function(){
updateEnded();
console.log("event:ended");
});
// 로드된 데이터
audio.addEventListener("loadeddata",function( ){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:loadeddata");
});
// 로드된 메타데이터
audio.addEventListener("loadedmetadata",function(){
console.log("event:loadedmetadata");
});
// 로드 시작
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");
});
// ratechange
audio.addEventListener ("ratechange",function(){
updatePlaybackRate();
console.log("event:ratechange");
});
// 탐색
audio.addEventListener(" 탐색",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:suspens");
});
// timeupdate
audio.addEventListener("timeupdate",function(){
updateCurrentTime();
updateEnded( );
updatePlayed();
console.log("event:timeupdate");
});
// 볼륨 변경
audio.addEventListener("volumechange",function(){
updateVolume();
console.log("event:volumechange");
});
// 대기 중
audio.addEventListener("waiting",function(){
console.log("event:waiting");
});
updateAutoplay();
updateControls();
updateDefaultMulated();
updateDefaultPlaybackRate();
updateLoop ();
updatePreload();
updateSrc();
updateCurrentSrc();
updateDuration();
updateCurrentTime();
updateVolume();
updatePaused( );
updateMute();
updateEnded();
updatePlaybackRate();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable() ;
updatePlayed();
updateError();
};
// 정보 테이블을 업데이트하는 함수
// autoplay
function updateAutoplay(){
document.getElementById ("autoplay").innerHTML=audio.autoplay;
}
// 컨트롤
function updateControls(){
document.getElementById("controls").innerHTML=audio.controls;
> ){
document.getElementById("default_playback_rate").innerHTML=audio.defaultPlaybackRate;
}
// loop
function updateLoop(){
document.getElementById("loop"). innerHTML=audio.loop;
}
// preload
function updatePreload(){
document.getElementById("preload").innerHTML=audio.preload;
}
/ / src
function updateSrc(){
document.getElementById("src").innerHTML=audio.src;
}
// currentSrc
function updateCurrentSrc(){
문서 .getElementById("current_src").innerHTML=audio.currentSrc;
}
// 기간
function updateDuration(){
document.getElementById("duration").innerHTML=audio.duration;
}
// currentTime
function updateCurrentTime(){
document.getElementById("current_time").innerHTML=audio.currentTime;
}
// 종료
함수 updateEnded(){
document.getElementById("ended").innerHTML=audio.ended;
}
// 일시 중지됨
function updatePaused(){
document.getElementById("일시 중지됨" ).innerHTML=audio.paused;
}
// 음소거
function updateMute(){
document.getElementById("muted").innerHTML=audio.muted;
}
// 볼륨
함수 updateVolume(){
document.getElementById("volume").innerHTML=audio.volume;
}
// PlaybackRate
함수 updatePlaybackRate(){
document.getElementById("playback_rate").innerHTML=audio.playbackRate;
}
// networkState
function updateNetworkState(){
document.getElementById("network_state").innerHTML=audio. networkState;
}
// ReadyState
function updateReadyState(){
document.getElementById("ready_state").innerHTML=audio.readyState;
}
// 버퍼링됨
function updateBuffered(){
var ranges=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;
}
// 검색 가능
function updateSeekable(){
var 범위 =audio.seekable;
var str="";
var n=ranges.length;
for(var i=0;i str ="(" 범위 .start(i) "," ranges.end(i) ")";
if(i!=n-1){
str ="
";
}
}
document.getElementById("seekable").innerHTML=str;
}
// Playing
function updatePlayed(){
var ranges=audio.played;
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("재생됨") .innerHTML=str;
}
// 오류
function updateError(){
document.getElementById("error").innerHTML=audio.error;
}