PHP-VoiceChat/index.php at master · ROMTypo/PHP-VoiceChat · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html>
  <head>
    <title>PHP VoiceChat</title>
  </head>
  <body>
    <div class="tools">
      <label>
        <input type="checkbox" id="record" checked>
        Mute
      </label><br>
      <label>
        <input type="range" min="0.00001" max="1" value="0.36" step="0.00001" id="audioDetect"><br>
        <input type="range" min="0.00001" max="1" step="0.00001" id="audioDetector" disabled>
        <div class="activity" style="border-radius:50%;background-color:red;height:20px;width:20px;display:inline-block"></div>
      </label>
    </div>
    <textarea class="log" readonly></textarea>
    <div class="audioElements" style="display:none;">

    </div>
    <script src="audioDetect.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      var threshold=0.36;
      var played=[];
      $("#audioDetect").change(()=>{
        $(".audioDetector .max").text($("#audioDetect").val());
        threshold=$("#audioDetect").val();
      });
      setInterval(()=>{
        $.get("api/audio.php",data=>{
          data=data.split("\n");
          data.forEach((url)=>{
            if(played.indexOf(url)===-1){
              $(".audioElements").append("<audio src='"+url+"' controls autoplay></audio>");
              played.push(url);
            }
          })
        })
      },1000);
      var mediaRecorder;
      var recordTimeout;
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      var audioContext = new AudioContext();
      var stream;
      var checker;
      var mediaStreamSource;
      navigator.mediaDevices.getUserMedia({ audio: true }).then(s=>{
        stream=s;
        mediaStreamSource = audioContext.createMediaStreamSource(stream);
        meter = createAudioMeter(audioContext);
        mediaStreamSource.connect(meter);
      })

      var recorder=()=>{
        return new Promise(res=>{
          console.log("starting...");
          clearInterval(checker);
          checker=setInterval(()=>{
            if(meter.volume<threshold){
              mediaRecorder.stop();
            }
          },100);
          clearTimeout(recordTimeout);
          recordTimeout=setTimeout(()=>{
            mediaRecorder.stop();
            res();
          },1000);

          mediaRecorder = new MediaRecorder(stream);
          mediaRecorder.start();

          const audioChunks = [];
          mediaRecorder.addEventListener("dataavailable", event => {
            audioChunks.push(event.data);
          });

          mediaRecorder.addEventListener("stop", () => {
            res();
            clearInterval(checker);
            console.log("stopping...");
            const audioBlob = new Blob(audioChunks);
            const audioUrl = URL.createObjectURL(audioBlob);
            var reader = new window.FileReader();
            reader.readAsDataURL(audioBlob);
            reader.onloadend = function() {
              base64 = reader.result;
              base64 = base64.split(',')[1];
              $.post("api/audio.php",{
                "data":"data:audio/wav;base64,"+base64
              },data=>{
                $(".log").prepend(data+"\n");
              });
            }
          });
        })
      }
      setInterval(()=>{
        $("#audioDetector").val(meter.volume.toFixed(4));
        if(meter.volume>threshold){
          $(".activity").css("background-color","green");
        }else{
          $(".activity").css("background-color","red");
        }
      },10);
      var keepRecording=()=>{
        if($("#record").is(":checked")||meter.volume<threshold){
          setTimeout(keepRecording,100);
          return;
        }
        recorder().then(keepRecording);
      };
      keepRecording();
    </script>
  </body>
</html>