About voice recording
Banner image

About voice recording

2016-01-15 Wami now a separate module outside biscuits. This allows a developer to be assigned to Wami without impacting the main engine. The biscuits methods audioMethods is used to generate the voice record button. This button has an onclick event to start the voice recorder. See below for the generated HTML that forms this record button
Current version for this domain :
We are going to add wami voice recording submissions to a whole range of content pages. The plan is that the voice recording buttons and play back buttons can be easily inserted into pages via simple audioMethods PHP functions inside the content HTML pages All the wami software will be in the wami directory and content managers will not have to worry about how it works technically.

We don't initialise wami on document.ready() because it asks for permission to use your microphone. We only want it to ask for permission when its use has been requested by a click on a voice recording button.

Check list - Is Wami installed and ready to go ?

  1. If you go to the settings page can you see that wami has been switched on and installed?
    Here it is :
  2. If you view the Source for the web page. (Right click View Page Source , you can click on the wami js files and view them in your browser.

Wami HTML Generated by PHP function calls

Audio recording HTML is generated by the PHP class as follows, but any page with the same HTML will work, as long as the onclick events and the classes are correct.
Bear in mind that if you use the PHP generated buttons, your page will be forward compatible. IE we develop our wami capability, the buttons might change due to new version of the generated HTML.

Start Recording

Code to generate a voice recording button (Function gets passed an array

<button class="wami-record-button"  onclick="setWami(this);"  name="20181116-username-activity">  Record  </button> 
The name attribute will be extracted in the javascript onclick event and used to name the saved audio file to the server. It will be unique for this: user + activity (page?) and time frame. IE re-recording the audio within the same time from on the same page will record over and replace any previous recording made. We could even restrict site visitors to one recording per activity by setting the audio->dateFormat = ""

Audio Recorder Procedure

  1. document ready - page loaded
  2. Voice recorder buttons rendered onto page.
  3. Voice recorder button clicked.
  4. javascript onclick function setWami(this); This function will:
    1. Check the button element this.name and use this to set the audio file name for the audio file to be recorded
    2. Run the javascript function startRecording(AUDIO_PATHNAME);

      To playback the audio. We can use our usual playAudio(PATHNAME); JS
      Or the wami equivalent startPlaying(SOUNDFILE_PATH);

Components of wami

Al the wami software is stored in a single directory. There's not so much of it. Here it is:

  • buttons.png

    An image array , probably requiring some CSS or editing to make a set of separate images.

    1. WAMI package js
      1. gui.js
      2. swobject.js
    2. Biscuits javascript interface to wami
      1. biscuits-wami.js
    3. Flash

      • wami.swf

        Binary flash code

Example Pages on English Tap

This page should act as the main example Try recording audio here on this page.

Don't use the following pages as examples: Follow this help page for the technical specification. The following pages should start using the latest WAMI that we have installed.
  1. Stella
  2. Sherlock Holmes
Website by Ibiscuits