?
Solved

ID3 tag info not loading

Posted on 2009-07-07
9
Medium Priority
?
467 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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

770 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