html5中 media（播放器）的api使用指南

2020-03-24 18:00:47

字体：大中小

来源：转载

供稿：网友

直接奉上示例代码，废话就不多说了。
复制代码代码如下:
!doctype html
html lang="en"
head
meta charset="UTF-8"
title HTML Audio API /title
link rel="stylesheet" href="./style/main.css" /
script src="./script/audio-controls.js" /script
/head
body
header
h1 HTML5 Audio API /h1
p HTML5 Audio API demo by a href=" a href="http://github.com/LearnShare" http://github.com/LearnShare /a " target="_blank" LearnShare /a . /p
p
Last update @2013-04-23 20:40:00
+ add info table
update @2013-04-22 14:54:00
+ add DOM events
update @2013-04-22 12:47:00
+ add getCurrentSrc button
/p
p
View code on a href=" a href="http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/" http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/ /a " target="_blank" LearnShare.github.io /a .
API reference: a href=" a href="https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement" https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement /a " target="_blank" HTMLMediaElement /a and a href=" a href="http://www.w3schools.com/tags/ref_av_dom.asp" http://www.w3schools.com/tags/ref_av_dom.asp /a " target="_blank" Audio/Video DOM References /a
/p
/header
article
section
h2 Audio Element /h2
audio id="audio" src="./media/music1.mp3" controls="controls" /audio
p Open the strong developer tool /strong to view console logs. /p
/section
section
h2 Controls /h2
button id="play" play /button
button id="pause" pause /button
button id="get_paused" getPaused /button
button id="get_ended" getEnded /button

button id="volume_down" volume- /button
button id="volume_up" volume+ /button
button id="get_volume" getVolume /button

button id="get_src" getSrc /button
button id="play_music1" playMusic1 /button
button id="play_music2" playMusic2 /button
button id="remove_music" removeMusic /button
button id="get_current_src" getCurrentSrc /button

button id="get_initial_time" getInitialTime /button
button id="get_duration" getDuration /button
button id="get_seeking" getSeeking /button
button id="jump_to" jumpTo_30s /button
button id="get_current_time" getCurrentTime /button
button id="get_played" getPlayed /button

button id="autoplay_on" autoplay_on /button
button id="autoplay_off" autoplay_off /button
button id="get_autoplay" getAutoplay /button

button id="controls_show" controls_show /button
button id="controls_hide" controls_hide /button
button id="get_controls" getControls /button

button id="loop_on" loop_on /button
button id="loop_off" loop_off /button
button id="get_loop" getLoop /button

button id="preload_metadata" preload_metadata /button
button id="get_preload" getPreload /button

button id="get_default_muted" getDefaultMuted /button
button id="mute" mute /button
button id="unmute" unmute /button
button id="get_muted" getMuted /button

button id="get_default_playback_rate" getDefaultPlaybackRate /button
button id="playback_rate_down" playbackRate- /button
button id="playback_rate_up" playbackRate+ /button
button id="get_playback_rate" getPlaybackRate /button

