added recorder script tha also uploads the audio files
parent
103945c341
commit
031e5a23bf
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 icatcher.at
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -0,0 +1,102 @@
|
||||
# MP3RecorderJS #
|
||||
|
||||
Record MP3 (and WAV) files in the browser using JavaScript and HTML.
|
||||
|
||||
## General ##
|
||||
|
||||
### Why? ###
|
||||
|
||||
The whole project got kicked off by using [Recordmp3js](https://github.com/nusofthq/Recordmp3js) - discovered in [this wonderful article by Remus](http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/) -
|
||||
and discovering that my needs were not entirely met. I needed the possibility to have multiple recorders on one site. Also, since the original code was being altered to only reflect the MP3 changes and changing
|
||||
it from stereo to mono, I had the feeling that a lot of unused code has been left in there and I found it difficult to actually see what's going on.
|
||||
|
||||
### Fork? ###
|
||||
|
||||
My first idea was to fork the original project, but I soon discovered that I'm going more for a rewrite than a fork. Hence I ended up writing it anew in a different style.
|
||||
|
||||
## Requirements ##
|
||||
|
||||
* [jQuery (>= v1.11.1)](http://jquery.com/)
|
||||
* [libmp3lame.js](https://github.com/akrennmair/libmp3lame-js)
|
||||
* A browser that supports `navigator.getUserMedia`
|
||||
* [WC3 specification](http://dev.w3.org/2011/webrtc/editor/getusermedia.html)
|
||||
* [Supported Browsers](http://caniuse.com/#search=getUserMedia)
|
||||
|
||||
For easy use `jQuery` and `libmp3lame.js` are included in this project.
|
||||
|
||||
## Usage ##
|
||||
|
||||
### Creation ###
|
||||
|
||||
// create an audio context
|
||||
var audio_context = new AudioContext;
|
||||
|
||||
// tell the browser you want to get some audio user media
|
||||
navigator.getUserMedia({audio: true}, function(stream) {
|
||||
// create an MP3Recorder object supplying the audio context and the stream
|
||||
var recorderObject = new MP3Recorder(audio_context, stream);
|
||||
}, function(e) {
|
||||
// some error occured
|
||||
});
|
||||
|
||||
### Start recording ###
|
||||
|
||||
On a given `MP3Recorder` object you can simply call `start()` to start recording.
|
||||
|
||||
recorderObject.start();
|
||||
|
||||
### Stop recording ###
|
||||
|
||||
On a given `MP3Recorder` object you can simply call `stop()` to stop recording.
|
||||
|
||||
recorderObject.stop();
|
||||
|
||||
### Retrieving recorded data ###
|
||||
|
||||
On a given `MP3Recorder` object you can call 3 methods to get the recorded data, depending on which type you need.
|
||||
|
||||
#### As Blob data ####
|
||||
|
||||
recorderObject.exportBlob(function(blobData) {
|
||||
// blobData is a Blob object
|
||||
});
|
||||
|
||||
#### As WAV data ####
|
||||
|
||||
recorderObject.exportWAV(function(wavData) {
|
||||
// wavData is a base64 encoded Uint8Array
|
||||
});
|
||||
|
||||
#### As MP3 data ####
|
||||
|
||||
recorderObject.exportMP3(function(mp3Data) {
|
||||
// mp3Data is a base64 encoded Uint8Array
|
||||
});
|
||||
|
||||
### Logging ###
|
||||
|
||||
If you create the `MP3Recorder` object with a third parameter you can specify a container and a method to log to.
|
||||
|
||||
var recorderObject = new MP3Recorder(audio_context, stream,
|
||||
{ statusContainer: $('#status'), statusMethod: 'replace' }
|
||||
);
|
||||
|
||||
* `statusContainer` must be a jQuery object that responds to the [`text()`](http://api.jquery.com/text/) function.
|
||||
* `statusMethod` can be `'append'` to append the status text or anything else to replace it.
|
||||
|
||||
## Example ##
|
||||
|
||||
For a complete example, using multiple recorders on a page, see the `index.html` file.
|
||||
|
||||
## Known issues ##
|
||||
|
||||
As mentioned in [the article by Remus](http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/) the resulting mp3 recording will be longer by approximately 50%,
|
||||
which is an issue of the lame library that's being used.
|
||||
|
||||
A possible fix for this is mentioned [by Nicholas in the comment section](https://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/#comment-674).
|
||||
|
||||
|
||||
## Disclaimer ##
|
||||
|
||||
For the purpose of this project, [libmp3lame.js](https://github.com/akrennmair/libmp3lame-js) was used which was not developed by me.
|
||||
Using LAME in your project may result in requiring a special patent license for your country. For more information see the [LAME project site](http://lame.sourceforge.net/links.php#Patents).
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@
|
||||
importScripts('libmp3lame.min.js');
|
||||
|
||||
var mp3codec;
|
||||
|
||||
this.addEventListener('message', function(e) {
|
||||
switch (e.data.cmd) {
|
||||
case 'init':
|
||||
if (!e.data.config) {
|
||||
e.data.config = { };
|
||||
}
|
||||
mp3codec = Lame.init();
|
||||
|
||||
Lame.set_mode(mp3codec, e.data.config.mode || Lame.JOINT_STEREO);
|
||||
Lame.set_num_channels(mp3codec, e.data.config.channels || 2);
|
||||
Lame.set_num_samples(mp3codec, e.data.config.samples || -1);
|
||||
Lame.set_in_samplerate(mp3codec, e.data.config.samplerate || 44100);
|
||||
Lame.set_out_samplerate(mp3codec, e.data.config.samplerate || 44100);
|
||||
Lame.set_bitrate(mp3codec, e.data.config.bitrate || 128);
|
||||
|
||||
Lame.init_params(mp3codec);
|
||||
// console.log('Version :', Lame.get_version() + ' / ',
|
||||
// 'Mode: '+Lame.get_mode(mp3codec) + ' / ',
|
||||
// 'Samples: '+Lame.get_num_samples(mp3codec) + ' / ',
|
||||
// 'Channels: '+Lame.get_num_channels(mp3codec) + ' / ',
|
||||
// 'Input Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ',
|
||||
// 'Output Samplate: '+ Lame.get_in_samplerate(mp3codec) + ' / ',
|
||||
// 'Bitlate :' +Lame.get_bitrate(mp3codec) + ' / ');
|
||||
// 'VBR :' + Lame.get_VBR(mp3codec));
|
||||
break;
|
||||
case 'encode':
|
||||
var mp3data = Lame.encode_buffer_ieee_float(mp3codec, e.data.buf, e.data.buf);
|
||||
self.postMessage({cmd: 'data', buffer: mp3data.data});
|
||||
break;
|
||||
case 'finish':
|
||||
var mp3data = Lame.encode_flush(mp3codec);
|
||||
self.postMessage({cmd: 'end', buffer: mp3data.data});
|
||||
Lame.close(mp3codec);
|
||||
mp3codec = null;
|
||||
break;
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,157 @@
|
||||
(function(window){
|
||||
|
||||
var RECORDER_WORKER_PATH = 'js/recorderWorker.js';
|
||||
var ENCODER_WORKER_PATH = 'js/mp3Worker.js';
|
||||
|
||||
|
||||
var MP3Recorder = function(context, stream, cfg) {
|
||||
var config = cfg || { statusContainer: null, statusMethod: 'append' }
|
||||
|
||||
var bufferLen = 4096;
|
||||
var recording = false;
|
||||
|
||||
this.source = context.createMediaStreamSource(stream);
|
||||
this.node = (context.createScriptProcessor || context.createJavaScriptNode).call(context, bufferLen, 1, 1);
|
||||
|
||||
var recorderWorker = new Worker(RECORDER_WORKER_PATH);
|
||||
var encoderWorker = new Worker(ENCODER_WORKER_PATH);
|
||||
var exportCallback;
|
||||
|
||||
|
||||
// initialize the Recorder Worker
|
||||
recorderWorker.postMessage({ cmd: 'init', sampleRate: context.sampleRate });
|
||||
|
||||
// the recording loop
|
||||
this.node.onaudioprocess = function(e) {
|
||||
if(!recording) return;
|
||||
recorderWorker.postMessage({ cmd: 'record', buffer: e.inputBuffer.getChannelData(0) });
|
||||
}
|
||||
|
||||
|
||||
this.start = function() {
|
||||
recording = true;
|
||||
this.logStatus('recording...');
|
||||
}
|
||||
this.stop = function() {
|
||||
recording = false;
|
||||
this.logStatus('stopping...');
|
||||
}
|
||||
this.destroy = function() { recorderWorker.postMessage({ cmd: 'destroy' }); }
|
||||
|
||||
this.logStatus = function(status) {
|
||||
if(config.statusContainer) {
|
||||
if(config.statusMethod == 'append') {
|
||||
config.statusContainer.text(config.statusContainer.text + "\n" + status);
|
||||
} else {
|
||||
config.statusContainer.text(status);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.exportBlob = function(cb) {
|
||||
exportCallback = cb;
|
||||
if (!exportCallback) throw new Error('Callback not set');
|
||||
recorderWorker.postMessage({ cmd: 'exportBlob' });
|
||||
}
|
||||
|
||||
this.exportWAV = function(cb) {
|
||||
// export the blob from the worker
|
||||
this.exportBlob(function(blob) {
|
||||
var fileReader = new FileReader();
|
||||
|
||||
// read the blob as array buffer and convert it
|
||||
// to a base64 encoded WAV buffer
|
||||
fileReader.addEventListener("loadend", function() {
|
||||
var resultBuffer = new Uint8Array(this.result);
|
||||
cb(encode64(resultBuffer));
|
||||
});
|
||||
fileReader.readAsArrayBuffer(blob);
|
||||
});
|
||||
}
|
||||
|
||||
this.exportMP3 = function(cb) {
|
||||
this.logStatus('converting...');
|
||||
|
||||
// export the blob from the worker
|
||||
this.exportBlob(function(blob) {
|
||||
var fileReader = new FileReader();
|
||||
|
||||
fileReader.addEventListener("loadend", function() {
|
||||
var wavBuffer = new Uint8Array(this.result);
|
||||
var wavData = parseWav(wavBuffer);
|
||||
|
||||
encoderWorker.addEventListener('message', function(e) {
|
||||
if (e.data.cmd == 'data') {
|
||||
cb(encode64(e.data.buffer));
|
||||
}
|
||||
});
|
||||
|
||||
encoderWorker.postMessage({ cmd: 'init', config: { mode: 3, channels: 1, samplerate: wavData.sampleRate, bitrate: wavData.bitsPerSample } });
|
||||
encoderWorker.postMessage({ cmd: 'encode', buf: Uint8ArrayToFloat32Array(wavData.samples) });
|
||||
encoderWorker.postMessage({ cmd: 'finish' });
|
||||
});
|
||||
|
||||
fileReader.readAsArrayBuffer(blob);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// event listener for return values of the recorderWorker
|
||||
recorderWorker.addEventListener('message', function(e) {
|
||||
switch(e.data.from) {
|
||||
case 'exportBlob':
|
||||
exportCallback(e.data.blob);
|
||||
break;
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
// HELPER FUNCTIONS
|
||||
|
||||
function encode64(buffer) {
|
||||
var binary = '';
|
||||
var bytes = new Uint8Array(buffer);
|
||||
var len = bytes.byteLength;
|
||||
|
||||
for(var i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return window.btoa(binary);
|
||||
}
|
||||
|
||||
function parseWav(wav) {
|
||||
function readInt(i, bytes) {
|
||||
var ret = 0, shft = 0;
|
||||
|
||||
while(bytes) {
|
||||
ret += wav[i] << shft; shft += 8;
|
||||
i++; bytes--;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
if(readInt(20, 2) != 1) throw 'Invalid compression code, not PCM';
|
||||
if(readInt(22, 2) != 1) throw 'Invalid number of channels, not 1';
|
||||
|
||||
return { sampleRate: readInt(24, 4), bitsPerSample: readInt(34, 2), samples: wav.subarray(44) };
|
||||
}
|
||||
|
||||
function Uint8ArrayToFloat32Array(u8a){
|
||||
var f32Buffer = new Float32Array(u8a.length);
|
||||
for (var i = 0; i < u8a.length; i++) {
|
||||
var value = u8a[i<<1] + (u8a[(i<<1)+1]<<8);
|
||||
if (value >= 0x8000) value |= ~0x7FFF;
|
||||
f32Buffer[i] = value / 0x8000;
|
||||
}
|
||||
return f32Buffer;
|
||||
}
|
||||
|
||||
|
||||
this.source.connect(this.node);
|
||||
this.node.connect(context.destination); // this should not be necessary
|
||||
}
|
||||
|
||||
window.MP3Recorder = MP3Recorder;
|
||||
|
||||
})(window);
|
||||
@ -0,0 +1,130 @@
|
||||
var recordingLength = 0,
|
||||
recordingBuffer = [],
|
||||
bits = 16,
|
||||
sampleRate = 0;
|
||||
|
||||
|
||||
this.addEventListener('message', function(e) {
|
||||
switch (e.data.cmd) {
|
||||
case 'init':
|
||||
init(e.data.sampleRate);
|
||||
break;
|
||||
case 'start':
|
||||
start();
|
||||
break;
|
||||
case 'stop':
|
||||
stop();
|
||||
break;
|
||||
case 'destroy':
|
||||
destroy();
|
||||
break;
|
||||
|
||||
case 'record':
|
||||
record(e.data.buffer);
|
||||
break;
|
||||
|
||||
case 'exportBlob':
|
||||
exportBlob();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function init(sr) {
|
||||
sampleRate = sr;
|
||||
}
|
||||
|
||||
function start() {
|
||||
|
||||
}
|
||||
|
||||
function stop() {
|
||||
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
recordingLength = 0;
|
||||
recordingBuffer = [];
|
||||
sampleRate = 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function record(buffer) {
|
||||
recordingBuffer.push(buffer);
|
||||
recordingLength += buffer.length;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function exportBlob() {
|
||||
var audioBlob = new Blob([encodeWAV(mergeBuffer(recordingBuffer, recordingLength))]);
|
||||
this.postMessage({ from: 'exportBlob', blob: audioBlob });
|
||||
}
|
||||
|
||||
|
||||
|
||||
// HELPER FUNCTIONS
|
||||
|
||||
function mergeBuffer(buf, len){
|
||||
var result = new Float32Array(len);
|
||||
var offset = 0;
|
||||
for (var i = 0; i < buf.length; i++){
|
||||
result.set(buf[i], offset);
|
||||
offset += buf[i].length;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function encodeWAV(samples){
|
||||
var buffer = new ArrayBuffer(44 + samples.length * 2);
|
||||
var view = new DataView(buffer);
|
||||
|
||||
/* RIFF identifier */
|
||||
writeString(view, 0, 'RIFF');
|
||||
/* file length */
|
||||
view.setUint32(4, 32 + samples.length * 2, true);
|
||||
/* RIFF type */
|
||||
writeString(view, 8, 'WAVE');
|
||||
/* format chunk identifier */
|
||||
writeString(view, 12, 'fmt ');
|
||||
/* format chunk length */
|
||||
view.setUint32(16, 16, true);
|
||||
/* sample format (raw) */
|
||||
view.setUint16(20, 1, true);
|
||||
/* channel count */
|
||||
//view.setUint16(22, 2, true); /*STEREO*/
|
||||
view.setUint16(22, 1, true); /*MONO*/
|
||||
/* sample rate */
|
||||
view.setUint32(24, sampleRate, true);
|
||||
/* byte rate (sample rate * block align) */
|
||||
//view.setUint32(28, sampleRate * 4, true); /*STEREO*/
|
||||
view.setUint32(28, sampleRate * 2, true); /*MONO*/
|
||||
/* block align (channel count * bytes per sample) */
|
||||
//view.setUint16(32, 4, true); /*STEREO*/
|
||||
view.setUint16(32, 2, true); /*MONO*/
|
||||
/* bits per sample */
|
||||
view.setUint16(34, 16, true);
|
||||
/* data chunk identifier */
|
||||
writeString(view, 36, 'data');
|
||||
/* data chunk length */
|
||||
view.setUint32(40, samples.length * 2, true);
|
||||
|
||||
floatTo16BitPCM(view, 44, samples);
|
||||
|
||||
return view;
|
||||
}
|
||||
|
||||
function floatTo16BitPCM(output, offset, input){
|
||||
for (var i = 0; i < input.length; i++, offset+=2){
|
||||
var s = Math.max(-1, Math.min(1, input[i]));
|
||||
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
|
||||
}
|
||||
}
|
||||
|
||||
function writeString(view, offset, string){
|
||||
for (var i = 0; i < string.length; i++){
|
||||
view.setUint8(offset + i, string.charCodeAt(i));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<?php
|
||||
// requires php5
|
||||
define('UPLOAD_DIR', '../uploads/');
|
||||
$img = $_POST['wavBase64'];
|
||||
$img = str_replace('data:audio/wav;base64,', '', $img);
|
||||
$img = str_replace(' ', '+', $img);
|
||||
$data = base64_decode($img);
|
||||
$file = UPLOAD_DIR . uniqid() . '.wav';
|
||||
$success = file_put_contents($file, $data);
|
||||
print $success ? $file : 'Unable to save the file.';
|
||||
|
||||
?>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<style type="text/css">
|
||||
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
|
||||
h2 {
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
font-size: 28px;}
|
||||
section {margin-bottom: 100px; margin-top: 50px;}
|
||||
table, th, td {vertical-align: top; border-collapse: separate; padding: 6px;}
|
||||
button {width: 100px;}
|
||||
.short-description{
|
||||
margin-left: 40%;
|
||||
margin-right: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
a {
|
||||
text-decoration:none;
|
||||
}
|
||||
</style>
|
||||
<html>
|
||||
<head>
|
||||
<section>
|
||||
<h2 >Extracts</h2>
|
||||
<div class="short-description">
|
||||
<p>"Nusra considered their voices shameful, a form of nakedness" </p>
|
||||
<p>
|
||||
<a href="../index.html">Utterance</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<img src="texts/fresh1.jpg" width="35%"></img>
|
||||
<img src="texts/fresh2.jpg" width="35%"></img>
|
||||
<img src="texts/carson-extract.jpg" width="28%"></img>
|
||||
<img src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/13/Extracts-reading.jpg" width="100%" style="margin-top: 150px;"></img>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Loading…
Reference in New Issue