enregistrement audio de l'utilisateur et de l'enregistrer sur le serveur

Je suis en train d'enregistrer de l'audio à partir d'un site de l'utilisateur et enregistrer de l'audio sur mon serveur. Beaucoup de billets j'ai étudié jusqu'à présent ont référencé Matt Diamant recorderjs. J'ai essayé de recréer la démo à http://webaudiodemos.appspot.com/AudioRecorder/index.html par l'ouverture du code source par le biais de mon navigateur. J'ai copié le code html "audiodisplay.js", "recorder.js" et "main.js" et les mettre sur mon serveur. J'ai également ajouté le "recorderWorker.js" le fichier à partir de sa page GitHub. Dans le recorder.js fichier, j'ai changé var WORKER_PATH = 'js/recorderjs/recorderWorker.js" pour var WORKER_PATH = 'recorderWorker.js';

Quand je lance la démo que j'ai mis en place, je me fais de la "aimeriez-vous partager votre microphone.." avertissement et je peux démarrer l'enregistrement en appuyant sur l'icône micro sur le côté droit. Cependant, quand j'ai arrêter l'enregistrement, le signal audio ne passe pas en dessous comme dans Matt démo et l'icône de sauvegarde n'a pas été activés.

Si je peux obtenir la démo et en cours d'exécution, le prochain problème que j'ai est d'enregistrer le fichier wav sur le serveur plutôt que localement comme dans la démo. J'ai trouvé plusieurs postes de dire d'utiliser XMLHttpRequest(), mais je ne peux pas vraiment savoir comment connecter ces exemples recorderjs. Enregistrement de Fichiers WAV Enregistrés dans google Chrome pour Serveur HTML5 & getUserMedia - Enregistrement Audio & Enregistrer pour le Web Serveur apres un Certain Temps RecorderJS téléchargement enregistré blob via AJAX

OriginalL'auteur user3080392 | 2014-12-01

J'ai trouvé une solution, mais ce serait encore accueillir d'autres liées à recorderjs. J'ai utilisé MP3RecorderJS à https://github.com/icatcher-at/MP3RecorderJS. La démo fonctionne le html si vous modifiez le début du html à partir src="js/jquery.min.js" et src="js/mp3recorder.js" partout où ils sont situés dans votre serveur. Pour moi, c'est src="jquery.min.js" et src="mp3recorder.js" j'ai également eu à faire la même chose pour le "mp3recorder.js" fichier: var RECORDER_WORKER_PATH = 'js/recorderWorker.js'; var ENCODER_WORKER_PATH = 'js/mp3Worker.js'; modification var RECORDER_WORKER_PATH = 'recorderWorker.js'; var ENCODER_WORKER_PATH = 'mp3Worker.js';

Le programme est configuré pour enregistrer les fichiers mp3 et wav. Je voulais wav, donc j'ai fait quelques ajustements pour le fichier html. À la ligne 55, vous trouverez:

recorderObject.exportMP3(function(base64_mp3_data) {
      var url = 'data:audio/mp3;base64,' + base64_mp3_data;
      var au  = document.createElement('audio');

J'ai changé:

recorderObject.exportWAV(function(base64_wav_data) {
      var url = 'data:audio/wav;base64,' + base64_wav_data;
      var au  = document.createElement('audio');

La démo ajoute un nouveau joueur à chaque fois que vous enregistrez. Pour éviter cela, j'ai supprimé (commenté) $enregistreur.append(ua), fait un nouveau div pour stocker le lecteur audio, et puis j'ai clairement que les div à chaque fois, avant que le lecteur audio est créé. Pour l'uploader sur mon serveur, j'ai utilisé une technique que j'ai appris de télécharger des images à un serveur enregistrer toile de l'image vers le serveur Fondamentalement, la "url" variable dans la ligne 56 était ce dont j'avais besoin, mais ne pouvait pas comprendre comment le mettre dans un universel de la variable par une autre fonction. Alors, j'ai fait un div caché et fait le contenu de celui-ci égale à "url". J'ai ensuite référencé div dans une nouvelle fonction appelée "télécharger". J'ai ensuite utilisé un fichier php appelé "uploadWav.php". J'ai encore trouver un moyen d'activer et de désactiver le bouton de téléchargement pour empêcher l'utilisateur de télécharger un fichier vide avant de l'enregistrer, mais c'est une autre question. Voici la dernière html et php, ce qui a fonctionné pour moi:

<!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>

et l' "uploadWav.php" fichier:

<?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.';
?>

Morts github lien.

OriginalL'auteur user3080392

À l'aide de XMLHttpRequest de post wav ou mp3 gouttes de serveur est simple.

Il suffit d'exécuter ce code chaque fois que vous avez accès à la blob élément:

var xhr=new XMLHttpRequest();
xhr.onload=function(e) {
if(this.readyState === 4) {
console.log("Server returned: ",e.target.responseText);
}
};
var fd=new FormData();
fd.append("audio_data",blob, "filename");
xhr.open("POST","upload.php",true);
xhr.send(fd);

Je préfère XMLHttpRequest à $.ajax() car il ne nécessite pas de jQuery.

Côté serveur, upload.php est aussi simple que:

$input = $_FILES['audio_data']['tmp_name']; //temporary name that PHP gave to the uploaded file
$output = $_FILES['audio_data']['name'].".wav"; //letting the client control the filename is a rather bad idea
//move the file from temp name to local folder using $output name
move_uploaded_file($input, $output)

Source: https://addpipe.com/blog/using-recorder-js-to-capture-wav-audio-in-your-html5-web-site/
Démonstration en direct: https://addpipe.com/simple-recorderjs-demo/

OriginalL'auteur Octavian Naicu

//**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);

Ce Code est en Java et fonctionne très bien......Testé

OriginalL'auteur user2164096

Vous devez vous connecter pour publier un commentaire.