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:

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
            //send the XMLHttpRequest request (nothing has actually been sent until this very line)
The section that uploads the file is:
and it gets the filename from another script:

        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:

        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:
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>     
can see it on the client side:
HTML Code:
div id="cardData">
<span id="fname" style="display:none">74.normal.5</span>
<p>お茶, 御茶</p>
but attempts to access the value on host : line of $.jrecorder with plain js break the jquery.
host : 'http://localhost:10088/NewFolder/japanese/jrecorder/acceptfile.php?filename='+document.getElementById('fname').innerHTML