Guide d'utilisation de l'API pour les médias (lecteur) dans les compétences du didacticiel html5_html5

Je vais juste vous fournir un exemple de code, donc je ne vais pas entrer dans trop de bêtises.

Copier le code

Le code est le suivant :

API audio HTML5

Démo de l'API audio HTML5 par http://github.com/LearnShare" target="_blank">LearnShare.

Dernière mise à jour @2013-04-23 20:40:00
ajouter un tableau d'informations
mise à jour @2013-04-22 14:54:00
ajouter des événements DOM
mettre à jour @2013-04-22 12:47:00
ajouter le bouton getCurrentSrc

Afficher le code sur http https://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/" target="_blank">LearnShare.github.io.
Référence API : https://developer.mozilla.org/ zh-CN/docs/DOM/HTMLMediaElement" target="_blank">HTMLMediaElement et http://www.w3schools.com/tags/ref_av_dom.asp " target="_blank">Références DOM audio/vidéo

< ;h2>Élément audio

Ouvrez l'outil de développement pour afficher les journaux de la console.

Contrôles

play
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>


getDefaultMuted
mute
unmute
getMuted


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


getNetworkState

getBuffered
getSeekable

<à part>

Attrs joueur

< ;td>controls:

lecture automatique :
defaultMuted :
defaultPlaybackRate :< ;/td>
boucle :
preload :

Informations sur le joueur

< ;tr>

src:
currentSrc :	< /td>
durée :
currentTime :
terminé :
en pause :
muet :
volume:
playbackRate :

Statut de lecture

< td id="seekable">

networkState :< ;/td>
readyState :
buffered :
recherchable :
joué :
erreur :

audio-controls.js

复制代码

代码如下 :

