wami-recorder - Wami.startRecording is not a function

Question

I am trying to implement Wami-Recorder as described here on stackoverflow with basically the same setup as in the accepted answer ie swfobject.js, recorder.js, and gui.js included in the head tag, the html controls contained in the divs:

<div id="recorder">
    <button id="record">Record</button>
    <button id="play">Play</button>
</div>
<div id="flash"></div>

and the JavaScript is just sitting at the bottom of the page just before the html end tag:

<script>
Wami.setup({
    id: 'flash' // where to put the flash object
});

// initialize some global vars
var recording = '';
var recordingUrl = '';
var playBackUrl = '';

// get button elements
var record = $('#record');
var play = $('#play');

// define functions
function startRecording() {
    recording = 'temp.wav';
    recordingUrl = 'http://localhost/temp/wami/test/save_file.php?filename=' + recording;
    Wami.startRecording(recordingUrl);
    // update button attributes
    record.html('Stop').unbind().click(function() {
        stopRecording();
    });
}

function stopRecording() {
    Wami.stopRecording();
    // get the recording for playback
    playBackUrl = 'http://localhost/temp/wami/test/' + recording;
    // update button attributes
    record.html('Record').unbind().click(function() {
        startRecording();
    });
}

function startPlaying() {
    Wami.startPlaying(playBackUrl);
    // update button attributes
    play.html('Stop').unbind().click(function() {
        stopPlaying();
    });
}

function stopPlaying() {
    Wami.stopPlaying();
    // update button attributes
    play.html('Play').unbind().click(function() {
        startPlaying();
    });
}

// add initial click functions
record.click(function() {
    startRecording();
});

play.click(function() {
    startPlaying();
});
</script>
</body>

Now, I've never actually seen a working demo of Wami-Recorder, but I'm assuming there should actually be something in the flash container when it loads...? I get no error, and I can right click the area where the flash embed should be and the context menu confirms that there's a flash object loaded, and Firebug shows the DOM has been modified to:

<div id="recorder">
<button id="record">Record</button>
<button id="play">Play</button>
</div>
<div id="flash">
<div id="widb06765e52be" style="position: absolute;">
<object id="wid36dd0ea1ccc" width="214" height="137" type="application/x-shockwave-flash" data="Wami.swf" style="visibility: visible;">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="transparent">
<param name="flashvars" value="visible=false&loadedCallback=Wami._callbacks['wid9ebef515c0b']&console=true">
</object>
</div>
</div>

as well as that the Wami.swf file was fetched via GET with 200 status. Still, when I click the Record button, I get TypeError: Wami.startRecording is not a function. I'm assuming it's some sort of context issue, in that Wami is not a global for use inside a function for some reason. If so, can anyone explain why? If this is not the case, what have I overlooked?

Edit: At one point I had tried to implement a more object-oriented way of doing things with:

var Audio = {
setup: function() {
     Wami.setup("wami");
}

record: function() {
     Audio.status("Recording...");
     Wami.startRecording("https://wami-recorder.appspot.com/audio");
}

play: function() {
     Wami.startPlaying("https://wami-recorder.appspot.com/audio");
}

stop: function() {
     Audio.status("");
     Wami.stopRecording();
     Wami.stopPlaying();
}

status: function(msg) {
     $('#status').html(msg);
}

};

And I would fire the functions from within the document.ready() method depending upon other conditions. The original implementation throws the exact same error, and I stripped it all out to try this more direct approach... to no avail.

Answer 1

The flash object was being embedded in the page, but none of the event listeners were working. I have since switched to jRecorder link, and with a few modifications to the code, have it working with no issues.