javascript - Audio recording implementation in web2py using recorder.js -
i developing web app in want utilize recorder.js file implement sound recording. have code unable utilize in web2py framework. can give me detail info how utilize it? there .bower.json file getting hidden on uploading in web2py. how can utilize , link files recording can done?
this .bower.json script:
{ "name": "recorderjs", "homepage": "https://github.com/mattdiamond/recorderjs", "_release": "f814ac7b3f", "_resolution": { "type": "branch", "branch": "master", "commit": "f814ac7b3f4ed4f62729860d5a02720f167480b3" }, "_source": "git://github.com/mattdiamond/recorderjs.git", "_target": "*", "_originalsource": "recorderjs", "_direct": true } this html code:
<body> <script src="bower_components/recorderjs/recorder.js"> </script> <script src="app.js"></script> <button onclick="record()">record</button> <button onclick="stop()">stop</button> these javascripts: /app.js
var navigator = window.navigator; var context = window.audiocontext || window.webkitaudiocontext; var context = new context(); // sound var mediastream; var rec; navigator.getusermedia = ( navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia ); function record() { navigator.getusermedia({audio: true}, function(localmediastream){ mediastream = localmediastream; var mediastreamsource = context.createmediastreamsource(localmediastream); rec = new recorder(mediastreamsource, { workerpath: '/bower_components/recorderjs/recorderworker.js' }); rec.record(); }, function(err){ console.log('not supported'); }); } function stop() { mediastream.stop(); rec.stop(); rec.exportwav(function(e){ rec.clear(); recorder.forcedownload(e, "test.wav"); }); } /recorder.js
(function(window){ var worker_path = 'recorderworker.js'; var recorder = function(source, cfg){ var config = cfg || {}; var bufferlen = config.bufferlen || 4096; this.context = source.context; this.node = (this.context.createscriptprocessor || this.context.createjavascriptnode).call(this.context, bufferlen, 2, 2); var worker = new worker(config.workerpath || worker_path); worker.postmessage({ command: 'init', config: { samplerate: this.context.samplerate } }); var recording = false, currcallback; this.node.onaudioprocess = function(e){ if (!recording) return; worker.postmessage({ command: 'record', buffer: [ e.inputbuffer.getchanneldata(0), e.inputbuffer.getchanneldata(1) ] }); } this.configure = function(cfg){ (var prop in cfg){ if (cfg.hasownproperty(prop)){ config[prop] = cfg[prop]; } } } this.record = function(){ recording = true; } this.stop = function(){ recording = false; } this.clear = function(){ worker.postmessage({ command: 'clear' }); } this.getbuffer = function(cb) { currcallback = cb || config.callback; worker.postmessage({ command: 'getbuffer' }) } recorderworker.js:
var reclength = 0, recbuffersl = [], recbuffersr = [], samplerate; this.onmessage = function(e){ switch(e.data.command){ case 'init': init(e.data.config); break; case 'record': record(e.data.buffer); break; case 'exportwav': exportwav(e.data.type); break; case 'getbuffer': getbuffer(); break; case 'clear': clear(); break; } }; function init(config){ samplerate = config.samplerate; } function record(inputbuffer){ recbuffersl.push(inputbuffer[0]); recbuffersr.push(inputbuffer[1]); reclength += inputbuffer[0].length; } function exportwav(type){ var bufferl = mergebuffers(recbuffersl, reclength); var bufferr = mergebuffers(recbuffersr, reclength); var interleaved = interleave(bufferl, bufferr); var dataview = encodewav(interleaved); var audioblob = new blob([dataview], { type: type }); this.postmessage(audioblob); } function getbuffer() { var buffers = []; buffers.push( mergebuffers(recbuffersl, reclength) ); buffers.push( mergebuffers(recbuffersr, reclength) ); this.postmessage(buffers); } function clear(){ reclength = 0; recbuffersl = []; recbuffersr = []; } function mergebuffers(recbuffers, reclength){ var result = new float32array(reclength); var offset = 0; (var = 0; < recbuffers.length; i++){ result.set(recbuffers[i], offset); offset += recbuffers[i].length; } homecoming result; } function interleave(inputl, inputr){ var length = inputl.length + inputr.length; var result = new float32array(length); var index = 0, inputindex = 0; while (index < length){ result[index++] = inputl[inputindex]; result[index++] = inputr[inputindex]; inputindex++; } homecoming result; } function floatto16bitpcm(output, offset, input){ (var = 0; < 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){ (var = 0; < string.length; i++){ view.setuint8(offset + i, string.charcodeat(i)); } } 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); /* sample rate */ view.setuint32(24, samplerate, true); /* byte rate (sample rate * block align) */ view.setuint32(28, samplerate * 4, true); /* block align (channel count * bytes per sample) */ view.setuint16(32, 4, true); /* bits per sample */ view.setuint16(34, 16, true); /* info chunk identifier */ writestring(view, 36, 'data'); /* info chunk length */ view.setuint32(40, samples.length * 2, true); floatto16bitpcm(view, 44, samples); homecoming view; }
i don't know if problem, next script source references relative urls:
<script src="bower_components/recorderjs/recorder.js"></script> <script src="app.js"></script> because urls not preceded /, appended url of current page. so, if @ /myapp/default/index, first url reference /myapp/default/index/bower_components/recorderjs/recorder.js, not correct.
you should maintain javascript files in /web2py/applications/myapp/static folder. in case, best utilize web2py url() function generate proper urls:
<script src="{{=url('static', 'js/bower_components/recorderjs/recorder.js')}}"></script> <script src="{{=url('static', 'js/app.js')}}"></script> regarding internal urls, assuming move /myapp/static/js folder, url like:
/bower_components/recorderjs/recorderworker.js would alter to:
/myapp/static/js/bower_components/recorderjs/recorderworker.js relative internal urls should go on work without alteration.
javascript html json web2py bower
No comments:
Post a Comment