Get metadata of local mp3 file using html5 filesystem api

jquery html filesystems mp3 metadata

13,729

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

13,729

Author by

jgille07

Updated on June 05, 2022

Comments

jgille07 almost 2 years

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>