Pages

Wednesday, September 14, 2011

MP3 Quickie - Ver1.7 now allows MP3 files downloading to AND uploading from the client computer!

Here's news on my latest work on the MP3 Quickie.

It now incorporates an upload MP3 files button and two selection lists. One selection list is unsorted to show the MP3 files stored on the server in chronological order - it functions as a MP3 playback list. The other selection list is alphabetically sorted for easy single downloading of MP3 filenames. MP3 Quickie now stands at Version 1.7 as of September 2011.


I. DOWNLOADING MP3s TO THE CLIENT

This feature was achieved with version 1.5. At the moment, you can only download MP3 files one at a time.



Figure 1: The download list allows you to download one MP3 at a time.

In earlier development phases, I was able to do multiple selections on the selection list and pass multiple filenames to the download.php file, but alas, only one file was downloaded each time. So we will have to live with single downloads until and unless I can figure out how to do multiple downloads or even download all stored MP3s as a single zipped file.




II. UPLOADING MP3s TO THE SERVER
There are TWO ways to implement the upload button on my site (I've included both inside the coding of record_app_mp3_JS.php).

(a) CuteSoft Components Inc. has PHPFileUploader. It has a simple upload button with an impressive looking progress bar. It comes with a 30-day evaluation demo, while the full domain version costs USD99.00.
Figure 2: The interface of MP3 Quickie with phpFlashUploader utility.
Notice the clean and simple design of the Upload button? The upload feature
will disable after 30 days if unactivated by a purchase.



Features of the phpFlashUploader include (from the developer's webpage):
  • Select multiple files at once when sending
    • PHP File Uploader allows you to select and upload multiple files at once rather than having to select and upload each file individually.
  • Client side validation of the file size/type before uploading
    • Client side validation of file size/types prior to uploading the files to a server to increase usability and reduce consumption of network and server resources.
  • Provides rich progress and status information during the upload
    • PHP File Uploader has a real time progress bar which keeps track of every file upload. It offers an accurate and detailed progress indicator to end-users. It also gives end-users the ability to cancel uploads in progress.
  • Powerful approaches to uploading files without refreshing the page
    • Ever wanted to upload files using AJAX like in GMAIL, without reloading the page?
  • Asynchronous file upload
    • This means that the file is uploaded in the background, allowing user to still use the page while the file us being uploaded. 
The code was very easy to insert into my record_app_mp3_JS.php file.



Figure 3: Inserted code of phpFlashUploader. 



(b) Michael Verner of Verner Web Studio has a In-A-Flash file uploader with progress bar.
Very easy to install, but comes with a logo embedded inside a swf file. Cost is USD0.00 (free).

Options include (from Verner's website):
  • Customizable colors
  • 2 styles to choose from: bar or text
  • Free PHP and Python scripts to get you started
  • Shows file upload progress
  • Multiple file upload capable
  • Restrict file types
  • Javascript integration - call a javascript function after file upload
  • ...plus many other customizable options!
Figure 4: The interface of MP3 Quickie with In-A-Flash upload utility. 
The design of the upload section is relatively more cluttered. But it's FREE!


Figure 5: Inserted code of In-A-Flash uploader.

If you know of any other FREE Php file uploader that is EASIER to install than In-A-Flash-Uploader, please let me know! I can't find any other that beats this Php file installer in the ease-of-setup department.

Figure 6: Sub-folder structure inside my recorder folder. Provided here for those of
 you who might want to install the uploaders on your own production site!

My personal choice of uploaders?

GUI-wise, I prefer using the phpFileUploader link to upload MP3 files because the Upload button is simple and non-obtrusive. It comes with a fully-functioning demo that expires after 30 days. You will need to purchase a USD99 activation key for a domain. This will allow you to rebrand the upload button.


Cost-wise, I prefer to use In-A-Flash upload. It does what I want it to do which is allow multiple uploads. The "downside" is that In-A-Flash has "heavy-on-the-eye" upload link which takes up a lot of vertical real-estate on the website. After all, it is free. If the user wanted to reward the programmer of In-A-Flash, they could always donate to his PayPal account here.

You can try out one of the upload methods on my MP3 Quickie at scm.MoodleAce.com. At the moment, phpFileUploader is activated, while In-A-Flash uploader has been commented out inside the file record_app_mp3_JS.php. Look around line 386 of the file.

To demo the system, go here:
http://scm.moodleace.com/course/view.php?id=44
Username: student
Password: moodle

If you are interested in MP3 Quickie, please do leave a voice message on the system. I would love to hear from you and what you think about MP3 Quickie.

Below is the download link to the full zipped code for Version 1.7. Click on the blue blob icon.

Having trouble downloading from minus.com? Click on the Dropbox link to download the same file!

For more instuctions on installing MP3 Quickie, refer to my earlier post here. If you have any problems installing the MP3 Quicker or any of the uploaders, please email me at boonsengkam@gmail.com.

So in CONCLUSION, you NOW have an MP3 recorder in the form of a Moodle block that can:
  • RECORD a 20-second MP3 audio - just nice to practice for Pecha Kucha presentations!
  • SAVE the recorded MP3 audio to the server
  • PLAYBACK the recorded MP3. Same for all MP3 files stored in the server. The interesting thing is that the playback of any MP3 audio is NOT limited to 20-seconds. Only the recording is limited to 20 seconds. So, this means that you can upload a 4-minute MP3 audio and vimas.com's applet will play it happily.
  • DOWNLOAD any and all recorded MP3 files (but only one download at a time)
  • Do a SINGLE UPLOAD or MULTIPLE UPLOADS of MP3 files (or selective file types, e.g., PNG, GIF, JPG, no PHP - everything is customisable) direct into the server voicefiles/miha subfolder (you can even cancel an upload in progress and the half-uploaded MP3 file will be deleted from the server!).
  • See below two ways for doing file uploads:

    Using PhpFileUploader:

Figure 7: Uploading an MP3 file with phpFileUploader upload utility.
Notice the cleaner design, except that I'm not sure how to limit the
length of the upload progress bar that extends to the right of the block,
and causing the scroll bars to appear temporarily.


           Using In-A-Flash uploader:

Figure 8: Uploading an MP3 file with In-A-Flash upload utility.Again, a more cluttered-but-functional GUI design.


So which design do you prefer? I believe that the final choice will be decided on whether you have cash to pay for a license key of phpFileUploader or not. Otherwise, if you can live with In-A-Flash's upload logo and vertical real-estate, then go with In-A-Flash.

If you want MP3 Quickie to record more than 20 seconds of the MP3 audio, you can surf  to this webpage to purchase the activation key of full version (USD399) from Vimas Technologies.

OH, by the way, Vimas.com has an updated version of their MP3 recorder, which is the Audio Recording Applet SDK. From the same webpage:

"The Audio Recording Applet SDK is designed to use audio recorder on a web site. It allows you to record the audio from the web site and upload it to the web server via HTTP. Also, it is possible to save a recorded audio file on the client computer and open it from there.


Audio Recording Applet records audio in the following audio formats:
- Mp3,
- WAV PCM / ALaw / MuLaw,
- Speex,
- Ogg Vorbis"


Whoa Nelly! Now hold there just a sec' partner!

Figure 9: Let's slow things down a wee bit



Did the webpage text say "Speex"? Well, If I am not mistaken, Nanogong's file format is in Speex (.spx) format. Aha! Do any of you use Nanogong 4.2 or earlier?  I love Nanogong and I use it on my production site.


Figure 10: The Nanogong GUI for Moodle 1.9x.

This gives me an idea. Lightbulb! My next work on Moodurian is to check out Vimas.com's Audio Recording applet. There is a strong possibility of redesigning the GUI for that applet so that existing users of the popular Nanogong for Moodle 1.9 can use the MP3 Qui... I mean, the future Audio Quickie, to upload their .spx files to the server and play them from the Audio Quickie. Recording an audio using Vimas Technology's demo audio recorder applet is limited to 20 seconds, but you should be able to replay a full length Nanogng audio with the demo applet.

In closing, let's return to MP3 Quickie. As we wait, with bated breath, the development on the coming descendent of MP3 Quickie which will be christen Audio Quickie, I would like to pose two questions to you:
  1. what more would you want from the current MP3 Quickie Version 1.7? 
  2. how do you think you can use MP3 Quickie on your Moodle site to help your students to learn?

Please share your ideas and thoughts with me on this blog post's comments section.
For more on the development of MP3 Quickie, click on this Moodle.org thread.
In the meantime, Happy Moodling!
Frankie Kam
Melaka, Malaysia
P.S., For installation instructions, refer to my original post on MP3 Quickie here.

P.S.#2, and now introducing a new skinnable MP3 Quickie - Version 1.8!




Click on the image above to be transported to a new-look M3 Quickie.
Hot off the press as of 17/9/2011.
Frankie Kam

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!

Ratings and Recommendations by outbrain