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

You're on the right track! This is a lot of writing, but I hope it helps :-D

On the default implementation using the sample code from the Google repos, you do see the Flash GUI because it's initialized, but in this example, it does not and relies on the HTML buttons. The Flash is still on the page right below the buttons but white one white.

Your error

Using your code and files, the only way I was able to duplicate your error was to access the file via the file system:

file:///c:/xampp/htdocs/wami/index.html

Accessing the same content through a web server:

http://localhost/wami/index.html

works great.

So my assumption is that you don't have a web server to test on and are using the file system instead. I included links to XAMPP and basic setup instructions below, as well as the working code sample.

My setup:

I'm using XAMPP so the browser URL is set to http://localhost/wami/index.html.

You can download XAMPP here.

On Windows, it will install in C:\xampp by default.

• Place all your files in C:\xampp\htdocs\wami and you should be all set.
• Start APACHE in the XAMPP console
• Open a browser and navigate to http://localhost/wami/index.html

I placed all files in that folder (all WAMI files including save_file.php). Once ran, and the first WAV file was created, I elevated the permissions on it for testing (right-click, add FULL CONTROL permission for All Users (I'm on Windows 7).

Full working code sample (same as yours but has the entire code chunk for reference. I removed https:// from the JavaScript call since mixing http and https can cause security popups and broken JavaScript)

I used the PHP file as-is with this code:

<?php
    // get the filename
    parse_str($_SERVER['QUERY_STRING'], $params);
    $file = isset($params['filename']) ? $params['filename'] : 'temp.wav';
    // save the recorded audio to that file
    $content = file_get_contents('php://input');
    $fh = fopen($file, 'w') or die("can't open file");
    fwrite($fh, $content);
    fclose($fh);
?>

And the HTML file:

<!-- index.html -->
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script src="recorder.js"></script>
    </head>

    <body>
        <div id="recorder">
           <button id="record">Record</button>
           <button id="play">Play</button>
        </div>
        <div id="flash"></div>
        <script type="text/javascript">
            // initialize Wami
            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 = '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 = 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>
</html>

Answer 2

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.