use*_*392 7 javascript php audio html5 recorder.js
我正在尝试从网站用户录制音频并将音频保存到我的服务器.到目前为止,我研究过的很多帖子都引用了Matt Diamond的录音机.我尝试通过浏览器打开源代码,在http://webaudiodemos.appspot.com/AudioRecorder/index.html上重新创建演示.我复制了html,"audiodisplay.js","recorder.js"和"main.js"并将它们放在我的服务器上.我还在他的GitHub网站上添加了"recorderWorker.js"文件.在recorder.js文件中,我将var WORKER_PATH ='js/recorderjs/recorderWorker.js'更改为var WORKER_PATH ='recorderWorker.js';
当我运行我设置的演示时,我得到"你想分享你的麦克风......"警告,我可以通过按右侧的麦克风图标开始录音.但是,当我停止录制时,音频波形不会像Matt的演示中那样显示在下面,并且保存图标不会被激活.
如果我可以启动并运行该演示,我的下一个问题是将wav文件保存到服务器而不是像演示中那样在本地.我发现有几篇帖子说要使用XMLHttpRequest(),但是我无法弄清楚如何将这些例子连接到recorderjs.将Chrome中记录的WAV文件保存到服务器 HTML5和getUserMedia - 在某些时间 记录器之后记录音频并保存到Web服务器JS通过AJAX上传记录的blob
我找到了一个解决方案,但仍然欢迎其他与recorderjs有关的解决方案.我在https://github.com/icatcher-at/MP3RecorderJS上使用了MP3RecorderJS .如果您将html的顶部从src ="js/jquery.min.js"和src ="js/mp3recorder.js"更改为位于服务器中的任何位置,则演示html会起作用.对我来说,它是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); 部分,创建一个新的div来存储音频播放器,然后我在创建音频播放器之前每次都清除div.要上传到我的服务器,我使用了从上传图像到服务器的技术,将画布图像保存到服务器 基本上,第56行中的"url"变量是我需要的,但无法弄清楚如何将它放入通用变量由另一个函数使用.所以,我制作了一个隐藏的div,并使其内容等于"url".然后我在一个名为"upload"的新函数中引用了div.然后我使用了一个名为"uploadWav.php"的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.';
?>
使用XMLHttpRequest后WAV或MP3斑点服务器很简单.
只需在有权访问blob元素的地方运行此代码:
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);
我喜欢XMLHttpRequest到$.ajax(),因为它不需要jQuery的.
服务器端,upload.php简单如下:
$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)
来源:https://addpipe.com/blog/using-recorder-js-to-capture-wav-audio-in-your-html5-web-site/ 现场演示:https://addpipe.com/simple-recorderjs -demo /
| 归档时间： |
|
| 查看次数： |
25662 次 |
| 最近记录： |