jquery - 使用 html5 文件系统 api 获取本地 mp3 文件的元数据

标签 jquery html filesystems mp3 metadata

我试图获取目录中每个 mp3 文件的标题和艺术家(以及最终的其他元数据)。目前,我的代码将 mp3 文件的文件名附加到 div“thelist”。我怎样才能获取文件的标题和艺术家属性/标签而不是整个文件名?

这是我的代码:

<!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>

最佳答案

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

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

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

关于jquery - 使用 html5 文件系统 api 获取本地 mp3 文件的元数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14425007/

相关文章:

windows - 删除图像元数据中的 'Program Name'

c# - 如何在.NET中获取磁盘的分区UUID

javascript - 如何将 javascript 变量值从 .aspx 页面传递到 .ashx 页面

jquery将html转换为字符串并转换为html

javascript - 数据表未显示详细信息按钮

jquery - CSS LAYOUT POSITIONING 定位我的标题 Logo

html - CSS 在表格下方显示 div

javascript - 如何打开一个已经有 CSS 和 JavaScript 的新窗口?

javascript - Firefox 列出当前目录中所有文件名的问题

javascript - 如何让 rainyday.js 使用 CSS 背景图片作为背景?