7

we're actually working on a Remote Music Library organizer using javascript and I'd like to know if there's a way to download using js the last 128bytes of an MP3 file in order to get its ID3 Tags. thanks.

coolcoolcool
  • 381
  • 1
  • 6
  • 13

2 Answers2

12

You can't do that with just JavaScript. You'll need something on the server (what exactly depends on your server-side technology) to read the relevant part of the file. Then in JavaScript you can just call that server-side part.

Update 1

The HTTP protocol has support for downloading files in parts (which is what the). But of course HTTP knows nothing of MP3 files, so you'll have to know what range of the file contains the ID3 tag in your JavaScript.

Update 2

It seems way more feasible than I initially expected to download just a chunk of a URL in pure JavaScript:

xhr = new XMLHttpRequest();
xhr.open("GET", "http://<your domain>/");
xhr.setRequestHeader("Range", "bytes=-256");
xhr.send();

This requests the last 256 bytes of the remote file.

Note that of course your request is subject to the usual same-origin limitations, so you can only use it to retrieve files from the server that contains your original HTML/JavaScript.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • 1
    thanks, found this: http://stackoverflow.com/questions/1798879/download-file-using-partial-download-http – coolcoolcool Dec 04 '12 at 14:12
  • Looks good, if your server uses Python. I was looking at some of the more recent HTML5 APIs to see what they support. But so far all the partial file access is for client-side files only, so that doesn't help you. – Frank van Puffelen Dec 04 '12 at 14:13
  • 1
    ID3v1 is always in the last 256 (or was it 512?) bytes. So a single ranged HTTP request would be fine. – ThiefMaster Dec 04 '12 at 14:22
  • 1
    +1 for the update about the `Range` header. I've used this to support exploring the contents of a .zip, which has stuff at the end telling you where to look for the directory information. It meant that I could build a browser-based UI for exploring inside very large zips without downloading the whole zip. – Daniel Earwicker Dec 04 '12 at 14:45
  • 1
    Yeah, I was quite impressed with how far I could get quite easily with requesting ranges. I initially looked at the File APIs in the HTML5 family. But once again the answer seems to be in good-old HTTP - an impressive spec if ever I saw one. – Frank van Puffelen Dec 04 '12 at 14:49
  • Great answer, and I love your enthusiasm for the results. :D – Michael Gaskill Jun 07 '16 at 22:32
1

Withouth using a server-sided programming language: no.

You could use Ajax and PHP (or any other programming language) to get the ID3 tag.

With jQuery it looks something like this:

function getInfo(func) {
$.ajax({
    url: "mp3info.php?file=" + url,
    dataType: "json",
    ready: function(result) {
        func(result);
    }
});
}

And you use it like this:

getInfo(function(mp3info) {
    alert(mp3info.id3);
});

Then your PHP file looks something like this:

<?php
$info = array(); //The MP3 info array
echo json_encode($info, true);
?>
Dillen Meijboom
  • 963
  • 7
  • 13
  • Don't forget to write your own function for getting MP3 information. Also in my Javascript example you have to have a id3 key in the information array. – Dillen Meijboom Dec 04 '12 at 14:30