Audior Documentation

Requirements


Audior can be installed on any web server with PHP or .NET. Ruby can also be used through the Ruby scripts (alternatives to our own PHP scripts) posted on this thread.

The mobile version of Audior works only on web servers with PHP support.

On the client side, the desktop version of Audior needs Flash Player 11.1 or newer and it works on all browsers supporting Flash Player including Internet Explorer, Firefox, Chrome, Safari and Opera.

Audior does not need a media server like Red5 or Wowza or AMS to run or record audio.

Installation instructions


  1. Download the audior.zip archive from your private client area and unzip it.
  2. Upload the Audior folder inside the archive to your website
  3. Edit Audior/index.html on your website and place the license key between the double quotes in the place indicated by the screenshot below:
  4. Open up http://yourwebsite.com/Audior/index.html and Audior should load in the browser.

What we need to perform the installation


We include a free installation of Audior with every purchase.

To install it please send us the FTP details for your website after purchase. Our tech support team will take care of the installation for you. Once the installation is performed we'll send you an e-mail with a quick overview of your new Audior installation.

Where are the MP3 files?


When recording from desktop:

The MP3 files will be saved by Audior in the Audior/recordings folder on your website. You can change the folder in which Audior saves the MP3 files by editing Audior/upload.php or Audior/upload.aspx.cs depending on the one you're using.

When recording from mobile devices:

Recordings made using mobile devices are saved in Audior/recordings/mobileRecordings.

Audior configuration options


Audior ships with 2 config files:

  • audior_settings.xml
  • audior_settings.php

You will find them both in the Audior installation folder. Both output XML content.

By default audior_settings.xml is used but both contain the same options including:

  • maxTimeLimit controls the maximum length of the recording. The values accepted are in seconds
  • recordName controls the name of the recording.
  • addRandomNumberToName helps you generate different names for the recordings
  • uploadURL is the path to the script that handles the upload of the mp3 file
  • canDownload controls weather or not the user can download the MP3. Values: 0 for disabled, 1 for enabled
  • showSoundWave weather or not the sound wave is shown, 1 for show, 0 for hidden
  • markerDistance Audior will place a marker at every markerDistance seconds. Set to 0 to disable.

Open audior_settings.xml and audior_settings.php in a text editor to view the complete list of config options.

To make a change, edit the PHP or XML file with a text editor, make the desired change and upload it back to your website.

Switching from avc_settings.xml to avc_settings.php

Edit index.html and set flashvars.settingsFile="audior_settings.php".

Changing the license key


  1. Edit the HTML file in which the Audior.swf file is embedded and replace the old license key (shown in the Installation Instructions screenshot) with the new one.
  2. Save the HTML file and upload it to the web server.
  3. Refresh the HTML page containing Audior.swf in your browser (you might want to clear your browser cache as well so press CTRL+SHIFT+DEL).

JS Callback API


Every time an event happens in Audior a JS function is called in the embedding HTML file. You can use these callbacks to trigger for example the start of a YouTube video in the HTML page, when the RECORD button is pressed inside Audior.

Here is a list of these JS callbacks:

JS function name Event
btRecordClick(recorderId) the RECORD button is released
btStopClick(recorderId) the STOP button is released
btPlayClick(recorderId) the PLAY button is released
btPauseClick(recorderId) the PAUSE button is released
btSaveClick(recordDuration,recorderId) the SAVE button is released
btDownloadClick(recorderId) the DOWNLOAD button is released
btPauseRecordingClick(recorderId) the PAUSE RECORDING button is released
btResumeRecordingClick(recorderId) the RESUME RECORDING button is released
onRecordingPlaybackStopped(recorderId) The recording has stopped playing.
onEncodingDone(duration, recorderId) Audior has finished the encoding of the audio data to mp3.
onUploadDone(success, recordName, duration, recorderId) the MP3 has finished uploading to the web server
onMicAccess(allowed,recorderId) the user clicked Allow or Deny in the Privacy panel dialog box in Flash Player
onFlashReady(recorderId) as soon as this function is called you can communicate with Audior using the JS Control API

 

recorderId is a flash var sent to Audior.swf that is passed back to all JS the callbacks . You can use it to identify the Audior instance when you have 2 or more instances of Audior on the same HTML page. The recorderId is also passed as a GET variable to the upload script (upload.php or upload.aspx) and to the settings file (audior_settings.xml or audior_settings.php).

recordName is the final name of the MP3 file incluing the .mp3 extension .

duration is the length of the recording in seconds but very accurate like this: 3.1362358276643 (3 seconds)

You will find the above JS functions and more documentation on each one in the index.html file with which Audior ships.

JS Control API


You can use the JS functions (mentioned below) after the onFlashReady() is called by the Audior application by using the following JavaScript syntax:

  • document.NameOfTheObject.nameOfTheCalledFunction
  • NameOfTheObject is the name property on the EMBED tag and the id property on the OBJECT tag used to embed the Audior.swf file in the HTML page.
  • Example: document.Audior.recordagain()

The 4 control functions are:

  • mainbtn()
  • pauseResumeBtn
  • recordagain()
  • save()
  • download()

In the Audior archive you will find an index.html filw which already implements the JS Control API using 4 input buttons:

<input type="button" onclick="javascript:document.Audior.mainbtn()" name="mainbtn" value="Record -> Stop -> Play -> Pause" id="mainbtn"/>

