使用html5文件系统API获取本地mp3文件的元数据 [英] Get metadata of local mp3 file using html5 filesystem api
问题描述
这是我的代码：
<！DOCTYPE html>
< html>
< head>
< meta content =text / html; charset = utf-8http-equiv =Content-Type/>
< title>获取目录< / title>
< script type =text / javascriptsrc =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：+ name +< br />）;;
}）;
}）;
}）;
< / script>
< / head>
< body>
< input type =fileid =file-inputwebkitdirectory =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标签（我编辑了几个MP3文件在VLC，以确保他们没事，iTunes没有这样做）。
仅在OSX的Chrome上进行了测试，但希望能够让您开始，但请记住，HTML5的实现方式因浏览器和浏览器的不同而不同，平台也不尽相同。
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>
looks like you'll need to use the FileReader to grab each file in turn, and extract the data from the ID3 tags using that - http://ericbidelman.tumblr.com/post/8343485440/reading-mp3-id3-tags-in-javascript
Is this something where you are reading files off the server (ie could you do this server side where there are more options) or are you trying to read from the users machine, which will be more of a challenge...
Update: See the jsFiddle referenced in my comment below (1/22) for a working sample that incorporates the code from above and the jDataView subroutine. It only works with .mp3 files, and those have to have valid ID3 tags in (I edited a few mp3 files in VLC to make sure they were okay, iTunes wasn't doing the trick). Only tested in Chrome on OSX but hopefully enough to get you started, though remember the HTML5 implementations vary browser to browser and platform to platform
这篇关于使用html5文件系统API获取本地mp3文件的元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
