Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

ID3 tag info not loading

Posted on 2009-07-07
9
Medium Priority
?
468 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
[X]
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
  • 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 375 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 3

Accepted Solution

by:
Michal-Drozd earned 375 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 375 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

610 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