在网页开发中，我们经常会遇到需要在页面中嵌入音频或视频的情况。而在加载音频/视频文件时，我们可能需要获取一些关于这些媒体文件的元数据，比如时长、尺寸等信息。为了实现这一功能，我们可以利用 HTML 音频/视频 DOM 的 loadedmetadata 事件。
什么是 loadedmetadata 事件？
loadedmetadata 事件在音频/视频 DOM 元素加载其元数据时触发。元数据包括诸如时长、尺寸等关于媒体文件的信息。通过监听这一事件，我们可以在元数据加载完成后执行相应的操作，比如显示媒体文件的时长。
如何使用 loadedmetadata 事件？
要使用 loadedmetadata 事件，首先我们需要创建一个音频/视频元素，并为其添加一个事件监听器。当元数据加载完成时，事件处理程序将会被调用。
下面是一个简单的示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Metadata Example</title>
</head>
<body>
<audio id="myAudio" controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<script>
const audio = document.getElementById('myAudio');
audio.addEventListener('loadedmetadata', function() {
console.log('Audio duration: ' + audio.duration + ' seconds');
});
</script>
</body>
</html>在上面的示例中，我们创建了一个音频元素，并为其添加了一个 loadedmetadata 事件监听器。当元数据加载完成时，控制台会输出音频文件的时长。
注意事项
loadedmetadata事件只会在音频/视频元素加载元数据时触发一次，如果需要在每次播放时获取元数据，可以考虑使用loadeddata事件。- 在使用
loadedmetadata事件时，需要确保音频/视频文件已经加载完成，否则无法获取到正确的元数据信息。
通过学习和使用 HTML 音频/视频 DOM 的 loadedmetadata 事件，我们可以更好地控制和管理媒体文件的元数据信息，为用户提供更好的体验。希望本文能帮助你更好地理解和应用这一事件。