I have created a flashcard program to teach Japanese vocabulary. I want to add sound files from native speakers so I have created a page with a recorder that

1. displays a word (on load)
2. allows the native speaker to record the word (on press of a button)
3. uploads the recording to the server (on press of another button)

I wrote the word display as a separate php script so that I could use Ajax to just change the word being recorded, so that I would not need to reload the entire page every time the speaker switched to a new word.

The js that gets the word to be recorded is:

Code:
function ajaxRequest(){
            //declare the variable at the top, even though it will be null at first
            var req = null;
                //modern browsers
                req = new XMLHttpRequest();
            //setup the readystatechange listener
            req.onreadystatechange = function(){
                //right now we only care about a successful and complete response
                if (req.readyState === 4 && req.status === 200){
                    //inject the returned HTML into the DOM
                    document.getElementById('cardData').innerHTML  = req.responseText;
                };
            };
            //open the XMLHttpRequest connection
            req.open("GET","nextcard.php",true);
            //send the XMLHttpRequest request (nothing has actually been sent until this very line)
            req.send();
        };
The section that uploads the file is:
Code:
                   $('#send').click(function(){                  
                     $.jRecorder.sendData(); 
                  }
and it gets the filename from another script:

Code:
$.jRecorder(
     { 
        host : 'http://localhost:10088/NewFolder/japanese/jrecorder/acceptfile.php?filename=hello.wav'
The problem that I have is that when I get each word I want to change the name of the file being uploaded. It all works and if I reloaded the page each time I could do this:

Code:
   $.jRecorder(
     { 
        host : 'http://localhost:10088/NewFolder/japanese/jrecorder/acceptfile.php?filename=<?php echo $word.'_'.$reader_id;?>.wav'
but I want to stay on the Ajax path. So, I think that I need to convert the newcard program to return json with something like:
PHP Code:
$response=array(filename=>$word.$reader_idcard_data=>$card_stuff);
echo 
json_encode($response); 
but once I get the json back I don't see how I get the filename into the script that sets the upload url and make that script re-execute. Is there a reasonable way to do that?

I have tried also creating an invisible span with the filename I want (server side):
PHP Code:
echo <<<_EOT
<span style="display:none" id="fname">$filename</span>     
<p>
{$card_array['kanji']}</p>
<p>
{$card_array['kana']}</p>
_EOT 
can see it on the client side:
HTML Code:
div id="cardData">
<span id="fname" style="display:none">74.normal.5</span>
<p>お茶, 御茶</p>
<p>おちゃ</p>
</div>
but attempts to access the value on host : line of $.jrecorder with plain js break the jquery.
Code:
host : 'http://localhost:10088/NewFolder/japanese/jrecorder/acceptfile.php?filename='+document.getElementById('fname').innerHTML