WAV audio recording applets SDK Pro, v.1.0

  1. Introduction
  2. WAV Recording Applet SDK Pro package
  3. Target platform
  4. Installation
  5. Recording applet functionality
  6. 5.1. Recording applet interface
    5.2. Recording and editing of the audio
    5.3. Hot keys using
  7. Recording applet interface
  8. 6.1 Public recording applet methods which can be invoked from JavaScript
    6.2 Java Script methods which can be invoked from recording applet
    6.3 Recording applet parameters

  9. Playback applet functionality
  10. 7.1 Playback applet interface
    7.2 Playback the audio
    7.3 Hot keys using
  11. Playback applet interface
  12. 8.1 Public playback applet methods which can be invoked from Java Script
    8.2 Playback applet parameters
  13. How to register the applets
  14. Troubleshooting
  15. 10.1 Recording applet
    10.2 Playback applet

1. Introduction

The WAV audio recording applet SDK Pro is designed for the web application developers and allows to record the audio from the web site and upload audio files to the web server via HTTP or save them on the client computer. Also, it is possible to open audio file from the server to continue the recording or/and audio file editing. The recording applet supports the editing of audio file - fragments inserts and cuts, re-records. To playback the recorded audio from the server or client computer the special playback applet is included to SDK. Both recording and playback applets support hot keys. This feature allows to control the applets via foot pedal. Playback applet supports changing of playback speed. The support of foot pedal and changing of playback speed was specially designed to transcribe dictations and other voice recordings.

The WAV recording applet uses native methods to sound capture and playback. They are implemented in the dll which will be installed on the computer when you use the applet for the first time. The recording and playback applets are digitally signed.

Top

2. WAV Recording Applet SDK Pro package

  1. Audio recording applet.
  2. Audio playback applet.
  3. Sound capture/playback DLLs.
  4. Hot keys support DLLs.
  5. Server script in PHP.
  6. Examples:
    • recording applet using,
    • playback applet using.
  7. User's Guide.
  8. License.

Top

3. Target platform

Target OS Platform: Windows 98/NT/2000/ME/XP/2003.

Target browsers:

Microsoft Internet Explorer 4.0 and up, Netscape 7, Fire Fox, Mozilla, Opera.

Java versions: Sun Java plug-in 1.3 -1.5.

Web Servers: Any web server with PHP 4.x support.

Top

4. Installation

  1. Create on the server the directories /voicefiles and /recorder in the root of the web server. For example: www.vimas.com/recorder/ and www.vimas.com/voicefiles/ . Please, for begining, create these folders in the root of web server! After applet works properly, you may change the folders location. Note! It may be will require the changes in the server script.
  2. Make changes in the wav_pro_app_recJS.php and wav_pro_app_play.php in the applet call. In the "ServerScript" and "VoiceServerFolder" parameter you have to indicate your web domain instead of www.vimas.com .
  3. Put into /recorder folder the following files:
    • wav_pro_app_recJS.php - example page which call the recording applet.
    • wav_pro_app_play.php - example page which call the playback applet.
    • WavProAppletRecJS.jar – recording applet.
    • WavProAppletPlay.jar - playback applet.
    • jaudioWavExRec.tar, jaudioWavExPlay.tar, KeyHookRecord.tar, KeyHookPlay.tar - DLL's. They contain audio capturing/playback and hot keys support.
    • retrive.php - server script for the receiving of audio files and saving them on the server. The server script will create sub folder in the /voicefile folder with name which is defined in the wav_pro_app_recJS.php in the UserServerFolder applet parameter and save audio file there. If sub folder with UserServerFolder name already exist, the audio file will be saved there.
  4. Server script must have the permission to save audio files on the server in the specified folder. Please, check it. To set permissions use chmod 755 instruction . Your web server administrator can do it.
  5. To test the recording applet, open wav_pro_app_recJS.php in the browser on the client computer.
  6. To test the playback applet, open wav_pro_app_play.php page in the browser on the client computer.

Note! you may put applet and DLL files in the other folders then mentioned above, but you must keep in mind the following:

Top

5. Recording applet functionality

  1. Audio capture from sound card in following formats:
    • WAV PCM/16bits/mono,
    • WAV Mu-Law/ 8bits/mono,
    • WAV A-Law/ 8bits/mono,
  2. The sampling frequencies are 8000Hz, 11025Hz, 16000Hz, 22050Hz, 32000Hz, 44100Hz. The format and sampling frequency can be set as applet parameters.
  3. Playback of the recorded audio file for sound quality and content evaluation
  4. Uploading of the audio file to the web server via HTTP. The PHP server script is used to receive audio file on the server.
  5. Playback of the audio files from the web server in the streaming mode.
  6. Audio file editing: insert and cut the frame, re-record.
  7. Hot keys support to control the applet via foot pedal.

