Recordmp3js/index.html at master · FieldDB/Recordmp3js · 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
<!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'>
    @import 'bower_components/bootstrap/dist/css/bootstrap.min.css';
    @import 'bower_components/bootstrap/dist/css/bootstrap-theme.min.css';
    ul { list-style: none; }
    #recordingslist audio { display: block; margin-bottom: 10px; }
  </style>
  <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <h1>Record to MP3 Test</h1>

  <div class="RecordMP3js-recorder" data-format="mp3" data-callback="uploadAudio"></div>
  <div class="RecordMP3js-recorder" data-format="wav" data-callback="logToConsole"></div>

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

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

  <script>
  function uploadAudio(recorder, mp3Data){
    var reader = new FileReader();
    reader.onload = function(event){
      var fd = new FormData();
      var mp3Name = 'audio_recording_' + new Date().getTime() + '.mp3';
      var xhr = new XMLHttpRequest();
      var url = event.target.result

      // Add audio element and download URL to page.
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');

      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = mp3Name;
      hf.innerHTML = mp3Name;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);

      log.innerHTML += "\nmp3name = " + mp3Name;
      fd.append('fname', encodeURIComponent(mp3Name));
      fd.append('data', url);
      xhr.open('POST', 'upload.php', true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          log.innerHTML += "\nMP3 uploaded.";
          recorder.clear();
        }
      };
      xhr.send(fd);
    };
    reader.readAsDataURL(mp3Data);

  }
  function logToConsole(recorder, data) {
    console.log(data);
    recorder.clear();
  }
  </script>
  <script>
    window.exports = window;
    window.exports.workerPath = "";
  </script>
  <script src="js/recordmp3.js"></script>
</body>
</html>