MP3 Quickie voice recorder for Moodle matures into Version 2.00, code-named Springbok

Okay, now here's what this blog post is all about. See that beauty on the left-hand side of my Moodle site?

Ladies and gentlemen, I present to you, a modern and aesthetic voice recording tool to create MP3 files on your Moodle block. MP3 Quickie Version 2.0, code-named, Springbok. The user interface is spritely, funky, lively and fun - just like the Springbok of South Africa.



For  the past two weeks, I have been tinkering away on my MP3 Quickie user interface design. After much toil and problem-solving with Javascript and PHP code, I believe that I have given my trusty User Interace a major facelift.

Before I tell you more, first I would like to rant about my second favorite past-time: programming. Erm,... the first being reading the Bible. As a programmer, it is always a challenge for me to undertake a project that demands my concentration and tests me intellectually. You either hate or love programming. The most frustrating part of programming is slaving away at the keyboard and the computer, going through the grind of code-test-debug.

For me, the BEAUTIFUL thing about programming in PHP and Javascript is that it allows me to create something out of nothing. It's like transforming lumps of earthly clay into useful works of art. It's about filling in gaps of knowledge that exist in my head with knowledge of PHP and Javascript code, curtesy of Google's search engine.


Truth be told, it is an attempt to transform the unwieldy Vimas MP3 recorder (see below) into an aesthetic and easy-to-use, one-of-a-kind of Java-based voice-board that will fit neatly into the 200px width of a Moodle sidebar block. The main engine - Java applet - was written by and copyrighted by Vimas Technologies (VT). VT is is a Ukraine software development company specializing in  applications development, based on multimedia and digital signal processing algorithms.

I am in no way associated with VT, although it is my secret and unfulfilled wish that MP3 Quickie will bring in more sales for VT's full version applet, and thus I will be rewarded through their (it it exists) affiliate programme. Never mind about that, let's continue.

The Quickie allows you, and your students, to record an brief MP3 file, play it back and download any earlier recorded MP3 files. It is useful in English and in communication classes.

You can also upload any number of MP3 files from your PC to the Quickie's server folder. However, the Quickie has a time recording limitation. It is fully-functioning, but runs a Java applet demo-version. As Nicholas Walker rightly put it in his blog post,

"The MP3 Quickie is limited to 20 seconds because it harnesses Vimas Technology’s demonstration version of its Java applet. To get past the 20 second limit, you or your college will have to come up with $400USD, plus another $300 if you don’t want to display the (Frankie: mandatory) Vimas logo."

I've spent a lot of time enhancing the interface of the Quickie and I hope you like it. First a few screenshots of the genesis of the project back in September 2011.

Version 1.0. The granddaddy. Consigned to the museum.	Version 1.4. Nothing wrong with your eyes. It's in black-and-white.	Version 1.8. This version has upload and download.

Here's what Quickie looks like in March 2012. Colourful eh?	Click the red button to record. Easy! Mouseovers abound.	Click on a item to playack. No need for a play button here!

You can scroll down the playlist with your mouse.	You can also upload any number of Mp3 files.	You can also download any file from the playlist.

Problems faced
The biggest obstacle I faced was getting the Quickie to be cross-browser. Version 2.0 now runs on Mozilla Firefox and Google Chrome. I did not face any issues with Mozilla Firefox 8.0.

With Google Chrome 16.0.912.63 m, however, there is an issue of screen scroll jumping to the top of the screen when an MP3 is selected from the playlist. It's a minor irritation but does not impeded the use of the Quickie on GC.

Current Features
Here are the features of the latest version of MP3 Quickie 2.0:

• NEW! Easy to use and attractive, modern interface 
• NEW! Check out the rounded corners, courtesy of CSS code!
• NEW! Image mouseovers with option for mouseover WAV or MP3 sound play
• NEW! Displays the playlist of stored MP3 file in chronological order (this functions as a voice forum).
• NEW! Playlist shows the Moodle user's avatar (Web 2.0-ish feature). In Mozilla Firefox and Chrome.
• NEW! The current MP3 file plays with the user's Moodle avatar shown - a nice Web 2.0 touch there.
• Allows up to 20-seconds of good quality voice recordings.
• You can listen to your recording before choosing to upload
• Sends the newly-recorded MP3 files to your Moodle server.
• Provides the usual record, stop, pause, playback, upload and upload buttons.
• Allows you to upload any number of MP3 files from your local PC to the server voice file folder.
• Allows you to download any MP3 file from the server's voice file folder, to your local computer.

And like the late Steve J. used to say, "Oh and one more thing..."

• One more thing you can do - you can skin the background of the Quickie curtesy of a jpg, png or gif file! Nice touch eh? It's just that the image filename is hardcoded into the source code. But you can easily use your own background image.

What MP3 Quickie Springbok cannot do

Of course, the Quickie is not perfect. Here is a list of features yet to be implemted:

• There is no mute button.  
• There is no sound control bar. You can't control the volume right off the Quickie itself. 
• You'll have to use the system's volume control on the status bar of your Operating System (Window 7? XP?or Mac?). 
• The playlist does not access folders and subfolders, just plain foot-soldier MP3 files.
• The "Download selection list and button complex" has to clicked onto twice before a file can be downloaded. This is because of the CSS hide-and-show toggle effect. Don't know what I mean? Try downloading a file and you will see what I mean. Irritating isn't it?

Future work needed on MP3 Quickie Springbok

