audio标签的属性和事件
2020-5-12 zhulinan JavaScript
<!DOCTYPE html><html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>audio标签的属性和事件</title>
</head>
<body>
<div>参考资料：
<br />https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
</div>
<audio id='myMp3' src='http://xia2.kekenet.com/Sound/2019/12/cet4190601_5714958TtK.mp3' controls='controls'></audio><input type='button' value='查看属性' onclick='getAttr()' />
<br /><textarea id='myTs1' cols=100 rows=40></textarea><textarea id='myTs2' cols=100 rows=40></textarea>
<script type='text/javascript'>
var mp3 = document.getElementById('myMp3');
var ts1 = document.getElementById('myTs1');
var ts2 = document.getElementById('myTs2');
ts1.value = '';
ts2.value = '';
mp3.addEventListener('abort', function() {
ts1.value = 'abort\n' + ts1.value;
});
mp3.addEventListener('canplay', function() {
ts1.value = 'canplay\n' + ts1.value;
});
mp3.addEventListener('canplaythrough', function() {
ts1.value = 'canplaythrough\n' + ts1.value;
});
mp3.addEventListener('durationchange', function() {
ts1.value = 'durationchange\n' + ts1.value;
});
mp3.addEventListener('emptied', function() {
ts1.value = 'emptied\n' + ts1.value;
});
mp3.addEventListener('ended', function() {
ts1.value = 'ended\n' + ts1.value;
});
mp3.addEventListener('error', function() {
ts1.value = 'error\n' + ts1.value;
});
mp3.addEventListener('loadeddata', function() {
ts1.value = 'loadeddata\n' + ts1.value;
});
mp3.addEventListener('loadedmetadata', function() {
ts1.value = 'loadedmetadata\n' + ts1.value;
});
mp3.addEventListener('loadstart', function() {
ts1.value = 'loadstart\n' + ts1.value;
});
mp3.addEventListener('pause', function() {
ts1.value = 'pause\n' + ts1.value;
});
mp3.addEventListener('play', function() {
ts1.value = 'play\n' + ts1.value;
});
mp3.addEventListener('playing', function() {
ts1.value = 'playing\n' + ts1.value;
});
mp3.addEventListener('progress', function() {
ts1.value = 'progress\n' + ts1.value;
});
mp3.addEventListener('ratechange', function() {
ts1.value = 'ratechange\n' + ts1.value;
});
mp3.addEventListener('seeked', function() {
ts1.value = 'seeked\n' + ts1.value;
});
mp3.addEventListener('seeking', function() {
ts1.value = 'seeking\n' + ts1.value;
});
mp3.addEventListener('stalled', function() {
ts1.value = 'stalled\n' + ts1.value;
});
mp3.addEventListener('suspend', function() {
ts1.value = 'suspend\n' + ts1.value;
});
mp3.addEventListener('timeupdate', function() {
ts1.value = 'timeupdate\n' + ts1.value;
});
mp3.addEventListener('volumechange', function() {
ts1.value = 'volumechange\n' + ts1.value;
});
mp3.addEventListener('waiting', function() {
ts1.value = 'waiting\n' + ts1.value;
});
function getAttr() {
ts2.value = 'audioTracks:' + mp3.audioTracks;
ts2.value += '\nautoplay:' + mp3.autoplay;
var s1 = '';
var len = mp3.buffered.length;
for (i = 0; i < len; i ++) {
if (s1 == '') {
s1 = '[' + mp3.buffered.start(i) + ',' + mp3.buffered.end(i) + ']';
} else {
s1 += ',[' + mp3.buffered.start(i) + ',' + mp3.buffered.end(i) + ']';
}
}
if (s1 == '') s1 = 'null';
ts2.value += '\nbuffered:' + s1;
ts2.value += '\ncontroller:' + mp3.controller;
ts2.value += '\ncontrols:' + mp3.controls;
ts2.value += '\ncrossOrigin:' + mp3.crossOrigin;
ts2.value += '\ncurrentSrc:' + mp3.currentSrc;
ts2.value += '\ncurrentTime:' + mp3.currentTime;
ts2.value += '\ndefaultMuted:' + mp3.defaultMuted;
ts2.value += '\ndefaultPlaybackRate:' + mp3.defaultPlaybackRate;
ts2.value += '\nduration:' + mp3.duration;
ts2.value += '\nended:' + mp3.ended;
if (mp3.error) {
ts2.value += '\nerror.code:' + mp3.error.code;
} else {
ts2.value += '\nerror:null';
}
ts2.value += '\nloop:' + mp3.loop;
ts2.value += '\nmediaGroup:' + mp3.mediaGroup;
ts2.value += '\nmuted:' + mp3.muted;
ts2.value += '\nnetworkState:' + mp3.networkState;
ts2.value += '\npaused:' + mp3.paused;
ts2.value += '\nplaybackRate:' + mp3.playbackRate;
s1 = '';
len = mp3.played.length;
for (i = 0; i < len; i ++) {
if (s1 == '') {
s1 = '[' + mp3.played.start(i) + ',' + mp3.played.end(i) + ']';
} else {
s1 += ',[' + mp3.played.start(i) + ',' + mp3.played.end(i) + ']';
}
}
if (s1 == '') s1 = 'null';
ts2.value += '\nplayed:' + s1;
ts2.value += '\npreload:' + mp3.preload;
ts2.value += '\nreadyState:' + mp3.readyState;
s1 = '';
len = mp3.seekable.length;
for (i = 0; i < len; i ++) {
if (s1 == '') {
s1 = '[' + mp3.seekable.start(i) + ',' + mp3.seekable.end(i) + ']';
} else {
s1 += ',[' + mp3.seekable.start(i) + ',' + mp3.seekable.end(i) + ']';
}
}
if (s1 == '') s1 = 'null';
ts2.value += '\nseekable:' + s1;
ts2.value += '\nseeking:' + mp3.seeking;
ts2.value += '\nsrc:' + mp3.src;
ts2.value += '\nstartDate:' + mp3.startDate;
s1 = '';
len = mp3.textTracks.length;
for (i = 0; i < len; i ++) {
s1 += '\n 轨道' + i;
s1 += '\n kind:' + mp3.textTracks[i].kind;
s1 += '\n label:' + mp3.textTracks[i].label;
s1 += '\n language:' + mp3.textTracks[i].language;
s1 += '\n mode:' + mp3.textTracks[i].mode;
s1 += '\n cues:' + mp3.textTracks[i].cues;
s1 += '\n activeCues:' + mp3.textTracks[i].activeCues;
}
if (s1 == '') {
ts2.value += '\ntextTracks:null';
} else {
ts2.value += '\ntextTracks:\n';
ts2.value += s1;
}
ts2.value += '\nvideoTracks:' + mp3.videoTracks;
ts2.value += '\nvolume:' + mp3.volume;
}
</script>
</body>
</html>