获取mp3文件的封面，所属专辑以及以及其他基础信息

最新推荐文章于 2022-01-11 10:27:21 发布

Ming！

最新推荐文章于 2022-01-11 10:27:21 发布

阅读量6.9k

点赞数 2

分类专栏：其他文章标签： id3 ID3 Reader

本文链接：https://blog.csdn.net/qq_39657597/article/details/85092453

版权

其他专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用ID3Reader库从MP3文件中读取并显示元数据，包括艺术家、歌曲名、专辑、年份等，并提供了一个示例代码，展示了如何将这些信息展示在网页上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的工具是ID3 Reader，有兴趣的朋友可以访问以下网址：
官方demo：http://web.ist.utl.pt/antonio.afonso/www.aadsm.net/libraries/id3/#demo
源码下载：https://github.com/aadsm/JavaScript-ID3-Reader
ID3v2.3.0：http://id3.org/id3v2.3.0#head-e4b3c63f836c3eb26a39be082065c21fba4e0acc
关于ID3 Reader就不多做介绍官网上面都有，直接上代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="id3-minimized.js"></script>
		<script type="text/javascript">
			var $ = function(e) {
				return document.getElementById(e);
			};

			function loadUrl(url, callback, reader) {
				var startDate = new Date().getTime();
				ID3.loadTags(url, function() {
					var endDate = new Date().getTime();
					if(typeof console !== "undefined") console.log("Time: " + ((endDate - startDate) / 1000) + "s");
					var tags = ID3.getAllTags(url);
					$("artist").textContent = tags.artist || "";
					$("title").textContent = tags.title || "";
					$("album").textContent = tags.album || "";
					$("artist").textContent = tags.artist || "";
					$("year").textContent = tags.year || "";
					$("comment").textContent = (tags.comment || {}).text || "";
					$("genre").textContent = tags.genre || "";
					$("track").textContent = tags.track || "";
					$("lyrics").textContent = (tags.lyrics || {}).lyrics || "";
					if("picture" in tags) {
						var image = tags.picture;
						var base64String = "";
						for(var i = 0; i < image.data.length; i++) {
							base64String += String.fromCharCode(image.data[i]);
						}
						$("art").src = "data:" + image.format + ";base64," + window.btoa(base64String);
						$("art").style.display = "block";
					} else {
						$("art").style.display = "none";
					}
					if(callback) {
						callback();
					};
				}, {
					tags: ["artist", "title", "album", "year", "comment", "track", "genre", "lyrics", "picture"],
					dataReader: reader
				});
			}

			function loadFromLink(link) {
				var loading = link.parentNode.getElementsByTagName("img")[0];
				var url = link.href;

				loading.style.display = "inline";
				loadUrl(url, function() {
					loading.style.display = "none";
				});
			}

			function loadFromFile(file) {
				var url = file.urn || file.name;
				loadUrl(url, null, FileAPIReader(file));
			}

			function load(elem) {
				if(elem.id === "file") {
					loadAudio(elem.files[0]);
					loadFromFile(elem.files[0]);
				} else {
					loadAudio(elem)
					loadFromLink(elem);
				}
			}
			function loadAudio(file){
				var audioUrl=getObjectURL(file);
				$("audio").src=audioUrl;
				$("audio").play();
			}

			<!--把文件转换成可读URL-->
			function getObjectURL(file) {
				var url = null;
				if(window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file);
					console.info(url);
				} else if(window.URL != undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file);
					console.info(url);
				} else if(window.webkitURL != undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file);
					console.info(url);
				}
				console.info("file:::::" + url);
				return url;
			}
		</script>
	</head>

	<body>
		<table border="0" cellspacing="0" cellpatding="0">
			<tr>
				<td></td>
				<td colspan="2">请选择你的音乐文件：
					<script>
						if(typeof FileReader === "undefined") document.write('<span class="warning">[Not supported by your browser]</span>')
					</script>
					<input type="file" id="file" onchange="load(this)" accept="audio/mpeg,video/x-ms-wmv">
				</td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2">
					&nbsp;
					<audio id="audio" controls=""  loop="loop"></audio>
				</td>
			</tr>
			<tr>
				<td>歌手：</td>
				<td id="artist"></td>
			</tr>
			<tr>
				<td>歌名：</td>
				<td id="title"></td>
			</tr>
			<tr>
				<td>唱片：</td>
				<td id="album"></td>
			</tr>
			<tr>
				<td>年份：</td>
				<td id="year"></td>
			</tr>
			<tr>
				<td>评论：</td>
				<td id="comment"></td>
			</tr>
			<tr>
				<td>类型：</td>
				<td id="genre"></td>
			</tr>
			<tr>
				<td>Track：</td>
				<td id="track"></td>
			</tr>
			<tr>
				<td>歌词：</td>
				<td id="lyrics"></td>
			</tr>
			<tr>
				<td>封面：</td>
				<td><img id="art" width="50px" height="50px" src="" hidden></td>
			</tr>
		</table>
	</body>
</html>

上面引入的id3-minimized.js文件：https://download.csdn.net/download/qq_39657597/10861013
如果没有成功可以看看我的demo：https://download.csdn.net/download/qq_39657597/10863593