Using NanoGong with PHP

Who is this page aimed at?

This page explains how to program with the NanoGong applet. If you only want to put NanoGong on your web page without any programming, or you are using NanoGong with Moodle using the files we provide, you can ignore this page.

Overview

The NanoGong applet can send the recorded voice to an arbitrary website using a Web page scripting language such as JavaScript. That means you can create a Web page that allows viewers to record their voice and then help them send the voice recordings directly to the server automatically. On the server side a program can then receive those voice recordings and save them for later use. This page explains how you can achieve this using a simple Web page with some backend PHP code.

Below are the step-by-step instructions:

  1. Create the Web Page
  2. Create the PHP Server Side Code to Receive the File

1. Create the Web Page

 
Step 1.1 DOWNLOAD THE NANOGONG APPLET
  • Download the NanoGong applet from the downloads page after submitting a request form
 
Step 1.2 EXTRACT THE JAR FILE
  • The zip file contains the NanoGong applet which is called 'nanogong.jar'
  • Please put the jar file in the location where you will create your web page (in other words, put it in the same folder)
 
Step 1.3 CREATE THE WEB PAGE
  • Create a Web page that contains the following components:
    • The JavaScript for sending the voice recording to your PHP server side code, which will be created in the next step (shown lower in this web page)
      • The script executes the sendGongRequest function with the 'PostToForm' action. Please refer to the scripting page for details
      • The location of the destination backend program and the form parameter name of the file should be the ones to be used in the next step (shown lower in this web page)
    • The NanoGong applet
      • Assign an id/name to the applet, which will be used in the JavaScript
    • An HTML button for submitting voice recordings
      • Run JavaScript when it is clicked
  • Below is an example of the Web page which:
    • Uses 'receiver.php' (you can use a different filename) as the destination PHP file
    • Sends the voice recording as a file upload with a parameter named voicefile

    <html> <head> <title>NanoGong Example</title> <script language="JavaScript"> function submitVoice() { // Find the applet object var applet = document.getElementById("nanogong"); // Tell the applet to post the voice recording to the // backend PHP code var ret = applet.sendGongRequest( "PostToForm", "receiver.php", "voicefile", "", "temp"); if (ret == null || ret == "") alert("Failed to submit the voice recording!"); else alert("Voice recording has been submitted!"); } </script> </head> <body> <p>Please submit your voice using the NanoGong applet below.</p> <applet id="nanogong" archive="nanogong.jar" code="gong.NanoGong" width="180" height="40"></applet> <form> <input type="button" value="Submit!" onclick="submitVoice()" /> </form> </body> </html>

The Web Page
The Web Page Created Using the Above HTML
(click to enlarge image)

2. Create the PHP Server Side Code to Receive the File

 
Step 2.1 CREATE THE PHP SERVER SIDE CODE
  • Create a PHP program which does the following:
    • Verify the uploaded file using the $_FILE variable and the is_uploaded_file function
    • Move the uploaded file to a specific directory using the move_uploaded_file function
  • The PHP program needs to have the same name used in the script of the HTML file. For example, in step 1 above the name 'receiver.php' is used, so you must store the following PHP code in a file with the same name
  • Below is an example PHP code which:
    • Checks the validity of the file upload named voicefile
    • Then moves the file to the 'voice' directory using the current time value as the filename
    • Prints 'success' if successful and prints nothing otherwise

    <?php // Check validity of file upload if (!is_uploaded_file($_FILES['voicefile']['tmp_name'])) exit; // Move the file to the voice directory mkdir('voice', 0700); // Generate a filename using the time value $i = 0; do { if ($i > 0) sleep(1); $filename = 'voice/' . time() . '.wav'; $i++; } while ($i < 3 && file_exists($filename)); // try 3 times for unique // filename if (file_exists($filename) || !move_uploaded_file($_FILES['voicefile']['tmp_name'], $filename)) exit; // Return the text 'success' to the JavaScript print "success"; ?>

 
Step 2.2 LOAD A STORED VOICE RECORDING
  • After you have the system described above working successfully all voice recordings submitted by the NanoGong applet will be stored in WAV format in a directory called 'voice'
  • These voice recordings can be used in various ways, for example, if you want to you can load them back to the browser using a NanoGong applet so users can play them back and listen to them at slower/faster speeds, if desired
  • To load a voice recording into a NanoGong applet you can make use of the 'SoundFileURL' parameter in HTML. Please refer to the NanoGong configuration for details
  • Below is an example of the HTML parameters required to load a file called '12345678.wav' in the voice directory on the server into NanoGong in a web page

    ... <applet id="nanogong" archive="nanogong.jar" code="gong.NanoGong" width="180" height="40"> <param name="SoundFileURL" value="voice/12345678.wav"/> </applet> ...