Top

5.1 Recording applet interface

Fig.1

 

On the Fig.1 you see the example of the recording applet interface. It can be customized according to your web application and it style. You can use your own images of buttons, remove some buttons or/and fields, change the colors of applet panel.

Applet controls:

  1. Rewind. To rewind, click on this button and you will rewind audio on the one step. The step size is defined in the applet parameter "skiptime" in the seconds.
  2. Insert the audio frame into recorded audio file.
  3. Check-box. If it is On, only marked frame will be played back, but not full audio file.
  4. The file name field. User has to enter the file name before saving audio file on the server. The audio file can not be uploaded without file name. In this case if this field is hidden, file name has to be passed to applet via Java Script function UPLOAD_RP().
  5. The field to choose audio file name which was saved on the server during current session. It is as example only. This field can be removed together with (11).
  6. Save audio file on the client computer.
  7. Open audio file from the client computer.
  8. Fast Forward. To fast forward, click on this button and you will move forward on the one step. The step size is defined in the applet parameter "skiptime" in the seconds.
  9. This button demonstrates how to add additional post variables to post variables which are defined in the applet parameters and upload them on the server together with audio file. It can be removed if you do not need to upload additional post variables to server. You can use Java Script function setparameter() to set additional post variables. See the source code of wav_pro_app_recJS.php example .
  10. Upload the audio file to the server.
  11. Playback of the audio file from the server in the streaming mode.
  12. Maximal recording time while recording. Length of audio file during playback.
  13. Current time during recording/playback.
  14. Status message field.
  15. Input sound level indicator.
  16. Knob. It shows current position in the audio file.
  17. Indicator of audio buffer filling. The geometrical size of the indicator corresponds maximal recording time during recording or audio file length during playback.
  18. Cut the marked frame from the audio file.

Top

5.2. Recording and editing of the audio

 

To record, stop, play and pause use Record, Stop, Play, Pause buttons. Recorder functionality allows to edit the audio file which you are recorded. You can re-record the fragment of file, insert and cut the fragments.

To re-record you have to put the knob by left mouse button in the position on the audio file from which you want to start the re-record, then push the Record button. The re-record will be started.

To put the knob in the correct position you can playback the audio file and push Stop buton in the position which you need.

To insert the fragment you have to put knob in the position and push Insert button. The record of new fragment will be started. To stop the fragment insertion, push Stop button.

To cut the fragment of audio file you have to mark it and push the Cut fragment button.

You can mark the fragment in a few ways:

  1. click by right mouse button on the slider black line in the start position and click in the end position of fragment. It will be marked by green line with red borders.

  2. Playback the audio file and stop playback in the position from which you want to start to mark the fragment. Then single click right mouse button on the knob and push playback again. In the end position click on the Stop button. Fragment is marked. If you want to change the border of fragment, drag the red mark by right mouse button.

To listen the marked fragment, check the box (3). If box is checked, then playback will work on the marked frame only but not on the full audio file. To playback full audio file you have to uncheck the box (3).

To unmark the fragment double click on the marked frame by right mouse button.

Recording applet allows to download audio file from the server to edit it and upload it again to the server. To upload audio file from the server, use WEBPLAY ( ) applet method.

Also, you can save recorded audio file on the client computer by using SAVE() applet method. To open audio file from the local computer you can use OPEN() method.

Top

5.3. Hot keys using

Some of the recording applet controls are associated with hot keys. Hot keys allows to use foot pedal to control the applet. Hot keys can be set in the applet parameters. Applet controls associated with Ctrl+X keys combination, where X is any key. For example, in the wav_pro_app_recJS.php, Ctrl+2 corresponds to Record button.

< PARAM NAME = "RECORD_KEY" VALUE = "50" >

"50" is ASCII code of "2" key. You can change the hot key assignment, but Note! Hot keys must not be the same as other applications use. How to associate hot keys with foot pedal, read in the User's Guide of foot pedal.

In the wav_pro_app_recJS.php example we use the following hot keys assignment:

Top

6. Recording applet interface

 

