Banner image SITE-LANGUAGE-en-ICON BROWSER-LANGUAGE--IMAGE
Content / help / audio .. concise-view << previous next >>

Audio Recording in HTML5

The Old Flash / wami method was incomplete

HTML5 getUserMedia()

Article HTML getusermedia
This help file covers the API, navigator.getUserMedia(), which allows web apps to access a user's camera and microphone. Biscuits js is in : See biscuits-media.js

Gaining access to an input device

To use the webcam or microphone, we need to request permission. The first parameter to getUserMedia() is an object specifying the details and requirements for each type of media you want to access. For example, if you want to access the webcam, the first parameter should be {video: true}. To use both the microphone and camera, pass {video: true, audio: true}:

Older Methods using INPUT

If you wanted to let users take a snapshot of themselves with the webcam, that's possible with capture=camera: <input type="file" accept="image/*;capture=camera">

Recording a video or audio is similar: <input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone">

HTML5 for Audio capture Generated by PHP function calls

Audio recording HTML5 is generated by the PHP class as follows, but any page with the same HTML5 would work.
Bear in mind that if you use the PHP generated buttons, your page will be forward compatible.

Start Recording

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

 $audioMethods->recordButton($data.); 
<button class="wami-record-button"  onclick="setWami(this);"  name="20170923-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 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 and saved on the server.
    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);

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




iBiscuits LOGO