Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

ID3 tag info not loading

Posted on 2009-07-07
9
460 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

856 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