asked on

ID3 tag info not loading

Hey,

My problem is that I have this upload form where users can upload an .mp3 file. After the user uploads, they click on a link which takes them to a URL like the following: http://example.com/upload.php?file=path/to/song/song.mp3

When the user click on the link, the information is processed and PHP outputs the path of the music file (code below).

JavaScript is then supposed to set the tag information to the corresponding value of the form fields. When user clicks on that link however, the tag info is not inserted into the fields at first. It works when I refresh the page, but for some strange reason it does not insert it when the page first loads.

I'll add that I'm using the GET method of submitting data.

Also, I know could use some code to force the page to refresh, but I'd rather not.

If someone could shed a little light on the subject, that would be great.

Thanks,
Moatist

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
 
 
<script language="javascript" type="text/javascript" src="../scripts/javascript_id3/binaryajax.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/javascript_id3/id3.js"></script>
 
<script>
<?php $music_file = $_GET['file']; ?>  //////////////////////////////////////
var file = "<?php echo "$music_file"; ?>";  /////////////////////////////////
function mycallback() {
 
  title = ID3.getTag(file, "title");
  artist = ID3.getTag(file, "artist") ;
  album = ID3.getTag(file, "album") ;
  year = ID3.getTag(file, "year") ;
  genre = ID3.getTag(file, "genre");
  track = ID3.getTag(file, "track") ;
  comment = ID3.getTag(file, "comment");
 
 
}
ID3.loadTags(file, mycallback);
 
 
function declareID3Values() {  //////////////////////////////////
document.getElementById("artist").value = (artist);  /////////////////
document.getElementById("album").value = (album); ////////////////
document.getElementById("song").value = (title);  //////////////////
}
</script>
 
 
<script>
if(DomCheck()){
DomCorners("uploaded_song_info","../images/rc_f1f1f1.png",10);
}
</script>
</head>
 
<body onload="declareID3Values();">
 
<div id="main_content">
    <div id="uploaded_song_info" style="background-image:url(../images/F1F1F1.gif); width:450px;">
        <h1>Song Info</h1>
        
        <form name="music_info">////////////////////////////////
            <p><label for="artist" id="info_label">Artist</label> <br /><input name="artist" id="artist" type="text" size="50" /></p>
            <p><label for="artist" id="info_label">Album</label> <br /><input name="album" id="album" type="text" size="50" /></p>
            <p><label for="artist" id="info_label">Song</label> <br /><input name="song" id="song" type="text" size="50" /></p>
        </form>////////////////////////////////////////
    </div>
</div>
</body>
</html>

Open in new window

3972d1246941755-id3-tag-info-not.jpg

Michal-Drozd

ok i know where is problem.

You are accessing controls which werent inicialized yet. Becouse first declareID3Values() is called. Controls (input html..) are created after that.

moatist

ASKER

So... what do I do next?? Do you have any code modification suggestions??

SOLUTION

Michal-Drozd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Michal-Drozd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

moatist

ASKER

I used the code that you provided but its still not working. :-(

SOLUTION

Michal-Drozd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

moatist

ASKER

OK, ok, look at this code:

var file = "path/to/song.mp3";
function mycallback() {

title = ID3.getTag(file, "title");
artist = ID3.getTag(file, "artist") ;
album = ID3.getTag(file, "album") ;
year = ID3.getTag(file, "year") ;
genre = ID3.getTag(file, "genre");
track = ID3.getTag(file, "track") ;
comment = ID3.getTag(file, "comment");

}
ID3.loadTags(file, mycallback);

window.onload = function() {
declareID3Values();
}

function declareID3Values() {
document.getElementById("artist").value = (artist);
document.getElementById("album").value = (album);
document.getElementById("song").value = (title);
}
</script>

I nixed the PHP for test purposes and it STILL WILL NOT LOAD VALUES WITHOUT A PAGE REFRESH!!

I have no idea what to do.

moatist

ASKER

YES!!! Not sure why, but it works when I delay the function:

<script>
<?php $music_file = $_GET['file']; ?>
var file = "<?php echo "$music_file"; ?>";
function mycallback() {

title = ID3.getTag(file, "title");
artist = ID3.getTag(file, "artist") ;
album = ID3.getTag(file, "album") ;
year = ID3.getTag(file, "year") ;
genre = ID3.getTag(file, "genre");
track = ID3.getTag(file, "track") ;
comment = ID3.getTag(file, "comment");

}
ID3.loadTags(file, mycallback);

function declareID3Values() {
document.getElementById("artist").value = (artist);
document.getElementById("album").value = (album);
document.getElementById("song").value = (title);
}

function wait()
{
setTimeout("declareID3Values()", 2000);
}
</script>

<script type="text/javascript" src="../scripts/domCorners.js"></script>
<script>
if(DomCheck()){
DomCorners("uploaded_song_info","../images/rc_f1f1f1.png",10);
}
</script>
</head>

<body onload="wait()">

moatist

ASKER

Thanks dude, I'll give you points just for trying. Peace!