MP3RecorderJS/index.html at master · rajivepandey/MP3RecorderJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/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.exportMP3(function(base64_mp3_data) {
          var url = 'data:audio/mp3;base64,' + base64_mp3_data;
          var au  = document.createElement('audio');

          au.controls = true;
          au.src = url;
          $recorder.append(au);

          recorderObject.logStatus('');
        });

      });

    });
    </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 class="recorder">
      Recorder 2
      <input type="button" class="start"  value="Record" />
      <input type="button" class="stop" value="Stop" />
      <pre class="status"></pre>
    </div>

    <pre id="log"></pre>
  </body>
</html>