Home/ Questions/Q 9170129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:58:27+00:00

I was trying to get the title and artist (and other metadata eventually) of

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0