mic-check/index.html at master · catdad-experiments/mic-check · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>mic check</title>

  <link rel="stylesheet" type="text/css" href="src/style.css">

  <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
  <link rel="mask-icon" href="icons/favicon.svg" color="#abd64d">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link rel="icon" type="image/png" sizes="192x192" href="icons/android-chrome-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">

  <meta name="theme-color" content="#24292e">
</head>
<body>
  <svg class="sprite" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <symbol id="code" viewBox="0 0 14 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3 9.5 3ZM4.5 3L0 8 4.5 13 6 11.5 2.5 8 6 4.5 4.5 3 4.5 3Z"/>
      </symbol>

      <symbol id="heart" viewBox="0 0 12 16">
        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->
        <path d="M11.2 3C10.68 2.37 9.95 2.05 9 2 8.03 2 7.31 2.42 6.8 3 6.29 3.58 6.02 3.92 6 4 5.98 3.92 5.72 3.58 5.2 3 4.68 2.42 4.03 2 3 2 2.05 2.05 1.31 2.38 0.8 3 0.28 3.61 0.02 4.28 0 5 0 5.52 0.09 6.52 0.67 7.67 1.25 8.82 3.01 10.61 6 13 8.98 10.61 10.77 8.83 11.34 7.67 11.91 6.51 12 5.5 12 5 11.98 4.28 11.72 3.61 11.2 2.98L11.2 3Z"/>
      </symbol>

      <symbol id="mic" viewBox="0 0 100 100">
        <!-- Created by Setyo Ari Wibowo from the Noun Project -->
        <path d="M40 51V29c0-5.5 4.5-10 10-10s10 4.5 10 10v22c0 5.5-4.5 10-10 10S40 56.5 40 51zM68 51c0-1.1-0.9-2-2-2s-2 0.9-2 2c0 7.7-6.3 14-14 14s-14-6.3-14-14c0-1.1-0.9-2-2-2s-2 0.9-2 2c0 9.2 7 16.9 16 17.9V79h-7c-1.1 0-2 0.9-2 2s0.9 2 2 2h18c1.1 0 2-0.9 2-2s-0.9-2-2-2h-7V68.9C61 67.9 68 60.2 68 51z"/>
      </symbol>
    </defs>
  </svg>

  <header class="limit">
    <div id="permission-prompt" class="text">
      Please allow access to the microphone. After all, we'll need to use it in order to test it.
    </div>
    <div id="permission-denied-prompt" class="text hide">
      Seems you did not allow access to the microphone, so we will not be able to test it.
      <button>reload page</button>
    </div>
    <div id="usage-prompt" class="text hide">
      Hold the microphone button and talk. We will play back the audio when you let go of the button.
    </div>
    <div id="unsupported-prompt" class="text hide">
      It seems your browser is not supported. The following features are missing:
    </div>
  </header>

  <div class="container limit">
    <button id="test" class="recorder hide">
      <svg><use xlink:href="#mic"></use></svg>
    </button>
    <select id="devices" class="dropdown hide"></select>
  </div>

  <footer>
    <a href="https://github.com/catdad">
      <span class="icon">
        <svg class="icon"><use xlink:href="#code"></use></svg>
      </span>
      <span> with </span>
      <span class="icon">
        <svg class="icon"><use xlink:href="#heart"></use></svg>
      </span>
      <span> by <b>catdad</b></span>
    </a>
  </footer>

  <script src="src/index.js"></script>

  <script src="/analytics.js"></script>
</body>
</html>