Web Audio API Recorder Front-end + Simple PHP Backend

This task involves developing a recorder web application, mostly front end. It records microphone input, and sends it to the server. Related knowledges are: Web Audio API, getUserMedia(), WebRTC, which are all part of HTML5 specification. Please pay attention to the description because the requirements are very specific.

=== [ Web Audio API Recorder ] ===

This will be a recorder written in Javascript, utilizing the Web Audio API ([url removed, login to view]), and/or part of WebRTC ([url removed, login to view]). The deliverable should contain an HTML webpage, a Javascript file containing the front end, and a PHP file that handles uploading to the server, and writing the WAV format.

Basic operations are as follows. The user clicks a button in the HTML page to start recording, and he clicks another button to stop recording. During recording, the client (Javascript) must send recorded sound to the server via HTTP FORM POST in 1 second interval. That is, the client sends HTTP FORM POST once per second to send the a 1 second recording. The PHP script at the server accepts this POST and write down a full file eventually.


All core functions required by this task are actually already covered by open source projects, see below:

[[url removed, login to view]] [url removed, login to view]

[[url removed, login to view]] [url removed, login to view]

[XAudioJS] [url removed, login to view]


1. The client must send WAVE in 16bit mono 16khz format. [[url removed, login to view]] can only send in output format, which is usually 16bit stereo 44khz, due to reasons discussed in [url removed, login to view] . Therefore, one must utilize the resample function in [XAudioJS].

2. Before sending the WAVE to the server, the client must compress it using zlib. To do this, you'll need [[url removed, login to view]]. Decompressing at server using PHP is easier.


The client should send sound data only, and not the WAVE header. The PHP script should be responsible for constructing the wave header file, and because the format is fixed, it's easy. A reference of such function can be found at [url removed, login to view] .

Because the client sends 1 second data in 1 second interval, the client will make 1 HTTP POST request per second. Therefore it sends in segments. This task does not require a fully fledged PHP upload script. For handling multiple segment, synchronizing, and reconstructing WAVE from segments, just find the easiest way you can handle. The output file name can be fixed. As long as a single run goes well, you are done.

The target platform of this application is the current stable version of Chrome. You'll need to visit chrome://flags and enable 'Web Audio Input' in order for any of these to work.

Thank you for reading the descriptions. And remember once you bid, I'll run a small interview with you to determine whether this can be done and your confidence and capabilities.

It's important that you review the 3 open source projects I provided. Because the task really involves using them together.

Taidot: HTML5, Javascript, PHP

Näytä lisää: javascript sending audio php backend, end web audio, github recorderjs, webrtc php backend, writing thank you notes, web server in javascript, web developing projects, the second interview, thank you notes interview, thank you notes for interview, thank you for the interview, thank you for interview, second interview, post interview thank you, php is, interview thank you notes, https code org, html5 reference, google web developing, google web chrome, find web projects, find google chrome version, developing web application, description of web developing, data front

Tietoa työnantajasta:
( 10 arvostelua ) Shanghai, China

Projektin tunnus: #4276135