Я пытаюсь записать аудио с пользователя веб-сайта и сохранить аудио на моем сервере. Многие из сообщений, которые я изучил до сих пор, ссылались на рекордеры Matt Diamond. Я попытался воссоздать демо на http://webaudiodemos.appspot.com/AudioRecorder/index.html , открыв исходный код через мой браузер. Я скопировал html, «audiodisplay.js», «recorder.js» и «main.js» и поместил их на свой сервер. Я также добавил файл «recorderWorker.js» с сайта GitHub. В файле recorder.js я изменил var WORKER_PATH = 'js / recorderjs / recorderWorker.js' на var WORKER_PATH = 'recorderWorker.js';
Когда я запускаю демонстрационную версию, которую я создал, я получаю предупреждение «вы хотите поделиться своим микрофоном ..», и я могу начать запись, нажав значок микрофона на правой стороне. Однако, когда я прекращаю запись, звуковая форма не появляется внизу, как в демонстрации Мэтта, и значок сохранения не активируется.
Если я смогу запустить демонстрацию и запустить ее, следующая проблема заключается в сохранении wav-файла на сервере вместо локального, как в демо. Я нашел несколько сообщений, говорящих, чтобы использовать XMLHttpRequest (), однако я не могу понять, как подключить эти примеры к recorderjs. Сохранение файла WAV, записанного в Chrome на сервер HTML5 и getUserMedia – Запись аудио и сохранения на веб-сервер после определенного времени RecorderJS, загрузка записанного блоба через AJAX
Я понял одно решение, но по-прежнему приветствую других, связанных с рекордерами. Я использовал MP3RecorderJS на странице https://github.com/icatcher-at/MP3RecorderJS . Demo html работает, если вы измените верхнюю часть html из src = "js / jquery.min.js" и src = "js / mp3recorder.js" туда, где они находятся на вашем сервере. Для меня это src = "jquery.min.js" и src = "mp3recorder.js". Я также должен был сделать то же самое в файле «mp3recorder.js»: var RECORDER_WORKER_PATH = 'js / recorderWorker.js'; var ENCODER_WORKER_PATH = 'js / mp3Worker.js'; изменено на var RECORDER_WORKER_PATH = 'recorderWorker.js'; var ENCODER_WORKER_PATH = 'mp3Worker.js';
Программа настроена для записи как mp3, так и wav. Я хотел wav, поэтому сделал еще несколько настроек в html-файле. На строке 55 вы найдете:
recorderObject.exportMP3(function(base64_mp3_data) { var url = 'data:audio/mp3;base64,' + base64_mp3_data; var au = document.createElement('audio'); Я изменил это так:
recorderObject.exportWAV(function(base64_wav_data) { var url = 'data:audio/wav;base64,' + base64_wav_data; var au = document.createElement('audio');
Демонстрация добавляет нового игрока каждый раз, когда вы записываете. Чтобы предотвратить это, я удалил (закомментировал) $ recorder.append (au); part, создал новый div для хранения аудиоплеера, а затем я очищаю его каждый раз, прежде чем будет создан аудиоплеер. Чтобы загрузить на мой сервер, я использовал технику, которую я узнал из загрузки изображений на сервер. Сохранение изображения холста на сервер. В принципе, переменная «url» в строке 56 была тем, что мне нужно, но не могла понять, как ее помещать в универсальная переменная для использования другой функцией. Итак, я создал скрытый div и сделал его содержимое равным «url». Затем я ссылался на этот div в новой функции, называемой «upload». Затем я использовал php-файл с именем «uploadWav.php». Мне еще нужно выяснить способ активации и деактивации кнопки загрузки, чтобы пользователь не загружал пустой файл перед записью, но это еще одна проблема. Вот последний html и php, которые работали на меня:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>MP3 Recorder test</title> </head> <body id="index" onload=""> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="mp3recorder.js"></script> <script type="text/javascript"> var audio_context; function __log(e, data) { log.innerHTML += "\n" + e + " " + (data || ''); } $(function() { try { // webkit shim window.AudioContext = window.AudioContext || window.webkitAudioContext; navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); window.URL = window.URL || window.webkitURL; var audio_context = new AudioContext; __log('Audio context set up.'); __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!')); } catch (e) { alert('No web audio support in this browser!'); } $('.recorder .start').on('click', function() { $this = $(this); $recorder = $this.parent(); navigator.getUserMedia({audio: true}, function(stream) { var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' }); $recorder.data('recorderObject', recorderObject); recorderObject.start(); }, function(e) { }); }); $('.recorder .stop').on('click', function() { $this = $(this); $recorder = $this.parent(); recorderObject = $recorder.data('recorderObject'); recorderObject.stop(); recorderObject.exportWAV(function(base64_wav_data) { var url = 'data:audio/wav;base64,' + base64_wav_data; var au = document.createElement('audio'); document.getElementById("playerContainer").innerHTML = ""; //console.log(url) var duc = document.getElementById("dataUrlcontainer"); duc.innerHTML = url; au.controls = true; au.src = url; //$recorder.append(au); $('#playerContainer').append(au); recorderObject.logStatus(''); }); }); }); </script> <script> function upload(){ var dataURL = document.getElementById("dataUrlcontainer").innerHTML; $.ajax({ type: "POST", url: "uploadWav.php", data: { wavBase64: dataURL } }).done(function(o) { console.log('saved'); }); } </script> <div class="recorder"> Recorder 1 <input type="button" class="start" value="Record" /> <input type="button" class="stop" value="Stop" /> <pre class="status"></pre> </div> <div><button onclick="upload()">Upload</button></div> <div id="playerContainer"></div> <div id="dataUrlcontainer" hidden></div> <pre id="log"></pre> </body> </html>
и файл uploadWav.php:
<?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.'; ?>
//**Server Side Code** package myPack; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.MultipartConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.codec.binary.Base64; @WebServlet("/MyServlet") @MultipartConfig public class MyServlet extends HttpServlet { private static final long serialVersionUID = 1L; public MyServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { String name = request.getParameter("fname"); String url = request.getParameter("myUrl"); url = url.replace("data:audio/wav;base64,", ""); url = url.replace(" ", "+"); byte[] bytes = url.getBytes(); byte[] valueDecoded = Base64.decodeBase64(bytes); FileOutputStream os = new FileOutputStream(new File("D://" + name + ".wav")); os.write(valueDecoded); os.close(); } catch (Exception e) { e.printStackTrace(); } } } **Client Side Code** <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>MP3 Recorder test</title> </head> <body id="index" onload=""> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/recorder.js"></script> <script type="text/javascript"> var audio_context; function __log(e, data) { log.innerHTML += "\n" + e + " " + (data || ''); } $(function() { try { // webkit shim window.AudioContext = window.AudioContext || window.webkitAudioContext; navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); window.URL = window.URL || window.webkitURL; var audio_context = new AudioContext; __log('Audio context set up.'); __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!')); } catch (e) { alert('No web audio support in this browser!'); } $('.recorder .start').on('click', function() { $this = $(this); $recorder = $this.parent(); navigator.getUserMedia({audio: true}, function(stream) { var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' }); $recorder.data('recorderObject', recorderObject); recorderObject.start(); }, function(e) { }); }); $('.recorder .stop').on('click', function() { $this = $(this); $recorder = $this.parent(); recorderObject = $recorder.data('recorderObject'); recorderObject.stop(); recorderObject.exportWAV(function(base64_wav_data) { var url = 'data:audio/wav;base64,' + base64_wav_data; var au = document.createElement('audio'); document.getElementById("playerContainer").innerHTML = ""; //console.log(url) var duc = document.getElementById("dataUrlcontainer"); duc.innerHTML = url; au.controls = true; au.src = url; //$recorder.append(au); $('#playerContainer').append(au); var fd = new FormData(); fd.append('fname', 'test.wav'); fd.append('myUrl', duc.innerHTML); $.ajax({ type: "POST", url: "/audioPart2/MyServlet", data: fd, processData: false, contentType: false }); recorderObject.logStatus(''); }); }); }); </script> <div class="recorder"> Recorder 1 <input type="button" class="start" value="Record" /> <input type="button" class="stop" value="Stop" /> <div id="playerContainer"></div> <div id="dataUrlcontainer" hidden></div> <pre class="status"></pre> </div> <!-- <div class="recorder"> --> <!-- Recorder 2 <input type="button" class="start" value="Record" /> <input --> <!-- type="button" class="stop" value="Stop" /> --> <!-- <pre class="status"></pre> --> <!-- </div> --> <pre id="log"></pre> </body> </html> **// Required JS 1)jquery.min.js 2) recorder.js** **recorder.js is below** (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);