Je vais juste vous fournir un exemple de code, donc je ne vais pas entrer dans trop de bêtises.
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;
}
Quelles sont les méthodes de production de production d'animation html5 ?
Obtenir la méthode du handle de fenêtre
La différence entre l'API de repos et l'API
La différence entre HTML et HTML5
Que faire si le changement de nom du fichier temporaire échoue
Quel est le format png
Pourquoi l'ordinateur redémarre-t-il automatiquement ?
Vérificateur de compatibilité
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