window.onload=function(){
// obtenir l'élément autio
var audio=document.getElementById("audio");
// play()
document. getElementById("play").onclick=function(){
audio.play();
console.log("play");
};
// pause()
document.getElementById("pause").onclick=function(){
audio.pause();
console.log("pause");
};
// se met en pause
document.getElementById("get_paused").onclick=function(){
console.log("audio.paused: " audio.paused);
};
// se termine
document .getElementById("get_ended").onclick=function(){
console.log("audio.ended: " audio.ended);
};
// définir le volume-
document. getElementById("volume_down").onclick=function(){
audio.volume-=0.2;
console.log("volume-0.2");
};
// définir le volume
document.getElementById("volume_up").onclick=function(){
audio.volume =0.2;
console.log("volume 0.2");
};
// obtenir volume
document.getElementById("get_volume").onclick=function(){
console.log("audio.volume: " audio.volume);
};
// obtenir src
document.getElementById("get_src").onclick=function(){
console.log("audio.src: " audio.src);
};
// set src_music1
document.getElementById("play_music1").onclick=function(){
audio.src="./media/music1.mp3";
updateSrc();
updateCurrentSrc();
console .log("play music1");
};
// set src_music2
document.getElementById("play_music2").onclick=function(){
audio.src="./media /music2.mp3";
updateSrc();
updateCurrentSrc();
console.log("play music2");
};
// définit le document Remove_music
. getElementById("remove_music").onclick=function(){
audio.src="";
console.log("remove music");
};
// récupère currentSrc
document.getElementById("get_current_src").onclick=function(){
console.log("audio.currentSrc: " audio.currentSrc);
};
// récupérer initialTime
document .getElementById("get_initial_time").onclick=function(){
console.log("audio.initialTime: " audio.initialTime);
};
// obtenir la durée
document.getElementById ("get_duration").onclick=function(){
console.log("audio.duration: " audio.duration);
};
// recherche
document.getElementById(" get_seeking").onclick=function(){
console.log("audio.seeking: " audio.seeking);
};
// set currentTime
document.getElementById("jump_to" ).onclick=function(){
audio.currentTime=30;
console.log("jumpTo 30s");
};
// obtenir currentTime
document.getElementById(" get_current_time").onclick=function(){
console.log("audio.currentTime: " audio.currentTime);
};
// se faire jouer
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) ")");
}
};
// lecture automatique sur
document.getElementById("autoplay_on").onclick=function(){
audio.autoplay=true;
updateAutoplay();
console.log("lecture automatique sur ");
};
// lecture automatique désactivée
document.getElementById("autoplay_off").onclick=function(){
audio.autoplay=false;
updateAutoplay();
console.log("autoplay off");
};
// obtenir la lecture automatique
document.getElementById("get_autoplay").onclick=function(){
console.log(" audio.autoplay : " audio.autoplay);
};
// contrôles show
document.getElementById("controls_show").onclick=function(){
audio.controls=true;
updateControls();
console.log("controls show");
};
// contrôles cachés
document.getElementById("controls_hide").onclick=function(){
audio.controls=false;
updateControls();
console.log("controls hide");
};
// obtenir des contrôles
document.getElementById("get_controls" ).onclick=function(){
console.log("audio.controls: " audio.controls);
};
// boucle sur
document.getElementById("loop_on"). onclick=function(){
audio.loop=true;
updateLoop();
console.log("loop on");
};
// boucle désactivée
document.getElementById("loop_off").onclick=function(){
audio.loop=false;
updateLoop();
console.log("loop off");
};
// obtenir la boucle
document.getElementById("get_loop").onclick=function(){
console.log("audio.loop: " audio.loop);
};
// précharger les métadonnées
document.getElementById("preload_metadata").onclick=function(){
audio.preload="metadata";
updatePreload();
console.log("précharger les métadonnées ");
};
// obtenir le préchargement
document.getElementById("get_preload").onclick=function(){
console.log("audio.preload: " audio.preload) ;
};
// get defaultMuted
document.getElementById("get_default_muted").onclick=function(){
console.log("audio.defaultMuted: " audio.defaultMuted);
};
// muet
document.getElementById("mute").onclick=function(){
audio.muted=true;
updateMuted();
console.log("audio muet ");
};
// réactiver le son
document.getElementById("unmute").onclick=function(){
audio.muted=false;
updateMuted();
console.log("audio unmute");
};
// être mis en sourdine
document.getElementById("get_muted").onclick=function(){
console.log("audio .muted : " audio.muted);
};
// obtenir defaultPlaybackRate
document.getElementById("get_default_playback_rate").onclick=function(){
console.log("audio.defaultPlaybackRate : " audio.defaultPlaybackRate);
};
// set playbackRate-
document.getElementById("playback_rate_down").onclick=function(){
audio.playbackRate-=0.2;
console.log("playbackRate-0.2");
};
// définit le playbackRate
document.getElementById("playback_rate_up").onclick=function(){
audio.playbackRate =0.2 ;
console.log("playbackRate 0.2");
};
// obtenir playbackRate
document.getElementById("get_playback_rate").onclick=function(){
console.log ("audio.playbackRate: " audio.playbackRate);
};
// obtenir networkState
document.getElementById("get_network_state").onclick=function(){
console.log(" audio.networkState : " audio.networkState);
};
// get readyState
document.getElementById("get_ready_state").onclick=function(){
console.log("audio. readyState : " audio.readyState);
};
// obtenir un tampon
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) ")");
}
};
// obtenir la recherche
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) ")");
}
};

// Événements DOM

// abandon
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");
});
// duréechange
audio.addEventListener("durationchange",function( ){
updateDuration();
console.log("event:durationchange");
});
// vidé
audio.addEventListener("emptied",function(){
updateSrc();
updateCurrentSrc();
updateDuration();
updatePaused();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
updatePlayed();
console.log("event:emptied");
});
// terminé
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");
});
// lecture
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");
});
// recherché
audio.addEventListener(" seeked",function(){
console.log("event:seeked");
});
// recherche
audio.addEventListener("seeking",function(){
console.log("event:seeking");
});
// bloqué
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.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;
}