Ho trovato una soluzione, ma accogliamo con piacere altri relativi ai registratori. Ho usato MP3RecorderJS a https://github.com/icatcher-at/MP3RecorderJS. La demo html funziona se cambi la parte superiore del codice html da src = "js/jquery.min.js" e src = "js/mp3recorder.js" ovunque si trovino nel tuo server. Per me, è src = "jquery.min.js" e src = "mp3recorder.js" Ho dovuto anche fare la stessa cosa con il file "mp3recorder.js": var RECORDER_WORKER_PATH = 'js/recorderWorker.js'; var ENCODER_WORKER_PATH = 'js/mp3Worker.js'; cambiato in var RECORDER_WORKER_PATH = 'recorderWorker.js'; var ENCODER_WORKER_PATH = 'mp3Worker.js';
Il programma è impostato per registrare sia mp3 che wav. Volevo wav, quindi ho apportato alcune modifiche al file html. Alla linea 55 si trovano:
recorderObject.exportMP3(function(base64_mp3_data) {
var url = 'data:audio/mp3;base64,' + base64_mp3_data;
var au = document.createElement('audio');
ho cambiato a:
recorderObject.exportWAV(function(base64_wav_data) {
var url = 'data:audio/wav;base64,' + base64_wav_data;
var au = document.createElement('audio');
La demo aggiunge un nuovo giocatore ogni volta che si registra. Per evitare ciò, ho cancellato (commentato) il $ recorder.append (au); parte, fatto un nuovo div per memorizzare il lettore audio, e quindi ho cancellato quel div ogni volta, prima che venga creato il lettore audio. Per caricare sul mio server, ho usato una tecnica che ho imparato dal caricamento di immagini su un server save canvas image to server Fondamentalmente, la variabile "url" nella riga 56 era quello di cui avevo bisogno, ma non riuscivo a capire come inserirlo in una variabile universale da usare da un'altra funzione. Quindi, ho fatto un div nascosto e reso il suo contenuto uguale a "url". Ho quindi fatto riferimento a quel div in una nuova funzione chiamata "upload". Ho quindi utilizzato un file php chiamato "uploadWav.php". Devo ancora capire un modo per attivare e disattivare il pulsante di caricamento per impedire all'utente di caricare un file vuoto prima della registrazione, ma questo è un altro problema. Ecco il codice html e php finale che ha funzionato per me:
<!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>
e il file "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.';
?>
Morto collegamento github. – Ael