数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 JavaScript 访问音频文件中的元数据
音频文件通常包含曲目标题、表演者姓名、专辑名称、流派和出版年份作为嵌入的元数据。这些数据可能对媒体播放器、音乐库和编目工具等应用程序很有用。可以通过多种方式在 JavaScript 中访问这些元数据，特别是借助 jsmediatags 和 music-metadata-browser 等库，本文的目标是演示在 JavaScript 编程语言中用于从音频文件中检索元数据的几种技术。
访问音频元数据的方法
使用 HTML5 音频元素
HTML5 音频元素提供了一种简单的方法来加载和与浏览器中的音频文件进行交互，但是，它仅提供对有限元数据的访问，这主要与播放时间数据有关。
音频元素不提供对 ID3 标签（例如，标题、艺术家）的直接访问。为此，通常需要一个专用的库。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Metadata Display</title>
</head>
<body>
<h1>Audio Metadata</h1>
<!-- Audio element for the audio file -->
<audio id="audioElement" controls>
<source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
type="audio/mp3">
Your browser does not support the audio element.
</audio>
<!-- Container to display metadata -->
<div id="metadata">
<p id="duration">Duration: Loading...</p>
</div>
<script>
// JavaScript to access metadata when audio is loaded
const audioElement = document.getElementById("audioElement");
// Event listener for when metadata is loaded
audioElement.addEventListener("loadedmetadata", () => {
// Access and display duration
const duration = audioElement.duration;
document.getElementById("duration").textContent = `Duration: ${duration.toFixed(2)} seconds`;
});
</script>
</body>
</html>
输出
使用 Web 音频 API
Web 音频 API 能够管理音频处理，它不能直接帮助提取元数据，但是，它可以用来访问诸如持续时间、音频缓冲区信息等属性。
与音频元素一样，Web 音频 API 无法直接访问 ID3 标签，它主要提供音频解码和操作功能。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Audio Duration Display</title>
</head>
<body>
<h1>Audio Duration</h1>
<!-- Button to load the audio file -->
<button id="loadAudioButton">Load Audio File</button>
<!-- Display container for the duration -->
<p id="durationDisplay">Duration: Not loaded yet</p>
<script>
// Initialize AudioContext
const audioContext = new(window.AudioContext || window.webkitAudioContext)();
// Function to fetch and decode audio
async function loadAudio() {
try {
// Fetch the audio file
const response = await fetch("gasolina.mp3");
const arrayBuffer = await response.arrayBuffer();
// Decode audio data
const decodedData = await audioContext.decodeAudioData(arrayBuffer);
// Display duration on the webpage
document.getElementById("durationDisplay").textContent = `Duration: ${decodedData.duration.toFixed(2)} seconds`;
} catch (error) {
console.error("Error decoding audio:", error);
document.getElementById("durationDisplay").textContent = "Error loading audio.";
}
}
// Attach event to button to load audio
document.getElementById("loadAudioButton").addEventListener("click", loadAudio);
</script>
</body>
</html>
输出
使用 ID3 库 (ID3.js)
像 ID3.js 这样的 ID3 库允许从 MP3 文件中全面提取元数据，这些库解析 ID3 标签并提供对元数据的访问，例如标题、艺术家和专辑。
使用 ID3.js
要使用 ID3.js，您必须在项目中包含该库，然后可以通过将文件作为 Blob 或 File 对象传递来读取元数据。
- **步骤 1：**通过 CDN 包含 ID3.js 或通过 npm 安装它
这种方法可以对 ID3 标签中提供的各种元数据属性进行直接访问。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Audio Duration Display</title>
</head>
<body>
<h1>Audio Duration Display</h1>
<!-- File input for audio upload -->
<input type="file" id="audioFile" accept="audio/*">
<!-- Display area for duration -->
<p id="durationDisplay">Duration: Not available</p>
<script>
const fileInput = document.getElementById("audioFile");
fileInput.addEventListener("change", async (event) => {
const file = event.target.files[0];
if (file) {
try {
// Initialize AudioContext
const audioContext = new(window.AudioContext || window.webkitAudioContext)();
// Read the file as an ArrayBuffer
const arrayBuffer = await file.arrayBuffer();
// Decode audio data
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
// Display duration on the webpage
document.getElementById("durationDisplay").textContent = `Duration: ${audioBuffer.duration.toFixed(2)} seconds`;
} catch (error) {
console.error("Error decoding audio:", error);
document.getElementById("durationDisplay").textContent = "Error loading audio duration.";
}
}
});
</script>
</body>
</html>
输出
更新于： 2024年11月6日
202 次浏览
广告