-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (71 loc) · 3.84 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Platypus</title>
<link rel="icon" href="img/favicon.png">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery/js/jquery-1.8.2.js"></script>
<!-- feature-detection (requires jQuery) -->
<script src="feature-detection/isMicSupported.js"></script>
<!-- dependencies -->
<script src="jquery/js/jquery-ui-1.9.1.custom(added-widgets).js"></script>
<script src="jquery/js/jquery.ui.touch-punch.js"></script>
<link rel="stylesheet" href="jquery/css/jquery-ui-1.9.2.custom.css">
<script src="dependencies/mediaDevices-getUserMedia-polyfill.js"></script>
<script src="dependencies/AudioContextMonkeyPatch.js"></script>
<script src="dependencies/FileSaver.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- styling -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- container to hold all visible elements within {width 93%, height: 95%} of screen -->
<div id="container">
<div id="timebar">
<span id="bg">
<p class="float" id="timer">0:00</p>
</span>
</div>
<canvas id="canvas">your browser or device does not support the Canvas element,
please try switching browsers to see the visualisation effect</canvas>
<div id="startbar">
<img src="img/ic_keyboard_voice_white_24px.svg" class="float" id="startBtn" alt="start recording">
<img src="img/ic_stop_white_24px.svg" class="float" id="stopBtn" alt="stop recording">
</div>
<div id="slide-wrap">
<div id="slider">
<div id="leftDiv"></div>
<div id="timeDiv"></div>
<div id="rightDiv"></div>
</div>
</div>
<div id="playerUI">
<p class="float" id="duration"></p>
<img src="img/ic_play_arrow_white_24px.svg" class="float" id="play" alt="play playback">
<img src="img/ic_pause_white_24px.svg" class="float" id="pause" alt="pause playback">
<img src="img/ic_edit_white_24px.svg" class="float" id="editBtn" alt="edit recording">
<img src="img/ic_file_upload_white_24px.svg" class="float" id="upBtn" alt="upload recording">
<img src="img/ic_file_download_white_24px.svg" class="float" id="download" alt="download recording">
<img src="img/ic_volume_up_white_24px.svg" class="float" id="volume-btn" alt="playback volume">
<img src="img/ic_volume_off_white_24px.svg" class="float" id="muted" alt="mute playback">
<input type="range" min="0" max="10" value="5" class="float" id="volume" />
</div>
<div id="keep-discard">
<p class="float"><b>Keep</b> will upload your recording to your Media Manager</p>
<p class="float"><b>Discard</b> allows you to continue editing your recording</p>
<span class="float"><b>Download</b> your recording here: </span>
<img src="img/ic_file_download_black_24px.svg" class="float" id="download-edit" alt="download edited recording">
<audio id="edited" controls controlsList="nodownload"></audio>
</div>
</div>
<!-- placed at bottom to avoid any interference when revealing UI elements and also
banished to the far ends of the negative left-margin to both hide and manipulate:
sometimes Firefox would ignore this element if display: none or visibility: hidden
were set. margins plus setting preload to auto ensures up to date element values -->
<audio preload="auto" id="source"></audio>
<script src="main.js"></script>
</body>
</html>