Question

我尝试使用getUserMedia从麦克风录制中保存生成的wav文件，我使用Matt Diamond，Recorder.js中的脚本，但在我的主文件中，当我得到文件blod准备好发送使用XMLHttpRequest（），通过在saveWav.php中使用POST保存文件，文件为空wav而没有使用Recorder.js录音。可能是由于这个？

文件是：

的index.php

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Live input record and playback</title>
  <style type='text/css'>
    ul { list-style: none; }
    #recordingslist audio { display: block; margin-bottom: 10px; }
  </style>
</head>
<body>

  <h1>Recorder.js simple WAV export example</h1>

  <p>Make sure you are using a recent version of Google Chrome, at the moment this only works with Google Chrome Canary.</p>
  <p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!</p>

  <button onclick="startRecording(this);">record</button>
  <button onclick="stopRecording(this);" disabled>stop</button>

  <h2>Recordings</h2>
  <ul id="recordingslist"></ul>

  <h2>Log</h2>
  <pre id="log"></pre>

  <script>
  function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }

  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('Media stream created.');

    input.connect(audio_context.destination);
    __log('Input connected to audio context destination.');

    recorder = new Recorder(input);
    __log('Recorder initialised.');
  }

  function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('Recording...');
  }

  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('Stopped recording.');

    // create WAV download link using audio data blob
    createDownloadLink();

    recorder.clear();
  }

  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = (window.URL || window.webkitURL).createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      var xhr = new XMLHttpRequest();

      xhr.open('POST', 'saveWav.php', true);
      xhr.onload = function (e) {
          var result = e.target.result;
      };
      xhr.send(url);//url is Blob

      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });
  }

  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;

      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!');
    }

    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No live audio input: ' + e);
    });
  };
  </script>

  <script src="recorder.js"></script>
</body>
</html>

并保存saveWav.php文件：

<?php
   if( isset($HTTP_RAW_POST_DATA))
   {
      $cad = $HTTP_RAW_POST_DATA;
      $date = date("d-m-Y H:i:s");
      $stringas = explode(":",$cad);
      $type = explode(";", $stringas[1]);
      $base = explode(",", $type[1]);
      $base64 = $base[1];
      print_r ( $base64 );

      $myFile = "grabacion.".$date.".wav";
      $fh = fopen($myFile, 'w');
      fwrite($fh, base64_decode($base64));
   }
?>

非常感谢你的帮助！问候

使用getUserMedia和XMLHttpRequest（）在服务器上保存blob wav文件

0 个答案: