title: wami-recorder - Wami.startRecording is not a function
body: <p>I am trying to implement <a href="https://code.google.com/p/wami-recorder/" rel="nofollow noreferrer">Wami-Recorder</a> as described <a href="https://stackoverflow.com/questions/9356739/how-is-the-wami-recorder-actually-implemented">here on stackoverflow</a> with basically the same setup as in the accepted answer ie <code>swfobject.js</code>, <code>recorder.js</code>, and <code>gui.js</code> included in the head tag, the html controls contained in the divs:</p>
  
  <pre><code>&lt;div id="recorder"&gt;
      &lt;button id="record"&gt;Record&lt;/button&gt;
      &lt;button id="play"&gt;Play&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="flash"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the JavaScript is just sitting at the bottom of the page just before the html end tag:</p>
  
  <pre><code>&lt;script&gt;
  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();
  });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;div id="recorder"&gt;
  &lt;button id="record"&gt;Record&lt;/button&gt;
  &lt;button id="play"&gt;Play&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="flash"&gt;
  &lt;div id="widb06765e52be" style="position: absolute;"&gt;
  &lt;object id="wid36dd0ea1ccc" width="214" height="137" type="application/x-shockwave-flash" data="Wami.swf" style="visibility: visible;"&gt;
  &lt;param name="allowScriptAccess" value="always"&gt;
  &lt;param name="wmode" value="transparent"&gt;
  &lt;param name="flashvars" value="visible=false&amp;loadedCallback=Wami._callbacks['wid9ebef515c0b']&amp;console=true"&gt;
  &lt;/object&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>as well as that the Wami.swf file was fetched via GET with 200 status.
  Still, when I click the Record button, I get <code>TypeError: Wami.startRecording is not a function</code>. 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?</p>
  
  <p><strong>Edit</strong>:
  At one point I had tried to implement a more object-oriented way of doing things with:</p>
  
  <pre><code>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);
  }
  
  };
  </code></pre>
  
  <p>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.</p>