Solved

ID3 tag info not loading

Posted on 2009-07-07
9
454 Views
Last Modified: 2012-05-07
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
0
Comment
Question by:moatist
  • 5
  • 4
9 Comments
 
LVL 3

Expert Comment

by:Michal-Drozd
ID: 24796070
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.
0
 
LVL 2

Author Comment

by:moatist
ID: 24796082
So... what do I do next??  Do you have any code modification suggestions??
0
 
LVL 3

Assisted Solution

by:Michal-Drozd
Michal-Drozd earned 125 total points
ID: 24796179
use best JavaScript library ever - JQuery, download it from http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js

you have to include this library in html:
<script src="<your path>/jquery-1.3.2.js" type="text/javascript"/>

then write in your javascript code:
jQuery(document).ready(function() {

     document.getElementById("artist").value = (artist);  /////////////////

     document.getElementById("album").value = (album); ////////////////

     document.getElementById("song").value = (title);  //////////////////

});

Open in new window

0
 
LVL 3

Accepted Solution

by:
Michal-Drozd earned 125 total points
ID: 24796197
so dont use onLoad but code above, which runs only when all HTML is loaded, so code can access to HTML entities/controls
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:moatist
ID: 24796296
I used the code that you provided but its still not working. :-(
0
 
LVL 3

Assisted Solution

by:Michal-Drozd
Michal-Drozd earned 125 total points
ID: 24796476
I created my own PHP file with your code and it worked fine.
Becouse i have not ID3 javascripts, I rewrited part of your code to:
<script>
jQuery(document).ready(function() {
      declareID3Values();
});
function declareID3Values() {  //////////////////////////////////
document.getElementById("artist").value = '2';  /////////////////
document.getElementById("album").value = '2'; ////////////////
document.getElementById("song").value = '2';  //////////////////
}

and it war working really fine.

When there is no file paramater in URL, it is not working becouse lines

<?php $music_file = $_GET['file']; ?>  //////////////////////////////////////
var file = "<?php echo "$music_file"; ?>";  /////////////////////////////////

cause error echos in <script></script> section - and this is fatal error and all javascript are ignored (including jQuery(document).ready)
0
 
LVL 2

Author Comment

by:moatist
ID: 24796610
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.
0
 
LVL 2

Author Comment

by:moatist
ID: 24796650
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()">
0
 
LVL 2

Author Closing Comment

by:moatist
ID: 31600689
Thanks dude, I'll give you points just for trying.  Peace!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now