오디오 요소 중 어떤 사건이 발생할지 조사
14006 단어 JavaScript
아이폰의 사파리에서도 안드로이드 브라우저에서는 전혀 일어나지 않는 사건도 있다.
프로그램 라이브러리를 사용하지 않은 상태에서 오디오 이벤트 제어를 할 때 주의해야 한다.
다음 코드 출력 불러오기 시작 후 몇 밀리초 동안 어떤 이벤트가 발생했습니까?
<!DOCTYPE html>
<html>
<head>
<title>Audio/Video Event Checker</title>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1"/>
<style>
body{
background:black;
color:lime;
line-height:1.5;
width:320px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
font-size: 13px;
margin:0;
padding:0;
padding-left:5px;
}
</style>
</head>
<body>
<button id="load">play</button><button id="clear">clear log</button>
<section id="log"></section>
<script>
document.addEventListener('DOMContentLoaded',function(){
// 起こりうる22のイベント
var event_list = [
"abort","canplay","canplaythrough","durationchange","emptied",
"ended","error","loadeddata","loadedmetadata","loadstart",
"pause","play","playing","progress","ratechange","seeking",
"seeked","stalled","suspend","timeupdate","volumechange","waiting"
];
// イベント全部にリスナーを登録
function addEvents(etarget){
var _leng = event_list.length;
for(var _i = 0; _i < _leng; _i++){
etarget.addEventListener(event_list[_i],function(event){
log(event.type+"\t:\t",Date.now() - window.start_time + "ms");
});
}
}
var lasttype = "";
// ログの出力
function log(type,time){
var pnode = document.getElementById('log');
var fchild = pnode.firstChild;
time ? time : time = "";
// 同じイベントが連続する場合つなげて表示
if(type===lasttype){
var _elem = document.createElement('span');
_elem.innerText = ", "+time;
fchild.appendChild(_elem);
}else{
lasttype = type;
var _elem = document.createElement('div');
_elem.innerText = type + time;
pnode.insertBefore(_elem,fchild);
}
}
var audio = new Audio();
addEvents(audio);
document.getElementById('load').addEventListener('click',function(){
log("-------------------------------------");
window.start_time = Date.now();
audio.src = "audio.mp3";
audio.play();
});
document.getElementById('clear').addEventListener('click',function(){
document.getElementById('log').innerHTML = "";
});
});
</script>
</body>
</html>
※
audio.mp3 재생할 수 없는 터미널입니다. 재생할 미디어를 지정하십시오.액션 화면
브라우저에 따라 행동도 크게 다르기 때문에 보자마자 멍해졌다.
참조 링크
Reference
이 문제에 관하여(오디오 요소 중 어떤 사건이 발생할지 조사), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakajmg/items/ec7fe1b5833547a2ed6c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