button id="get_network_state" getNetworkState /button
button id="get_ready_state" getReadyState /button
button id="get_buffered" getBuffered /button
button id="get_seekable" getSeekable /button
/section
/article
aside
section
h3 Player Attrs /h3
table
tr
td autoplay: /td
td id="autoplay" /td
/tr
tr
td controls: /td
td id="controls" /td
/tr
tr
td defaultMuted: /td
td id="default_muted" /td
/tr
tr
td defaultPlaybackRate: /td
td id="default_playback_rate" /td
/tr
tr
td loop: /td
td id="loop" /td
/tr
tr
td preload: /td
td id="preload" /td
/tr
/table
/section
section
h3 Player Info /h3
table
tr
td src: /td
td id="src" /td
/tr
tr
td currentSrc: /td
td id="current_src" /td
/tr
tr
td duration: /td
td id="duration" /td
/tr
tr
td currentTime: /td
td id="current_time" /td
/tr
tr
td ended: /td
td id="ended" /td
/tr
tr
td paused: /td
td id="paused" /td
/tr
tr
td muted: /td
td id="muted" /td
/tr
tr
td volume: /td
td id="volume" /td
/tr
tr
td playbackRate: /td
td id="playback_rate" /td
/tr
/table
/section
section
h3 Play status /h3
table
tr
td networkState: /td
td id="network_state" /td
/tr
tr
td readyState: /td
td id="ready_state" /td
/tr
tr
td buffered: /td
td id="buffered" /td
/tr
tr
td seekable: /td
td id="seekable" /td
/tr
tr
td played: /td
td id="played" /td
/tr
tr
td error: /td
td id="error" /td
/tr
/table
/section
/aside
/body
/html
audio-controls.js
复制代码代码如下:
window.onload=function(){
// get autio element
var audio=document.getElementById("audio");
// play()
document.getElementById("play"). unction(){
audio.play();
console.log("play");
};
// pause()
document.getElementById("pause"). unction(){
audio.pause();
console.log("pause");
};
// get paused
document.getElementById("get_paused"). unction(){
console.log("audio.paused: "+audio.paused);
};
// get ended
document.getElementById("get_ended"). unction(){
console.log("audio.ended: "+audio.ended);
};
// set volume-
document.getElementById("volume_down"). unction(){
audio.volume-=0.2;
console.log("volume-0.2");
};
// set volume+
document.getElementById("volume_up"). unction(){
audio.volume+=0.2;
console.log("volume+0.2");
};
// get volume
document.getElementById("get_volume"). unction(){
console.log("audio.volume: "+audio.volume);
};
// get src
document.getElementById("get_src"). unction(){
console.log("audio.src: "+audio.src);
};
// set src_music1
document.getElementById("play_music1"). unction(){
audio.src="./media/music1.mp3";
updateSrc();
updateCurrentSrc();
console.log("play music1");
};
// set src_music2
document.getElementById("play_music2"). unction(){
audio.src="./media/music2.mp3";
updateSrc();
updateCurrentSrc();
console.log("play music2");
};
// set remove_music
document.getElementById("remove_music"). unction(){
audio.src="";
console.log("remove music");
};
// get currentSrc
document.getElementById("get_current_src"). unction(){
console.log("audio.currentSrc: "+audio.currentSrc);
};
// get initialTime
document.getElementById("get_initial_time"). unction(){
console.log("audio.initialTime: "+audio.initialTime);
};
// get duration
document.getElementById("get_duration"). unction(){
console.log("audio.duration: "+audio.duration);
};
// get seeking
document.getElementById("get_seeking"). unction(){
console.log("audio.seeking: "+audio.seeking);
};
// set currentTime
document.getElementById("jump_to"). unction(){
audio.currentTime=30;
console.log("jumpTo 30s");
};
// get currentTime
document.getElementById("get_current_time"). unction(){
console.log("audio.currentTime: "+audio.currentTime);
};
// get played
document.getElementById("get_played"). unction(){
console.log("audio.played:");
var ranges=audio.played;
var n=ranges.length;
for(var i=0;i i++){
console.log("("+ranges.start(i)+","+ranges.end(i)+")");
}
};
// autoplay on
document.getElementById("autoplay_on"). unction(){
audio.autoplay=true;
updateAutoplay();
console.log("autoplay on");
};
// autoplay off
document.getElementById("autoplay_off"). unction(){
audio.autoplay=false;
updateAutoplay();
console.log("autoplay off");
};
// get autoplay
document.getElementById("get_autoplay"). unction(){
console.log("audio.autoplay: "+audio.autoplay);
};
// controls show
document.getElementById("controls_show"). unction(){
audio.controls=true;
updateControls();
console.log("controls show");
};
// controls hide
document.getElementById("controls_hide"). unction(){
audio.controls=false;
updateControls();
console.log("controls hide");
};
// get controls
document.getElementById("get_controls"). unction(){
console.log("audio.controls: "+audio.controls);
};
// loop on
document.getElementById("loop_on"). unction(){
audio.loop=true;
updateLoop();
console.log("loop on");
};
// loop off
document.getElementById("loop_off"). unction(){
audio.loop=false;
updateLoop();
console.log("loop off");
};
// get loop
document.getElementById("get_loop"). unction(){
console.log("audio.loop: "+audio.loop);
};
// preload metadata
document.getElementById("preload_metadata"). unction(){
audio.preload="metadata";
updatePreload();
console.log("preload metadata");
};
// get preload
document.getElementById("get_preload"). unction(){
console.log("audio.preload: "+audio.preload);
};
// get defaultMuted
document.getElementById("get_default_muted"). unction(){
console.log("audio.defaultMuted: "+audio.defaultMuted);
};
// mute
document.getElementById("mute"). unction(){
audio.muted=true;
updateMuted();
console.log("audio mute");
};
// unmute
document.getElementById("unmute"). unction(){
audio.muted=false;
updateMuted();
console.log("audio unmute");
};
// get muted
document.getElementById("get_muted"). unction(){
console.log("audio.muted: "+audio.muted);
};
// get defaultPlaybackRate
document.getElementById("get_default_playback_rate"). unction(){
console.log("audio.defaultPlaybackRate: "+audio.defaultPlaybackRate);
};
// set playbackRate-
document.getElementById("playback_rate_down"). unction(){
audio.playbackRate-=0.2;
console.log("playbackRate-0.2");
};
// set playbackRate+
document.getElementById("playback_rate_up"). unction(){
audio.playbackRate+=0.2;
console.log("playbackRate+0.2");
};
// get playbackRate
document.getElementById("get_playback_rate"). unction(){
console.log("audio.playbackRate: "+audio.playbackRate);
};
// get networkState
document.getElementById("get_network_state"). unction(){
console.log("audio.networkState: "+audio.networkState);
};
// get readyState
document.getElementById("get_ready_state"). unction(){
console.log("audio.readyState: "+audio.readyState);
};
// get buffered
document.getElementById("get_buffered"). unction(){
console.log("audio.buffered:");
var ranges=audio.buffered;
var n=ranges.length;
for(var i=0;i i++){
console.log("("+ranges.start(i)+","+ranges.end(i)+")");
}
};
// get seekable
document.getElementById("get_seekable"). unction(){
console.log("audio.seekable:");
var ranges=audio.seekable;
var n=ranges.length;
for(var i=0;i i++){
console.log("("+ranges.start(i)+","+ranges.end(i)+")");
}
};

// DOM events

// abort
audio.addEventListener("abort",function(){
console.log("event:abort");
});
// canplay
audio.addEventListener("canplay",function(){
console.log("event:canplay");
});
// canplaythrough
audio.addEventListener("canplaythrough",function(){
console.log("event:canplaythrough");
});
// durationchange
audio.addEventListener("durationchange",function(){
updateDuration();
console.log("event:durationchange");
});
// emptied
audio.addEventListener("emptied",function(){
updateSrc();
updateCurrentSrc();
updateDuration();
updatePaused();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
updatePlayed();
console.log("event:emptied");
});
// ended
audio.addEventListener("ended",function(){
updateEnded();
console.log("event:ended");
});
// loadeddata
audio.addEventListener("loadeddata",function(){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:loadeddata");
});
// loadedmetadata
audio.addEventListener("loadedmetadata",function(){
console.log("event:loadedmetadata");
});
// loadstart
audio.addEventListener("loadstart",function(){
console.log("event:loadstart");
});
// pause
audio.addEventListener("pause",function(){
updatePaused();
console.log("event:pause");
});
// play
audio.addEventListener("play",function(){
updatePaused();
console.log("event:play");
});
// playing
audio.addEventListener("playing",function(){
console.log("event:playing");
});
// progress
audio.addEventListener("progress",function(){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:progress");
});
// ratechange
audio.addEventListener("ratechange",function(){
updatePlaybackRate();
console.log("event:ratechange");
});
// seeked
audio.addEventListener("seeked",function(){
console.log("event:seeked");
});
// seeking
audio.addEventListener("seeking",function(){
console.log("event:seeking");
});
// stalled
audio.addEventListener("stalled",function(){
console.log("event:stalled");
});
// suspend
audio.addEventListener("suspend",function(){
console.log("event:suspend");
});
// timeupdate
audio.addEventListener("timeupdate",function(){
updateCurrentTime();
updateEnded();
updatePlayed();
console.log("event:timeupdate");
});
// volumechange
audio.addEventListener("volumechange",function(){
updateVolume();
console.log("event:volumechange");
});
// waiting
audio.addEventListener("waiting",function(){
console.log("event:waiting");
});
updateAutoplay();
updateControls();
updateDefaultMuted();
updateDefaultPlaybackRate();
updateLoop();
updatePreload();
updateSrc();
updateCurrentSrc();
updateDuration();
updateCurrentTime();
updateVolume();
updatePaused();
updateMuted();
updateEnded();
updatePlaybackRate();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
updatePlayed();
updateError();
};
// functions to update info table
// autoplay
function updateAutoplay(){
document.getElementById("autoplay").innerHTML=audio.autoplay;
}
// controls
function updateControls(){
document.getElementById("controls").innerHTML=audio.controls;
}
// defaultMuted
function updateDefaultMuted(){
document.getElementById("default_muted").innerHTML=audio.defaultMuted;
}
// defaultPlaybackRate
function updateDefaultPlaybackRate(){
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(){
document.getElementById("current_src").innerHTML=audio.currentSrc;
}
// duration
function updateDuration(){
document.getElementById("duration").innerHTML=audio.duration;
}
// currentTime
function updateCurrentTime(){
document.getElementById("current_time").innerHTML=audio.currentTime;
}
// ended
function updateEnded(){
document.getElementById("ended").innerHTML=audio.ended;
}
// paused
function updatePaused(){
document.getElementById("paused").innerHTML=audio.paused;
}
// muted
function updateMuted(){
document.getElementById("muted").innerHTML=audio.muted;
}
// volume
function updateVolume(){
document.getElementById("volume").innerHTML=audio.volume;
}
// playbackRate
function 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;
}
// buffered
function updateBuffered(){
var ranges=audio.buffered;
var str="";
var n=ranges.length;
for(var i=0;i i++){
str+="("+ranges.start(i)+","+ranges.end(i)+")";
if(i!=n-1){
str+="
";
}
}
document.getElementById("buffered").innerHTML=str;
}
// seekable
function updateSeekable(){
var ranges=audio.seekable;
var str="";
var n=ranges.length;
for(var i=0;i i++){
str+="("+ranges.start(i)+","+ranges.end(i)+")";
if(i!=n-1){
str+="
";
}
}
document.getElementById("seekable").innerHTML=str;
}
// played
function updatePlayed(){
var ranges=audio.played;
var str="";
var n=ranges.length;
for(var i=0;i i++){
str+="("+ranges.start(i)+","+ranges.end(i)+")";
if(i!=n-1){
str+="
";
}
}
document.getElementById("played").innerHTML=str;
}
// error
function updateError(){
document.getElementById("error").innerHTML=audio.error;
}
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html中关于＜blockquote＞与＜q＞区别的具体介绍

下一篇：如何制作html表格的边框？HTML table表格制作及实例