html5 music player_html5 튜토리얼 기술의 오디오 태그 사용 개요

코드 복사

코드는 다음과 같습니다.

HTMLVideoElement 및 HTMLAudioElement 개체 가져오기

코드 복사코드는 다음과 같습니다.

//오디오는 new
Media = newAudio("http://www.abc.com/test.mp3")를 통해 직접 객체를 생성할 수 있습니다.
//오디오와 비디오 모두 객체
Media = document.getElementById("media");

미디어 메서드 및 속성:
HTMLVideoElement 및 HTMLAudioElement는 모두 HTMLMediaElement에서 상속됩니다.

코드 복사코드는 다음과 같습니다.

//오류 상태
Media.error / /null: 일반
Media.error.code; //1. 사용자 종료 2. 네트워크 오류 3. 디코딩 오류 4. 잘못된 URL
//네트워크 상태
//URL을 반환합니다. 현재 리소스
Media.src = value; //현재 리소스의 URL을 반환하거나 설정합니다.
Media.canPlayType(type) //특정 형식의 리소스를 재생할 수 있는지 여부
미디어. networkState; //0. 이 요소는 사용할 수 없습니다. 초기화 1. 정상이지만 네트워크를 사용하지 않습니다. 2. 데이터를 다운로드하는 중입니다. 3. 리소스를 찾을 수 없습니다.
Media.load() //src에서 지정한 리소스를 다시 로드합니다.
.buffered; //버퍼링된 영역으로 돌아가기, TimeRanges
Media.preload; //none: 메타데이터를 미리 로드하지 않음: 리소스 정보를 미리 로드함 auto:
//Ready state
Media.readyState; :HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //탐색 여부
//재생 상태
Media.currentTime = value; 값을 할당하면 위치가 변경될 수 있습니다
Media.startTime; / / 일반적으로 0, 스트리밍 미디어이거나 0에서 시작하지 않는 리소스인 경우 0이 아닙니다.
Media.duration; 길이 스트림은 무한을 반환합니다.
Media.paused; // 일시 중지 여부
Media.defaultPlaybackRate = value; //기본 재생 속도를 설정할 수 있습니다.
Media.playbackRate = value; 설정 직후
Media.played; //재생된 영역인 TimeRanges로 돌아갑니다. 이 객체는 아래를 참조하세요.
Media.seekable; //탐색 가능한 영역 TimeRanges를 반환합니다.
Media.ended; /종료 여부
Media.autoPlay; //자동 재생 여부
Media.loop ; //재생 반복 여부
Media.play() //Play
Media.pause() ; //일시 중지
//Control
Media.controls;//기본 컨트롤 막대가 있는지 여부
Media.volume = value; //Volume
Media.muted = value;
//TimeRanges(영역) 객체
TimeRanges.length; //영역 세그먼트 수
TimeRanges.start(index) //인덱스 섹션의 시작 위치
TimeRanges.end(index ) //인덱스 섹션 영역의 끝 위치
이벤트:
eventTester = function(e){
Media .addEventListener(e,function(){
console.log((newDate() ).getTime(),e);
});
}
eventTester("loadstart") / /클라이언트가 데이터 요청을 시작합니다
eventTester("progress"); 데이터를 요청 중입니다
eventTester("suspens"); //지연된 다운로드
eventTester("abort"); //클라이언트가 적극적으로 다운로드를 종료합니다(오류로 인한 것이 아님),
eventTester(" error"); //데이터를 요청할 때 오류가 발생했습니다
eventTester("stalled"); //네트워크 속도가 멈췄습니다
eventTester(" play"); //play() 및 자동 재생이 재생을 시작할 때 트리거됩니다.
eventTester("pause"); //pause()에 의해 트리거됨
eventTester("loadedmetadata"); //리소스 길이를 성공적으로 가져옴
eventTester("loadeddata") //
eventTester( "waiting"); //오류가 아닌 데이터를 기다리는 중
eventTester("playing"); //재생 시작
eventTester("canplay"); loading
eventTester("canplaythrough"); //재생 가능, 모든 곡 로드됨
eventTester("seeking") //검색 중
eventTester( "seeked"); 🎜>eventTester("timeupdate"); //재생 시간 변경
eventTester("ended"); //재생 종료
eventTester("ratechange") // 재생 속도 변경
eventTester("durationchange" "); //리소스 길이 변경
eventTester("volumechange"); //볼륨 변경


自己写的一段js：

复代码如下:

$(function() {

var p = new Player();

p.read("play");
$("#stop").click(function() {
p .pause();
});
$("#start").click(function() {
p.play();
}); show").click(function() {
alert(p.duration());
});
setInterval(function() {
$("#currentTime").text( p.currentTime());
},1000)
});
함수 Player() {};
Player.prototype = {
box : new Object(),
read : function(id) {
this.box = document.getElementById(id);
},
play : function() {
this.box.play();
},
pause : function() {
this.box.pause();
},
src:function(url){
this.box.src=url;
},
currentTime:function(){
return (this.box.currentTime/60).toFixed(2);
}
};
Player.prototype.duration=function(){
return (this.box.duration/60).toFixed(2);
};