<input type="button" onclick="javascript:document.Audior.pauseResumeBtn()" name="pauseResumeBtn" value="Pause/Resume Recording" id="pauseResumeBtn"/>

<input type="button" onclick="javascript:document.Audior.recordagain()" value="Record Again"/>

<input type="button" onclick="javascript:document.Audior.save()" disabled value="Save" name="sav" id="sav"/>

<input type="button" onclick="javascript:document.Audior.download()" disabled value="Download" name="dwl" id="dwl" />

PHP, .NET API upload and server side API


Every time the [Save] button is pressed inside Audior the upload.php (or upload.aspx) is executed on the web server. This file handles the actual upload of the mp3 file but it also receives some variables are via GET:

  • recordName is the final name of the MP3 file incluing the .mp3 extension .
  • duration duration of the recorded audio file in seconds but accurate to the millisecond (like this: 4.322)
  • userId the userId sent via flash vars
  • recorderId the recorderId sent via flash vars

You can extend the upload server side script to:

  • insert the info about the new recording in the database,
  • set session variables for later use,
  • etc... .

The userId GET variable that is passed to this file needs to be passed to Audior.swf using flash vars. Look for this code

flashvars.userId ="User234"
in index.html.

The recorderId GET variable that is passed to this file needs to be passed to Audior.swf using flash vars. Look for this code

flashvars.recorderId = "REC1"
in index.html. The recorderId allows you to have 2 or more audio recorders on the HTML page. When one of them makes a call to the JS function you can use the recorderId to track which one called the function.

Switching from upload.php to upload.aspx


You can switch the upload script used by the desktop version of Audior (Audior.swf) to upload the MP3 file to the web server.

By default the upload script used is the upload.php file. PHP is the most commonly used server side scripting language.

To force Audior to use upload.aspx, edit your config file (audior_settings.xml is the default one but audior_settings.php can also be used, here's how to change to it ) in a text editor and set uploadURL to upload.aspx.

Resizing Audior


Audior's size in the HTML page is given by the HTML code that embeds the Audior.swf in the HTML page.

Regarding it's height: Audior can not be smaller than 140px in height because that's how high the Adobe Privacy Panel is (the one that asks the user for access to the mic). In adition the Audior interface is currently fixed in height at 140px, using a higher height will result in empty space;

Regarding it's width: Audior can scale it's width indefinitely. To resize it's width:

  1. Edit index.html (or the HTML file embedding Audior.swf)
  2. Find the value 600 (on line 93) and modifiy it to the desired width.

    audior size options

Audior ships with 600px in width. Here are 2 resized versions, one with a width of 400px:

Audior with 400px in width

and the other with a width of 900px:

Audior with 900px in width

Recording on mobile devices


Starting with Audior 1.3 (build 112) recording also works from mobile browsers like Safari on iOS and Internet/Chrome on Android. When it detects a mobile browser, Audior switches to the mobile HTML audio recording solution which allows the user to record audio using the device's native audio recording apps. Once the recording is complete it is uploaded to the web sever.

Since various mobile devices record to different file formats including .mov, .mp4 and .3gp Audior uses FFmpeg server side to convert them to .mp3. FFmpeg is not packed with Audior which is why it needs to be manually uploaded to the Audior folder as explained in the next secion.

Setting up the MP3 conversion for audio files originating from mobile devices:

  1. Download the latest FFmpeg build for Linux or Windows depending on your server's operating system.
  2. Unarchive FFmpeg in the Audior installation folder on your web-server.

How Audior works on Android devices

Audior will use the native Voice Recorder application. The resulted file will be uploaded on your server and converted using FFmpeg

  1. The user is presented with [Record Audio] + [Upload] buttons.
    Recording audio on Android with HTML Media Capture
  2. Pressing [Record Audio] will automatically open the native audio recording app on Android.
    Recording audio on Android with HTML Media Capture
  3. After the recording is stopped you can review it, use it or take another one.
  4. If you use it you are taken back to page on which Audior is embedded.
  5. Pressing the [Upload] button will initiate the uploading and converting process. Once the file is ready, you will be able to playback the file using the embedded player.
    After recording audio on Android with HTML Media Capture

How Audior works on iOS devices

Since on iOS browsers are not able to use the native Audio Recording application, Audior will use the default Camera app to record a video. The video is then uploaded to the server and FFmpeg will extract and convert just the audio track

  1. The user is presented with [Record Audio] + [Upload] buttons.
    Recording audio on iOS with HTML Media Capture
  2. The user will be asked to choose between making a recording or using an existing one.
    Recording audio on iOS with HTML Media Capture
  3. Making a recording will open up the camera application.
  4. After the recording is stopped you can review it, use it or take another one.
  5. If you use it you are taken back to page on which Audior is embedded.
  6. Pressing the [Upload] button will initiate the uploading and converting process. Once the file is ready, you will be able to playback the file using the embedded player.
    After recording audio on iOS with HTML Media Capture

Mobile Browsers Support

Android

  • Android 3.0 browser
  • Chrome Mobile 0.16 for Android
  • Firefox Mobile 10.0 for Android
  • Opera 16 for Android

iOS

  • iOS 6 Safari
  • Chrome Mobile

Recording using Audior on mobile devices is different in several ways:

  1. The audio files will originally be created as .3ga files on Android and .mov on iOS but both platforms will use AAC codec for audio.
  2. After a recording is made and uploaded, Audior will use FFmpeg to convert both 3GA and MOV files to MP3.
  3. There is no Callback or Control API at the moment for the mobile version