To control the recording applet, it has the public methods which can be invoked from Java Script. Also, recording applet can invoke the Java Script functions.

 

    6.1 Public recording applet methods which can be invoked from Java Script

    Applet methods Applet action
    RECORD( ) Start the recording/encoding of audio data
    PLAYBACK ( ) Start the playback from client PC
    PAUSE ( ) Record/Playback pause
    STOP ( ) Stop the record/playback
    UPLOAD ( String filename ) Uploads audio file from client PC to web server. Server script program is responsible for file receiving
    WEBPLAY ( String filename ) Playback the recorded audio file from the server.
    SAVE ( ) Save the recorded audio file on the client computer.
    OPEN ( ) Open the audio file from the client computer.
    CUT( ) Cut the audio fragment from audio file.
    INSERT( ) Insert the audio fragment into the audio file.
    FORWARD( ) Move forward on the audio record on the one step. The size of step is defined in the applet parameter "skiptime" in the seconds.
    REWIND( ) Rewind the audio record on the one step. The size of step is defined in the applet parameter "skiptime" in the seconds.
    YES() Permit to rerecord audio file or open other file from client computer.
    NO() Prohibit to rerecord audio file or open other file from client computer.
    FRAGMENT() Switch player to play marked fragment or full audio file. Related to check box in the example.
    SETPARAMETER() Set the additional post variables to upload them on the server with audio file.

    Top

    6.2. Java Script methods which can be invoked from recording applet

    Applet methods
    Applet action
    SetStatus_RP(s,num) Applet sends status message to Java Script. This message appears in the status line.
    SetTimer_RP( s ) Applet sends current recording/playback time to Java Script
    confirmRecord(s,num) Confirm re-record . (In case if user want to re-record the audio message)
    report_RP(s,num) Applet passes the message which appears in the pop-up window.

    Top

    6.3. Recording applet parameters

    Applet parameter name
    Parameter value
    Parameter description
    "ServerScript" e.g. "http://www.vimas.com/voicefiles/retrive.php" Server script URL
    "VoiceServerFolder"

    e.g. "http://www.vimas.com/voicefiles/"

    URL of directory in which the audio files are stored.
    "TimeLimit " 1...N N – is maximal recording time in seconds.
    "Registration" a) “Demo”

    b) Name of file with registration key. For example, “RegKey.txt”
    a) Applet works as demo, the maximal recording time is 20 sec. If Registration parameter is absent, applet works as demo, too.
    b) The registration key file you will receive after licensing. File must be located on the server in the same directory with applet.
         
    "BlockSize" E.g. 1024 Applet uploads audio file block by block. This parameter defines the size of block in bytes.
    "InterfaceType" JS or Java Applet can use controls which created by Java Script (JS) or interface applet (Java).
    "AudioFormat" MuLaw, ALaw or PCM Defines the audio format. If parameter is absent, the audio format is MuLaw.
    "Sampling_frequency" 8000, 11025, 16000, 22050, 32000, 44100 Defines the sampling frequency. If parameter is absent, the sampling frequency is 8000 Hz.
    "UserServerFolder" e.g. "User1_personal_folder" Defines the sub folder which is in the VoiceServerFolder.
    "UserPostVariables" e.g. "name,country" Defines the post variables
    "skiptime" e.g. 5 Defines the step for Rewind and Fast Forward, in seconds.
    "REWIND_KEY" e.g. 49 Defines hot key for Rewind button.
    "RECORD_KEY" e.g. 51 Defines hot key for Record button.
    "PLAY_KEY" e.g. 52 Defines hot key for Play button.
    "PAUSE_KEY" e.g. 53 Defines hot key for Pause button.
    "STOP_KEY" e.g. 54 Defines hot key for Stop button.
    "FORWARD_KEY" e.g. 55 Defines hot key for Fast Forward button.
    "CUT_KEY" e.g. 56 Defines hot key for Cut button.
    "INSERT_KEY" e.g. 57 Defines hot key for Insert button.
    "FRAGMENT_KEY" e.g. 58 Defines hot key for Fragment check box button.
    "SAVE_KEY" e.g. 48 Defines hot key for Save button.
    "bgColor" e.g. ff9933 Defines the colors of applet panel.
    "lineBgColor" e.g. ff6633 Defines the colors of applet panel.
    "markersColor" e.g. ffff66 Defines the colors of applet panel.
    "selectionColor" e.g. 339933 Defines the colors of applet panel.
    "filledColor" e.g. 000000 Defines the colors of applet panel.
    "knobColor" e.g. cc0000 Defines the colors of applet panel.
    "lowVolumeColor" e.g. cc3333 Defines the colors of applet panel.
    "normalVolumeColor" e.g. 006633 Defines the colors of applet panel.
    "highVolumeColor" e.g. ff0033 Defines the colors of applet panel.

     

    Top

    7. Playback applet functionality

  1. Playback of audio from the server in the streaming mode or from the local computer in the following formats:.
    • WAV PCM/16bits/mono,
    • WAV Mu-Law/ 8bits/mono,
    • WAV A-Law/8bits/mono.
    • The sampling frequencies are 8000Hz, 11025Hz, 16000Hz, 22050Hz, 32000Hz, 44100Hz.
  2. Changing of playback speed. Minimal playback speed is half of normal speed. Maximal playback speed is in 2 times more then normal speed.
  3. Hot keys support to control the applet via foot pedal
  4.  

    Top

    7.1 Playback applet interface

    Fig.2

  1. Rewind. To rewind, click on this button and you will rewind audio on the one step. The step size is defined in the applet parameter "skiptime" in the seconds.
  2. Play.
  3. Pause.
  4. Stop.
  5. Fast Forward. To fast forward, click on this button and you will move forward on the one step. The step size is defined in the applet parameter "skiptime" in the seconds.
  6. Knob to set playback speed.
  7. Timer.
  8. Status bar.
  9. Indicator of audio buffer filling. The geometrical size of the indicator corresponds length of audio file during playback.
  10. Knob. It shows current position in the audio file.