• It would be nice to include a feature for the user to upload his or her own skin image file. At the moment the file name "sunrise.jpg" is hardcoded into the system. Bleh.
• You can't delete any MP3 files. No username and password system exists to enable administators to delete unwanted Mp3 files. Oh well, there's always good old FTP and Filezilla to do the work.
• It would be nice to enable the class teacher to download ALL the mp3 files in the form of a zip file.
• The console button icons only change on mouseover. They neither "push in" nor emit a response sound when the mouse is clicked on them.

Now how about a good 'ole demo, eh?

Why not indeed!
Go here and give it a try yourself. Just remember you have 20 seconds to make a recording.
http://www.moodurian.com/course/view.php?id=2
Username: studentscm
Password: studentscm


I have invested much time and effort in the 'evolution' of the software's user interface (UI). Nevertheless, in the Spirit of Open Source, I am making my UI code available for FREE!

Click here to download the <<<code for MP3 Quickie Version 2.00 Springbox>>> or click on the icon below.

Note that you can also download the earlier versions: Version 1.4, Version 1.6 or Version 1.7.

If you would like to have MP3 Quickie Springbok installed on your Moodle site, please contact me for a quotation. You can do so by clicking the big Orange pointy logo on the top-right corner of this blog.
Or you could just click on this image:






Do you have any comments on what you have read so far? Why not put in a comment at the bottom of this blog post. In the meantime, best wishes and keep on Moodling!

Frankie Kam
Melaka, Malaysia.
10th March 2012

Update (14th March 2012)
Latest UI of Version 2.01:

• Added in a (Re)play button in green.
• Upload button is differentiated by the purple colour
• If you think the colours or the icons could be improved, please let me know.

Update (14th March 2012) nighttime, Malaysia-time.
Black gradient background.

Well Springbok is not quite Winamp, but you can change the background (skin?). Just change the sunrise.jpg file. Nicholas Walker of Toronto, Canada, has been kind enough to share his version of the background file sunrise.jpg. Here's what Springbok looks like on his Moodle 1.9.12 site with Nicholas' black gradient background. Enjoy.

Kinda reminds me of these two guys.

Adios, bonjour!

Update: 15th March 2012
Tablets.
I tried MP3 Quickie on the iPad and Samsung Galaxy Tab 10.1 - no can do. Neither iOS nor Android support Java applets. And MP3 Quickie Springbok is actually a Java Applet. Grr. Maybe Oracle and Google can settle the Java code dispute in the Courts amicably.


Update: 18th March 2012
MacBook.
I tried MP3 Quickie Version 2.00 on MacBook and still NO go. It doesn't load. I'm at my wits end with this. The only consolation is that I don't own or use a MacBook, iPad2 or Apple computer. But that cuts off a sizeable portion of Netizens who use Apple products.

Update: 24th March 2012
Installation Instructions

Springbok works on Windows environment (XP, Vista, Win7). I have not tested it on Linux PC environments (but it should WORK!). It definitely does NOT work on Andriod (thanks to the Google-Oracle Showdown). Definitely does not work on Apple, MacBooks, iOS environment. Why? I am stumped.

So have fun with the code. Make sure that you:

1. Download the LATEST (as of 19th March 2012) MP3 Quickie Version 2.00 Springbok from:
    http://dl.dropbox.com/u/17797520/recorder.zip

2. Create the folder and subfolder: http://yourMoodleSite/voicefiles/miha

3. FTP recorder.zip to your moodle sevrver http://yourMoodleSite

4. Unzip the recorder.zip with all the folder information intact into:
http://yourMoodleSite/recorder

Your should end up with these folders:
http://yourMoodleSite/recorder/dropbox
-and-
http://yourMoodleSite/recorder/uploader

5. Rename any and ALL occurrences of the text moodurian.com in any of the PHP code to your actual Moodle's domain name. I use a good pretty good text editor: Notepad++. Specifically, the files that  need modifications are:

• record_app_mp3_JS.php
• record_app_spx_JS.php
• download.php
• /uploader/upload-debug.php

6. Server script must have the permission to save the voice files on the server. Please, check it. To set permissions use chmod 755 instruction on the folder voicefiles and the miha subfolder. Your web server administrator can do it. If chmod 755 does not work then set permissions on your server for /voicefiles/ and /miha/ to chmod 777 or chmod 757 to get new recordings to upload.

7. IN the recorder.zip file, you won't fnd a block because there is no block. Instead, create a HTML block. Edit it and in HTML mode copy and paste in this code:
<iframe width="98%" height="300" frameborder="0" src="http://www.yourmoodlesite/recorder/record_app_mp3_JS.php"></iframe>

8. If the Quickie doesn't load up, try upgrading your Java Runtime to the latest version.

9. Also before testing the webpage, clear your browser cache.

10. Then if you're using Mozilla Firefox, close all browser windows. Press Ctrl-Alt-Del and choose Task Manager, Processes. Look for FireFox which probably takes up a few hundred megabytes of RAM. Delete that process, then restart Mozilla Firefox and give the webpage another try. Note: you  might have to do this more than once.

11. You can also customise the background image. At line 428 of record_app_mp3_JS.php, you should find this code:

<TABLE class="roundCorners" CELLSPACING=1 style="background-image:url('green.gif');border: solid 0px #000000;color:#000000;font-family:Tahoma;font-size:10pt" border="0" RULES=NONE FRAME=BOX>

The image file used is green.gif. You can either upload a different gif file by the same name, or you can change green.gif to whatever your new image filename is.

That's it.

If all else fails, curl up into a ball or a fetal position and cry. Then after 10 minutes of consoling yourself, send me an email for help. :-)

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!