-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
executable file
·78 lines (78 loc) · 2.43 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
<!DOCTYPE html>
<html>
<head>
<script src="src/recorder.js"></script>
<script src="src/Fr.voice.js"></script>
<script src="js/jquery.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<h1>Francium Voice</h1>
<p>Created By <a href='http://subinsb.com'>Subin Siby</a> & Open Source community</p>
<p>
<h2>NOTE</h2>
<p>Since Chrome version 47, Voice Recording works only on HTTPS sites. You can see the demo on HTTPS <a href="https://demos.subinsb.com/jquery/voice/">here</a>.</p>
</p>
<h2>Record</h2>
<audio controls id="audio"></audio>
<div>
<a class="button recordButton" id="record">Record</a>
<a class="button recordButton" id="recordFor5">Record For 5 Seconds</a>
<a class="button disabled one" id="pause">Pause</a>
<a class="button disabled one" id="stop">Reset</a>
</div><br/>
<div>
<input class="button" type="checkbox" id="live"/>
<label for="live">Live Output</label>
</div>
<div data-type="wav">
<p>WAV Controls:</p>
<a class="button disabled one" id="play">Play</a>
<a class="button disabled one" id="download">Download</a>
<a class="button disabled one" id="base64">Base64 URL</a>
<a class="button disabled one" id="save">Upload to Server</a>
</div>
<div data-type="mp3">
<p>MP3 Controls:</p>
<a class="button disabled one" id="play">Play</a>
<a class="button disabled one" id="download">Download</a>
<a class="button disabled one" id="base64">Base64 URL</a>
<a class="button disabled one" id="save">Upload to Server</a>
</div>
<canvas id="level" height="200" width="500"></canvas>
<style>
.button{
display: inline-block;
vertical-align: middle;
margin: 0px 5px;
padding: 5px 12px;
cursor: pointer;
outline: none;
font-size: 13px;
text-decoration: none !important;
text-align: center;
color:#fff;
background-color: #4D90FE;
background-image: linear-gradient(top,#4D90FE, #4787ED);
background-image: -ms-linear-gradient(top,#4D90FE, #4787ED);
background-image: -o-linear-gradient(top,#4D90FE, #4787ED);
background-image: linear-gradient(top,#4D90FE, #4787ED);
border: 1px solid #4787ED;
box-shadow: 0 1px 3px #BFBFBF;
}
a.button{
color: #fff;
}
.button:hover{
box-shadow: inset 0px 1px 1px #8C8C8C;
}
.button.disabled{
box-shadow:none;
opacity:0.7;
}
canvas{
display: block;
}
</style>
</body>
</html>