Figure 1. MP3 Quickie Version 1.0
The interface design is "original", but the main underlying code is not. More on that later in this post.
You can try the live demo here:
http://scm.moodleace.com/course/view.php?id=44
Username: student
Password: moodle
The voice recorder is actually based on Vimas Technology's Mp3 Recording Applet SDK. Here's a screenshot of their demo product from their webpage:
Figure 2. The demo plugin of Vimas Technology
Here's my Youtube video on how to use my modified version which is MP3 Quickie.
Figure 3. Youtube demonstration o MP3 Quickie Version 1.0
So what's it all about then?
I have created a variant of Vimas Technology's demo voice recorder (PHP code, no MySQL database). This variant can be easily installed onto your Moodle 1.9 or Moodle 2.0 site. I designed it to fit in a Moodle block by using iframe HTML code.
It is based on the MP3 recorder by Vimas Technologies. (http://www.vimas.com). The core feature remains unchanged, which is to make 20-second voice recordings and save them as MP3 files. I tidied up the original code of their 20-second demo voice recorder, improved the interface and added a few more features:
- player button icons
- checking of filenames for spaces and auto-removal of such spaces
- simplification of the filenames - removed the .mp3 file extensions displayed in the Saved drop-down list
- simplified the installation process (see below)
For more screenshots, information, source code and installation instructions, check out the Appendix section of this post.
I can't tell if the quality of the recording is because of my cheap headset or if the demo applet is coded to contain background static. Perhaps if you happen to have a decent quality headset with noise-cancellation technology, you can test the MP3 Quickie on my Moodle site and judge for yourself.
I have tested the MP3 Quickie on m Moodle 1.9.7 site, and on Mozilla Firefox. Please let me know if there are any bugs, problems or browser incompatibilities (ie., IE!). I hope you have fun using this MP3 Quickie.
SUMMARY
Pros:
- can fit nicely inside a Moodle block - very convenient
- saved voice recordings can be displayed in a drop-down list - very convenient
- the embed code of the mp3 file is displayed during the voice recording process for easy copy and paste
Figure 4. Embed code appears in a Javascript alert box
- simplified interface;
- simplified installation compared to the original Vimas' instructions;
- smaller sound files due to MP3 format compared to Nanogong's format;
- can be used on Moodle 2.x;
- free unless you want to buy the full version applet from Vimas Technology.
- 20-second limitation on each voice recording makes for only short recording sessions;
- default sound quality has background static noise, but according to the documentation, you can set bitrates up to 320 Kbps and sampling frequencies of up to 48,000 Hz.
- interface can be improved further
- an admin user is unable to delete MP3 sound recordings from the interface. However the admin can delete the files manually from the moodleFolder/voicefiles/miha subfolder.
- no direct way of downloading the MP3 files created by the recorder
- Latest as of 9th September 2011: Mozilla Firefox 6 results in a lockup when the REFRESH button is clicked. Unable to be resolved at the moment.
For a discussion on Moodle.org on MP3 Quickie, please click this forum link.
Regards,
Frankie Kam, Melaka, Malaysia
A-P-P-E-N-D-I-X
VERSIONS
Version 1.0
Figure 5. Version 1 of MP3 Quickie.
Embed code inside HTML block
<iframe width="98%" height="180" frameborder="0" src="../recorder/record_app_mp3_JS.php"></iframe>
Download link of Version 1.0
Download the files of the original version from here: MP3_Quickie_Ver1.zip.
Version 1.4
Figure 6. Version 1.4 oof MP3 Quickie.
Embed code of Version 1.4 inside a Moodle block:
<iframe width="98%" height="200" frameborder="0" src="../recorder/record_app_mp3_JS.php"></iframe>
Note: the filename record_app_mp3_JS.php is the same as Version 1.0. So be careful if working with multiple vesions.
The additional features of this version 1.4:
(1) Long filenames, upto 240 letters
(2) Save drop-down list with play-back icon
(3) Link for download to most-recently uploaded MP3.
(4) Refresh button to display link of most-recently uploaded MP3.
(5) Mouseovers with pop-out of help titles
Figure 7. Version 1.4 of MP3 Quickie inside a test course page.
It is best for the block to be located on the left-most column. That way you can read the filenames of the files stored on the server.
Figure 8. Version 1.4 of MP3 Quickie allows you to right-click
and download the most recently uploaded MP3 file.
and download the most recently uploaded MP3 file.
Figure 9. Version 1.4 of MP3 Quickie showing the
drop-down(up) list of saved MP3s on the sever.
drop-down(up) list of saved MP3s on the sever.
Download link
Download the VERSION 1.4 (as of 7th September 2011) from here:
or from here: http://minus.com/mPv1Tgivg
You should be able to get the file MP3_Quickie_RecApplet_Ver1_4.zip from either one of the links. If you are unable to get the file to download by a direct mouse click, then try RIGHT-CLICK and SAVE AS. That should work! If you are unable to directly click to download the file, choose Right-click and select Save target as" or "Save link as".
WARNING! I have tested the MP3 Quickie 1.4 system on these web browsers:
(1) Internet Explorer - no problems
(2) Google Chrome - no problems
(3) Mozilla Firefox 6 - pressing the REFRESH button results a in lockup! The words "Loading Java Applet..." appears but the rest of the applet is just a white background. I am at this time unable to resolve the problem. So be warned.Download the LATEST VERSION 1.5
(as of 9th September 2011) from here:
The original PHP code by Vimas Technology and underlying applet is neither freeware nor open source (which I had wrongly assumed from the beginning). See documentation of licensing agreement found in this download from Vimas Technology's website. I quote in part:
>1.3 VIMAS Technologies mentioning as applet developer :
> you have to add to web page with Mp3 recording applet the link to
>http://www.vimas.com/ and text “Mp3 web audio recorder powered by VIMAS
>Technologies” or something else with the same sense. If you do not willing
>to mention the VIMAS Technologies, you must pay additional $300.
>
Therefore, I've decided to make FOUR main changes to the MP3 Quickie. Arising out the changes is Version 1.5 of MP3 Quickie. Below are the changes.
(1) I made sure that once the user clicks the upload button, the system will upload the file to the server and then auto-refresh the applet so that the link points to the latest and most recent file on the server (the one just uploaded).
(2) I've removed the REFRESH button (lower-right-hand corner) since it was causing a lockup problem with Mozilla Firefox 6. That didn't happen with IE or Google Chrome, but it was frustrating to have lockups when the user clicked REFRESH. Now MP3 Quickie Version 1.5 no longer has any lockup problems when used with Mozilla Firefox.
(3) I've replaced the problematic REFRESH button with an image button showing Vimas Technology's logo. I hope this fulfills the licensing requirements as now proper credit is given to the company that created the applet MP3 technology - Vimas Technology. I changed the hue from blue to black in order to match the white-and-black theme of the applet. If you want to retain the original blue hue of the Vimas Technology logo, use the file vimas_clear.png instead of vimas_black.png in the source file record_app_mp3_JS.php.
(4) I've reenabled the original volume tracker bar on the bottom of the applet. It shows hues of blue to green (to red?) depending on the volume of the input speech. I thought that this would provide a proper visual feedback of the input level. I had originally hidden this bar by using 0 value in this line of code in the file record_app_mp3_JS.php:
ALIGN="MIDDLE" WIDTH="98%" HEIGHT=0
I changed the value of the HEIGHT parameter to 5.
ALIGN="MIDDLE" WIDTH="98%" HEIGHT=0
The Moodle HTML block settings with HTML mode activated are below:
<iframe width="98%" height="220" frameborder="0" src="../recorder/record_app_mp3_JS.php"></iframe>
In conclusion, with these enhancements, I have reached a milestone in the week-long development of this MP3 plugin. I hope that you will enjoyed plugin as much as I have enjoyed overcoming the programming and testing obstacles in the development of MP3 Quickie.
Frankie Kam
Melaka, Malaysia
Download MP3 Quickie version 1.5
To download properly, click on the above hyperlink. Then when you see the hperlink "Download MP3_Quickie_Version1_5.zip", right-click you mouse on the new link and you should then choose "Save target as" to save the zip ile to your computer.
INSTALLATION INSTRUCTIONS
1. Download the zip file named MP3_Quickie_Version1_5.zip.
2. Upload (FTP) the zip file to your Moodle main folder.
3. Extract the zip file. Two folders will be created in you Moodle main folder:
- recorder folder
- voicefiles folder (this folder contains a sub-folder named miha. Voice recordings are saved in the miha subfolder)
5. change line 8 of record_app_mp3_JS.php:
$MyMoodleSite = "scm.moodleace.com";
Substitute the text scm.moodleace.com with the name of your moodle site's url.
You will need to check these 3 php files and replace all occurrences of scm.moodleace.com (my old domain) with yourdomain.com. The Quickie will only load if you do these manual steps:
\recorder\record_app_mp3_J.php (3 hits)
Line 12: codebase = "http://scm.moodleace.com/recorder"
Line 28: CODEBASE="http://scm.moodleace.com/recorder"
Line 38: <PARAM NAME = "ServerScript" VALUE = "http://scm.moodleace.com/recorder/retrive.php">
\recorder\record_app_mp3_JS.php (8 hits)
Line 34: $MyMoodleSite = "scm.moodleace.com";
Line 149: document.RPApplet.SAVE("scm.moodleace.com/voicefiles/miha/","Name.mp3");
Line 375: echo "<a href=\"http://scm.moodleace.com/voicefiles/miha/$latest_filename\" class=\"blacklink\" alt=\"Last saved\" title=\"7. Copy and paste this link to your forum post\">$choppedTo13charactersFileName</a>";
Line 468: $uploader = new FlashUploader('uploader', '../voicefiles/miha/uploader', 'http://scm.moodleace.com/recorder/uploader/upload.php');
Line 490: CODEBASE="http://scm.moodleace.com/recorder"
Line 496: <PARAM NAME = "ServerScript" VALUE = "http://scm.moodleace.com/recorder/retrive.php">
\recorder\record_app_spx_JS.php (7 hits)
Line 34: $MyMoodleSite = "scm.moodleace.com";
Line 149: document.AudioApplet.SAVE("scm.moodleace.com/voicefiles/miha/","Name.spx");
Line 371: echo "<a href=\"http://scm.moodleace.com/voicefiles/miha/$latest_filename\" class=\"blacklink\" alt=\"Last saved\" title=\"7. Copy and paste this link to your forum post\">$choppedTo13charactersFileName</a>";
Line 464: $uploader = new FlashUploader('uploader', '../voicefiles/miha/uploader', 'http://scm.moodleace.com/recorder/uploader/upload.php');
Line 499: <param name = "serverScript" value = "http://scm.moodleace.com/recorder/retrive.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 777 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 Moodle, create a HTML block You can name the block MP3 Quickie.
8. Edit the block and activate the HTML button. Paste in the below iframe code:
<iframe width="98%" height="180" frameborder="1" src="../recorder/record_app_mp3_JS.php"></iframe>
If you see horizontal and vertical scroll bars appearing, then increase the height value to 200 or more.
9. That's about it.
USER GUIDE
From Vimas Technologies original SDK user guide. It contains valuable information. For example you can set different sampling frequencies and bit-rates.
End
See also:
MP3 Quickie Version 1.6 now allows you to download your saved MP3 files from the server to your client computer!
MP3 Quickie - Ver1.7 now allows uploading of MP3 Files!
No comments:
Post a Comment