mediacodec.wasm/audio-demo.html at master · kazuki/mediacodec.wasm · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Opus.wasm Demo</title>
    <meta charset="UTF-8" />
	<script src="audio-demo.js" type="text/javascript"></script>
    <style type="text/css">
      *  { font-family:sans-serif }
      fieldset { display: inline; padding: 1ex; margin-bottom: 1ex; vertical-align: top }
      fieldset > div { padding: 0 1ex 1ex 1ex; }
      .flex-child-space { font-size: 80%; margin-top: 1ex }
      .flex-child-space > div { margin-right: 0.5ex; }
    </style>
  </head>
  <body>
    <h1 style="font-size: 110%">Opus.wasm Encoder/Decoder Demo</h1>
    <div style="display: flex; flex-wrap: wrap;">
      <fieldset>
        <legend>Opus Config</legend>
        <div>
          <!--<div>
            <label for="opus_frame_duration">Frame Duration:</label>
            <select id="opus_frame_duration">
              <option value="2.5">2.5 ms</option>
              <option value="5">5 ms</option>
              <option value="10">10 ms</option>
              <option value="20" selected="selected">20 ms</option>
              <option value="40">40 ms</option>
              <option value="60">60 ms</option>
            </select>
          </div>-->
          <div>
            <label for="opus_app">Application:</label>
            <select id="opus_app">
              <option value="voip">VoIP</option>
              <option value="audio" selected="selected">Audio</option>
              <option value="lowdelay">Restricted Low Delay</option>
            </select>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>Benchmark</legend>
        <div>
          <div>Measures the encoding/decoding speed with the selected wave file</div>
          <input type="file" id="input_filedata" style="display:block" accept=".wav">
          <button id="start-benchmark">Start</button>
          <div style="display: flex" class="flex-child-space" id="benchmark-result"></div>
        </div>
      </fieldset>
      <fieldset>
        <legend>Realtime Encode/Decode</legend>
        <div>
          <div>Encode/decode the audio(by getUserMedia) in realtime and play it with WebAudio</div>
          <button id="play">Start (not implemented)</button>
        </div>
      </fieldset>
    </div>
  </body>
</html>