Note! To play audio file for the first time from the server, use WEBPLAY ( ) applet method. As example use function

webplay()

{ document.InterfaceApplet.WEBPLAY("test.wav"); }

from example web page. File name has to be passed to WEBPLAY ( ) as argument. Audio file location is defined in the "VoiceServerFolder" applet parameter. Then, if audio file is downloaded by player, you can use Play button (2) to playback.

Also, you can open audio file from your local computer by using OPEN() applet method.

Top

7.2 Playback the audio

To playback the audio push the Play button (1).

To change the playback speed move the knob (6). Maximal playback speed is in 2 times more then normal speed. Minimal playback speed is half of normal speed. Slow playback speed is recommended for transcribing. Fast playback speed is recommended to search interesting places in the audio file.

To rewind and fast forward use Rewind (1) and Fast Forward button (5). Also, you can move knob (10) by mouse in the new position or click by mouse on the indicator (9) in the new position.

     

    Top

    7.3 Hot keys using

Some of the recording applet controls are associated with hot keys. Hot keys allows to use foot pedal to control the applet. Hot keys can be set in the applet parameters. Applet controls associated with Ctrl+X keys combination, where X is any key. For example, in the wav_pro_app_recJS.php, Ctrl+2 corresponds to Record button.

< PARAM NAME = "REWIND_KEY" VALUE = "49" >

"549" is ASCII code of "1" key. You can change the hot key assignment, but Note! Hot keys must not be the same as other applications use. How to associate hot keys with foot pedal, read in the User's Guide of foot pedal.

In the wav_pro_app_recJS.php example we use the following hot keys assignment:

Top

8. Playback applet interface

 

To control the playback applet, it has the public methods which can be invoked from Java Script.

8.1 Public playback applet methods which can be invoked from Java Script

Applet methods
Applet action
WEBPLAY ( String filename ) Applet receives from Java Script the audio file name and playbacks this file from the server in the streaming mode. Audio file location is defined in the "VoiceServerFolder" applet parameter.
OPEN ( ) Open the audio file from the client computer to playback it.

Top

8.2 Playback applet parameters

    Applet parameter name
    Parameter value
    Parameter description
    "VoiceServerFolder"

    e.g. "http://www.vimas.com/voicefiles/"

    URL of directory in which the audio files are stored.
    "Registration" a) “Demo”

    b) Name of file with registration key. For example, “RegKey.txt”
    a) Applet works as demo, the maximal recording time is 20 sec. If Registration parameter is absent, applet works as demo, too.
    b) The registration key file you will receive after licensing. File must be located on the server in the same directory with applet.
    "skiptime" e.g. 5 Defines the step for Rewind and Fast Forward, in seconds.
    "REWIND_KEY" e.g. 49 Defines hot key for Rewind button.
    "PLAY_KEY" e.g. 52 Defines hot key for Play button.
    "PAUSE_KEY" e.g. 53 Defines hot key for Pause button.
    "STOP_KEY" e.g. 54 Defines hot key for Stop button.
    "FORWARD_KEY" e.g. 55 Defines hot key for Fast Forward button.

Top

9. How to register the applets

The audio recording and playback applets works in the demo or full functional modes. To use applet as demo applet, you have to add to applet parameters the following parameter:

