3

I was trying to get the title and artist (and other metadata eventually) of each mp3 file in a directory. Currently the code I have appends the div "thelist" with the file name of the mp3 file. How could I go about getting the title and artist properties/tags of the file instead of the entire file name?

Here is my code:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Get Directory</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("#file-input").on("change", function(e){
  var thefiles = e.target.files;
  $.each(thefiles, function(i, item){
    var thefile = item;
    $("#thelist").append("FILES: " + thefile.name + "<br />");;
  });
});
});
</script>
</head>
<body>
<input type="file" id="file-input" webkitdirectory="" directory="">
<div id="thelist"></div>
</body>
</html>
4

1 回答 1

3

看起来您需要使用 FileReader 依次获取每个文件，并使用它从 ID3 标签中提取数据 - http://ericbidelman.tumblr.com/post/8343485440/reading-mp3-id3-tags-在 JavaScript 中

这是您从服务器读取文件的地方（即您可以在有更多选项的服务器端执行此操作）还是您尝试从用户机器读取文件，这将是一个更大的挑战......

更新：请参阅下面我的评论 (1/22) 中引用的 jsFiddle，以获取包含上述代码和 jDataView 子例程的工作示例。它仅适用于 .mp3 文件，并且这些文件必须具有有效的 ID3 标签（我在 VLC 中编辑了一些 mp3 文件以确保它们没问题，iTunes 没有做到这一点）。仅在 OSX 上的 Chrome 中进行了测试，但希望足以让您入门，但请记住 HTML5 实现因浏览器和平台而异

于 2013-01-21T22:41:10.377 回答