Solved

ID3 tag info not loading

Posted on 2009-07-07
9
457 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
VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP AJAX JSON 2 61
Little bit of help styling my heading 3 19
How do uses indexes to maximize MySQL Searches 14 28
Index on a Table 6 13
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

773 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