<PARAM NAME = "Registration" VALUE = "Demo">

Applet also works as demo if "Registration" parameter is absent.

In demo mode the applets will work with limited to 20 sec recording (playback) time.

It is single difference between demo and full functional applet mode.

To use applet as full functional you have to:

Top

10. Troubleshooting

10.1 Recording applet

10.1.1 I can not record the audio message

1. You pushed the “Record” button but recording applet does not record the sound. The alert window with "Object does not support this property or method” message appears.

a) Java plug-in may be is not installed on your computer. Please, check it. Check Java plug-in with other applets.

b) The recording applet is not downloaded from the server to the client machine. For successful downloading of WavProAppletRecJS.jar it must be located on the server in the same directory with web page which calls the applet. The WavProAppletRecJS.jar can be placed also in the other directory. In this case, in the CODEBASE (in the recording applet call) must be indicated the full path to WavProAppletRecJS.jar: For instance: CODEBASE=http://www.yourURL.com/dir1/recorder/ At first, please, create the directories as in the documentation and examples is recommended. Then, when applet works properly, you can re-create directories as you want, corresponding to your web application.

c) If audio recording still does not work, please, copy the Java console content and send to support: info@vimas.com .

10.1.2 Audio module could not be loaded

You use applet for the first time on the client computer. You got error message in the status line "Audio module could not be loaded".

a) Check if jaudioWavExRec.tar and KeyHookRecord.tar in the same folder with applet file WavProAppletRecJS.jar. If it is in the correct place, please, check if browser can download it. To download jaudioWavExRec.tar file by browser, type full path to jaudioWavExRec.tar in the Address field of browser. For instance: http://www.vimas.com/recorder/jaudioWavExRec.tar . If browser cannot download it - the server setting does not allow to download it. Please, fix it.

b) if jaudioWavExRec.tar in the correct place on the server, browser can download it, but applet can not download, please, close all browsers, then open the browser and try to use applet. If applet still can not download audio module, please, contact us for support.

10.1.3 I can not upload the audio file to server

You recorded the audio message and can playback it successfully. You entered the name of file and push the “Send” button, in the status line you see “Uploading audio message...”, but in a few seconds you got “Your message could not be uploaded” message.

a) Server script retrive.php is written in PHP, so, be sure if your web server supports the PHP.

c) Check the "ServerScript" applet parameter. Be sure that path to retrive.php is correct.

d) Server script must have the permission to save the voice files on the server. Please, check it. To set permissions use chmod 755 instruction .

10.1.4 Hot keys problems

1. If hot keys does not work, it is means the applet did not download hot keys module KeyHookRecord.tar from the server on the client computer. Please, check if KeyHookRecord.tar is on the server in the same folder with with applet file WavProAppletRecJS.jar.

2. If you use hot keys to control the applet but other application response on that keys, it is mean, other application use the same hot keys. Please, close other application or change the hot keys settings.

Top

10.2 Playback applet

10.2.1 Applet control panel does not appear

a) Java plug-in may be is not installed on your computer. Please, check it. Check Java plug-in with other applets.

b) The playback applet is not downloaded from the server to the client machine. For successful downloading of WavProAppletPlay.jar it must be located on the server in the same directory with web page which calls the applet. The WavProAppletPlay.jar can be placed also in the other directory. In this case, in the CODEBASE (in the playback applet call) must be indicated the full path to WavProAppletPlay.jar. For instance: CODEBASE=http://www.yourURL.com/dir1/recorder/ At first, please, create the directories as in the documentation and examples is recommended. Then, when applet works properly, you can re-create directories as you want, corresponding to your web application.

c) If playback control panel still did not appear, please, copy the Java console content and send to support: info@vimas.com .

10.2.2 Applet does not play the audio file

a) check if the the name of file is correct in the argument of WEBPLAY ( ) applet method.

b) check if the path to file is correct in the "VoiceServerFolder" applet parameter.

c) check if audio file is located with correct name in the correct folder on the server.

d) check if server allows to download audio file. It can be done in the following way: enter in the address field of browser URL of audio file and try do download it by browser.

10.2.3 Hot keys problems

1. If hot keys does not work, it is means the applet did not download hot keys module KeyHookPlay.tar from the server on the client computer. Please, check if KeyHookPlay.tar is on the server in the same folder with with applet file WavProAppletPlay.jar.

2. If you use hot keys to control the applet but other application response on that keys, it is mean, other application use the same hot keys. Please, close other application or change the hot keys settings.

Top