录制用户的音频并保存到服务器

问题描述

我试图从网站用户录制音频并将音频保存到我的服务器。到目前为止，我研究过的许多帖子都引用了Matt Diamond的记录器。我试图在通过我的浏览器打开源代码。我复制了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。 HTML5& amp; getUserMedia - Record Audio&在某段时间后保存到Web服务器 上使用了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。要上传到我的服务器，我使用了一种从上传图像到服务器的技术基本上，urlv在第56行是可行的是我所需要的，但无法弄清楚如何将它放入一个通用变量中以供其他函数使用。所以，我制作了一个隐藏的div，并将它的内容等同于url。然后我在一个名为upload的新函数中引用该div。然后我使用了一个名为uploadWav.php的php文件。我仍然需要找出一种方法来激活和停用上传按钮，以防止用户在录制之前上传空白文件，但这是另一个问题。下面是最终的HTML和PHP的工作对我来说：

 <！DOCTYPE html> 
< html> 
< head> 
< meta http-equiv =Content-typecontent =text / html; charset = utf-8> 
< title> MP3录音机测试< / title> 
< / head> 
< body id =indexonload => 
 
< script type =text / javascriptsrc =jquery.min.js>< / script> 
< script type =text / javascriptsrc =mp3recorder.js>< / script> 
< script type =text / javascript> 
 var audio_context; 
 
函数__log（e，data）{
 log.innerHTML + =\\\
+ 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（'此浏览器不支持网页音频！'）; $ （'click'，function（）{
 $ this = $（this）; 
 $ b $（'。recorder .start'）。 = $ this.parent（）; 
 
 navigator.getUserMedia（{audio：true}，function（stream）{
 var recorderObject = new MP3Rec order（audio_context，stream，{statusContainer：$ recorder.find（'。status'），statusMethod：'replace'}）; 
 $ recorder.data（'recorderObject'，recorderObject）; 
 
 recorderObject.start（）; 
}，function（e）{}）; 
}）; （'click'，function（）{
 $ this = $（this）; 
 $ recorder = $ this。
 
 $（'。recorder .stop'）。 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（ innerContainer）。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（{
类型：POST，
 url：uploadWav.php，
数据：{
 wavBase64：dataURL 
 
}）。done（function（o）{
 console.log（'saved'）; 
 
}）; 
 
} 
< / script> 
 
 
< div class =recorder> 
 Recorder 1 
< input type =buttonclass =startvalue =Record/> 
< input type =buttonclass =stopvalue =Stop/> 
< pre class =status>< / pre> 
< / div> 
 
< div>< button onclick =upload（）>上传< / button>< / div> 
 
< div id =playerContainer>< / div> 
 
< div id =dataUrlcontainerhidden>< / div> 
 
< pre id =log>< / pre> 
 
< / body> 
< / html> 
  

和uploadWav.php文件：

 <？php 
 //需要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）; 
打印$成功？ $ file：'无法保存文件。'; 
？> 
  

I'm trying to record audio from a website user and save the audio to my server. Many of the posts I have studied so far have referenced Matt Diamond's recorderjs. I attempted to recreate the demo at http://webaudiodemos.appspot.com/AudioRecorder/index.html by opening the source code through my browser. I copied the html, "audiodisplay.js", "recorder.js", and "main.js" and put them on my server. I also added the "recorderWorker.js" file from his GitHub site. In the recorder.js file, I changed var WORKER_PATH = 'js/recorderjs/recorderWorker.js' to var WORKER_PATH = 'recorderWorker.js';

When I run the demo I set up, I'm getting the "would you like to share your microphone.." warning and I can start the recording by pressing the mic icon on the right side. However, when I stop recording, the audio waveform doesn't show up below like in Matt's demo and the save icon doesn't become activated.

If I can get the demo up and running, the next problem I have is saving the wav file to the server instead of locally like in the demo. I've found several posts saying to use XMLHttpRequest(), however I can't really figure out how to connect those examples to recorderjs. Saving WAV File Recorded in Chrome to Server HTML5 & getUserMedia - Record Audio & Save to Web Server after Certain Time RecorderJS uploading recorded blob via AJAX

解决方案

I figured out one solution, but would still welcome others related to recorderjs. I used MP3RecorderJS at https://github.com/icatcher-at/MP3RecorderJS. The demo html works if you change the top of the html from src="js/jquery.min.js" and src="js/mp3recorder.js" to wherever they're located in your server. For me, it is src="jquery.min.js" and src="mp3recorder.js" I also had to do the same thing to the "mp3recorder.js" file: var RECORDER_WORKER_PATH = 'js/recorderWorker.js'; var ENCODER_WORKER_PATH = 'js/mp3Worker.js'; changed to var RECORDER_WORKER_PATH = 'recorderWorker.js'; var ENCODER_WORKER_PATH = 'mp3Worker.js';

The program is set up to record both mp3 and wav. I wanted wav, so I made a few more adjustments to the html file. At line 55 you'll find:

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

I changed that to:

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

The demo appends a new player each time you record. To prevent this, I deleted (commented out) the $recorder.append(au); part, made a new div to store the audio player, and then I clear that div each time, before the audio player is created. To upload to my server, I used a technique I learned from uploading images to a server save canvas image to server Basically, the "url" variable in line 56 was what I needed, but couldn't figure out how to put it in a universal variable to use by another function. So, I made a hidden div and made the contents of it equal to "url". I then referenced that div in a new function called "upload". I then used a php file called "uploadWav.php". I still have to figure out a way to activate and deactivate the upload button to prevent the user from uploading a blank file before recording, but that's another issue. Here's the final html and php that worked for 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>

and the "uploadWav.php" file:

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

这篇关于录制用户的音频并保存到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！