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 ?
If you go to the settings page can you see that wami has been switched on and installed?
Here it is :
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.
Code to generate a voice recording button (Function gets passed an array
<button class="wami-record-button" onclick="setWami(this);" name="20170922-username-activity"> Record </button>
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
document ready - page loaded
Voice recorder buttons rendered onto page.
Voice recorder button clicked.
This function will:
Check the button element this.name
and use this to set the audio file name for the audio file to be recorded
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:
An image array , probably requiring some CSS or editing to make a
set of separate images.
WAMI package js
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.