voice_shutter/index.html at master · 708yamaguchi/voice_shutter · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>

<html>
  <head>

    <meta charset="UTF-8">
    <div class="background">
      <title>Voice Shutter</title>
      <style>
        canvas, video{
        border: 1px solid gray;
        }
      </style>
      <br>
      <h1 id="title">Voice Shutter<br>-音声登録による写真撮影-</h1>
      <br>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.2.1.js">
    </script>
  </head>


  <body>
    <div id="sample1">
      <input type="radio" name="langKbn" id="sJa" style="display: none;" onClick="langSet('ja'); change_content();" checked>
      <label for="sJa">
        <span class="langCng" lang="ja">日本語</span>
        <span class="langCng" lang="en">日本語</span>
      </label>
      <input type="radio" name="langKbn" id="sEn" style="display: none;" onClick="langSet('en'); change_content();">
      <label for="sEn">
        <span class="langCng" lang="ja">English</span>
        <span class="langCng" lang="en">English</span>
      </label>
    </div>

    <p>
      <div class="raw_string" id="state" style="margin-bottom:10px">
        <p class="langCng" lang="ja">
          「スタート」ボタンを押して開始してください。
        </p>
        <p class="langCng" lang="en">
          Press "Start" button to start.
        </p>
      </div>
    </p>

    <form>
      <button class="button1" type="button" style="width:100px;height:50px" id="start">
        <div class="langCng" lang="ja">
          スタート
        </div>
        <div class="langCng" lang="en">
          Start
        </div>
      </button>
      <button class="button1" type="button" style="width:100px;height:50px" id="record">
        <div class="langCng" lang="ja">
          音声登録
        </div>
        <div class="langCng" lang="en">
          Register
        </div>
      </button>
      <button class="button1" type="button" style="width:100px;height:50px" id="stop">
        <div class="langCng" lang="ja">
          ストップ
        </div>
        <div class="langCng" lang="en">
          Stop
        </div>
      </button>
    </form>

    <p>
      <div style="margin-bottom:10px"></div>
    </p>

    <canvas id="sound_analizer" width="600" height="300"></canvas>
    <div class="raw_string" style="margin-bottom:10px; width=90%">
      <div class="langCng" lang="ja">
        黒線：現在の音声スペクトル&nbsp;&nbsp;&nbsp;&nbsp;赤線：録音された音声スペクトル
      </div>
      <div class="langCng" lang="en">
        Black line：Current voice spectrum&nbsp;&nbsp;&nbsp;&nbsp;Red line：Recorded voice spectrum
      </div>
    </div>
    <br>
    <video id="camera" width="300" autoplay muted playsinline></video>
    <canvas id="camera_raw" width="300"></canvas>
    <br>
    <canvas id="camera_mono" width="300"></canvas>
    <canvas id="camera_kp" width="300"></canvas>
    <div class="raw_string" style="margin-bottom:10px">
      <div class="langCng" lang="ja">
        左上：カメラ映像&nbsp;&nbsp;&nbsp;&nbsp;右上：カメラ画像&nbsp;&nbsp;&nbsp;&nbsp;
        左下：白黒画像&nbsp;&nbsp;&nbsp;&nbsp;右下：ORB特徴量
      </div>
      <div class="langCng" lang="en">
        Upper left: Camera stream&nbsp;&nbsp;&nbsp;&nbsp;Upper right: Captured image&nbsp;&nbsp;&nbsp;&nbsp;
        Lower left: monochrome image&nbsp;&nbsp;&nbsp;&nbsp;Lower right: ORB feature
      </div>
    </div>

    <p>
      <a href="https://github.com/708yamaguchi/voice_shutter">
        <div class="langCng" lang="ja">
          GitHubソースコード
        </div>
        <div class="langCng" lang="en">
          GitHub source code
        </div>
      </a>
    </p>

</div>

<!-- Language switching -->
<link rel="stylesheet" href="css/lang.css" type="text/css" />
<!-- Black out screen -->
<script type="text/javascript" src="js/glayer.js"></script>
<link rel="stylesheet" href="css/glayer.css" type="text/css" />
<!-- Long press -->
<!-- https://github.com/vaidik/jquery-longpress -->
<script type="text/javascript" src="js/jquery.longpress.js"></script>
<!-- Trianglify -->
<!-- http://qrohlf.com/trianglify/ -->
<!-- https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js -->
<script src="js/trianglify.min.js"></script>
<script src="js/trianglify.js"></script>
<!-- Background size -->
<link rel="stylesheet" href="css/background.css" type="text/css" />
<!-- Opencv -->
<script src="https://docs.opencv.org/4.2.0/opencv.js"></script>

<!-- My scripts -->
<script src="js/resize_canvas.js"></script>
<script src="js/camera.js"></script>
<script src="js/sound_analyze.js"></script>
<link rel="stylesheet" href="css/font.css" type="text/css" />
<script src="js/sound_analyze.js"></script>

</body>
</html>