Homepage von Basti1012 = ,loesungen ,Hauptmenü

< >
recorder-test-stackoverflow.php

Quell 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/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);

      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>