Реализация аудиозаписей в web2py с использованием recorder.js

Я разрабатываю веб-приложение, в котором я хочу использовать файл recorder.js для реализации аудиозаписи. У меня есть этот код, но я не могу использовать его в web2py framework. Можете ли вы дать мне подробную информацию о том, как его использовать? Существует файл .bower.json, который скрывается при загрузке в web2py. как мы можем использовать это и связать все файлы, чтобы запись могла быть выполнена?Реализация аудиозаписей в web2py с использованием recorder.js

Это мой .bower.json сценарий:

{ 
    "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 
}

Это мой HTML-код:

<body> 
<script src="bower_components/Recorderjs/recorder.js"> 
</script> 
<script src="app.js"></script> 

<button onclick="record()">Record</button> 
<button onclick="stop()">Stop</button>

Это мои JavaScripts: /app.js

var navigator = window.navigator; 
var Context = window.AudioContext || window.webkitAudioContext; 
var context = new Context(); 

// audio 
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){ 
    for (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; 
for (var i = 0; i < recBuffers.length; i++){ 
result.set(recBuffers[i], offset); 
offset += recBuffers[i].length; 
} 
return 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++; 
    } 
    return result; 
    } 

     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)); 
     } 
     } 

     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); 
     /* data chunk identifier */ 
     writeString(view, 36, 'data'); 
     /* data chunk length */ 
     view.setUint32(40, samples.length * 2, true); 

      floatTo16BitPCM(view, 44, samples); 

      return view; 
      }

источник

2014-11-09 Akriti

Я не знаю, если это единственная проблема, но следующие ссылки на источники сценария относительные URL-адрес:

<script src="bower_components/Recorderjs/recorder.js"></script> 
<script src="app.js"></script>

Поскольку URL-адрес не предшествуют a /, они будут добавлены к URL-адресу текущей страницы. Итак, если вы находитесь в /myapp/default/index, первый URL-адрес будет ссылаться на /myapp/default/index/bower_components/Recorderjs/recorder.js, что будет неверно.

Вы должны хранить файлы Javascript в папке /web2py/applications/myapp/static. В этом случае лучше всего использовать функцию web2py URL() генерировать правильные URL-адреса:

<script src="{{=URL('static', 'js/bower_components/Recorderjs/recorder.js')}}"></script> 
<script src="{{=URL('static', 'js/app.js')}}"></script>

Что касается внутренних URL-адресов, если вы переместить все в/MYAPP/статический/JS папки, URL-адрес, как:

/bower_components/Recorderjs/recorderWorker.js

сменится на:

/myapp/static/js/bower_components/Recorderjs/recorderWorker.js

Относительные внутренние URL-адреса должны продолжать работать без изменений.

источник

2014-11-09 15:54:21 Anthony

Нужно ли мне что-то менять для загрузки в web2py? { "имя": "Recorderjs", "домашнюю страницу": "https://github.com/web2py/Recorderjs", "_Release": "f814ac7b3f", "_resolution": { "тип" : "ветвь", "ветви": "мастер", "совершить": "f814ac7b3f4ed4f62729860d5a02720f167480b3" }, "_source": "мерзавец: //github.com/mattdiamond/Recorderjs.git", "_target" : «*», «_originalSource»: «Recorderjs», «_direct»: true } – Akriti

Я не уверен. Попробуйте и посмотрите, что произойдет. В общем, любая библиотека JS должна работать с web2py - вам просто нужно убедиться, что ваш скрипт 'src' ссылается на правильный URL-адрес и любые другие внутренние URL-адреса. – Anthony

мы не можем понять, какой правильный внутренний URL-адрес в сценариях (рабочие пути в файлах app.js, recorder.js) и .bower.json – Akriti

Реализация аудиозаписей в web2py с использованием recorder.js

ответ

Смежные вопросы