Challenge Overview
Welcome, we are searching for HTML5 media experts! We need your help to develop an HTML5 based audio recorder for use as an alternative to an existing Flash based recorder.
Overview
Faith Comes By Hearing is an international audio Bible recording company. It is run by a not-for-profit organization and has audio Bibles available in over 800 languages.
One of their services provides the ability for community participation in generating audio recordings in multiple languages. Voice talents login to a website and record their assigned lines one line at a time. The user records a single line, then saves it to the web server and continues to the next assigned line.
Many users in China are not able to use Flash, so they are not able to record their lines. The goal of this challenge is to produce an HTML5 based audio recorder which will be embedded in the existing website. The user will be given an option to use this new recorder or the existing Flash based recorder.
Detailed Requirements
-
The page needs to use HTML, CSS, and jquery only
Please ask in the forums about any other libraries
-
The recorder should match the look and feel of the existing Flash recorder as closely as possible (screenshots and button images provided)
-
The recorder needs to function on as many browsers as possible, the latest desktop versions of Chrome and Firefox are specifically required as well as the mobile versions of Chrome and Firefox on Android
-
The recorder needs to save the recording in MP3 format (a library is allowed here as long as it is free for enterprise use)
-
Once embedded in the live website, the recorder will need to upload the recorded audio to the server, however for this challenge, allow the user to save the recording locally
Required Recorder Features
-
���� Single-button functionality (one main button controls ‘start recording’, ‘stop recording’, ‘playback’)
-
���� Ability to change input microphone
-
���� Ability to change record volume
-
���� The waveform should be dynamically displayed during recording
-
���� The color of the waveform changes during playback
-
���� Button to ‘Record Again’ (clears the current recording)
Recorder "Stretch Goals"
An additional bonus of $100 (per feature) will be paid to the challenge winner for successfully implementing the following features:
-
����Automatically determine if record volume is too low/high Prompt user with text box to adjust recording volume
-
����Be able to determine if noise floor is too high
Prompt user with text box requesting to check microphone settings
Deliverables
-
Fully functional HTML / JS code demonstrating the functionality above
-
Front-end code only, but should be easily served by expressjs, IIS, Apache, ...etc
-
Include the entire directory structure in your submission, containing all resources
-
Node back-end can be included for easy demonstration, but is not required
-
-
A video, demonstrating all features of your solution is required
Resources Provided
-
Screenshots of the existing Flash based recorder (to be used as the look and feel of the new HTML5 recorder)
-
Source images for the player buttons
Final Submission Guidelines
Deliverables
-
Fully functional HTML / JS code demonstrating the functionality above
-
Front-end code only, but should be easily served by expressjs, IIS, Apache, ...etc
-
Include the entire directory structure in your submission, containing all resources
-
Node back-end can be included for easy demonstration, but is not required
-
-
A video, demonstrating all features of your solution is required