-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Your Name
committed
Oct 30, 2017
0 parents
commit f851974
Showing
24 changed files
with
29,841 additions
and
0 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,354 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<link rel="stylesheet" href="css/font-awesome.min.css"> | ||
<script src="js/jquery-2.2.4.min.js"></script> | ||
<script src="js/jquery-ui.js"></script> | ||
<link rel="stylesheet" href="css/jquery-ui.css"> | ||
<style> | ||
|
||
.notepad { | ||
font-size: 21px !important; | ||
height: 450px; | ||
margin: 2pt auto; | ||
padding: 6pt 5pt 4pt 40pt; | ||
position: relative; | ||
color: #444; | ||
overflow: auto; | ||
line-height: 1.5 !important; | ||
border: 1px solid #d2d2d2; | ||
background: #fff; | ||
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; | ||
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; | ||
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; | ||
background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; | ||
background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; | ||
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; | ||
-webkit-background-size: 100% 32px; | ||
-moz-background-size: 100% 32px; | ||
-ms-background-size: 100% 32px; | ||
-o-background-size: 100% 32px; | ||
background-size: 100% 32px; | ||
-webkit-border-radius: 3px; | ||
-moz-border-radius: 3px; | ||
border-radius: 3px; | ||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); | ||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); | ||
box-shadow: 0 1px 2px rgba(0,0,0,0.07); | ||
} | ||
|
||
.notepad::before { | ||
content: ''; | ||
position: absolute; | ||
width: 4pt; | ||
top: 0; | ||
left: 30pt; | ||
bottom: 0; | ||
border: 1px solid; | ||
border-color: transparent #efe4e4; | ||
} | ||
|
||
.notepad .page p { | ||
font-size: 21px !important; | ||
margin: 0 0; | ||
} | ||
|
||
.notepad .page p:before { | ||
content: ''; | ||
display: inline-block; | ||
width: 8px; | ||
height: 8px; | ||
margin-bottom: 3px; | ||
margin-right: 5px; | ||
margin-left: 1px; | ||
} | ||
|
||
.notepad .page p.recognizing:before { | ||
-moz-border-radius: 4px; | ||
-webkit-border-radius: 4px; | ||
border-radius: 4px; | ||
background-color: #EF7575; | ||
} | ||
|
||
.notepad .page p span.recognizing { | ||
font-weight: bold; | ||
color: #666; | ||
background-color: #fffafa; | ||
} | ||
|
||
.recorder button { | ||
width: 40px; | ||
height: 40px; | ||
} | ||
|
||
.recorder button i { | ||
vertical-align: middle; | ||
font-size: 18px; | ||
} | ||
|
||
.recorder button.active { | ||
color: #f05f5a; | ||
} | ||
|
||
.recorder button.active:disabled { | ||
color: #F0A8A6; | ||
} | ||
|
||
#record-button { | ||
float: right; | ||
} | ||
|
||
#clear-button { | ||
} | ||
|
||
.kill { | ||
display: none; | ||
} | ||
|
||
#purge-button { | ||
|
||
color:red; | ||
} | ||
#voice { | ||
background-color: #ECECEC; | ||
width: 22%; | ||
font-style: oblique; | ||
height: 40px; | ||
font-weight: 633; | ||
transition-duration: 4s; | ||
transition-timing-function: ease-out; | ||
} | ||
|
||
#voice:hover { | ||
background-color: #ECECEC; | ||
width: 32%; | ||
font-style: oblique; | ||
height: 40px; | ||
font-weight: 633; | ||
transition-duration: 4s; | ||
transition-timing-function: ease-out; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div class="recorder"> | ||
<div id="notepad" class="notepad"> | ||
<div id="notepad-page" class="page"></div> | ||
</div> | ||
<button class="active" id="interim-button" onclick="onInterimButtonClicked()"> | ||
<i class="fa fa-exchange" aria-hidden="true"></i> | ||
</button> | ||
<button id="clear-button" onclick="onClearButtonClicked()"> | ||
<i class="fa fa-eraser" aria-hidden="true"></i> | ||
</button> | ||
<button id="record-button" onclick="onRecordButtonClicked()"> | ||
<i class="fa fa-microphone" aria-hidden="true"></i> | ||
</button> | ||
<button id="purge-button" onclick="onPurgeButtonClicked()"> | ||
<i class="fa fa-eraser" aria-hidden="true"></i> | ||
</button> | ||
<button id="play-button"> | ||
<i class="fa fa-play" aria-hidden="true"></i> | ||
</button> | ||
|
||
<label style="display=none;" class="kill">Volume | ||
<input type="number" id="volume" value="1"></input> | ||
</label> | ||
|
||
<label style="display=none;" class="kill">Rate | ||
<input type="number" id="rate" value="1"></input> | ||
</label> | ||
|
||
|
||
<label style="display=none;" class="kill">Pitch | ||
<input type="number" id="pitch" value="1"></input> | ||
</label> | ||
|
||
<label> | ||
<select id="voice"></select> | ||
</label> | ||
</div> | ||
|
||
<div id="dialog" title="Hi"> | ||
<p>You can begin to record now, please close me.</p> | ||
</div> | ||
|
||
<div id="dialog2" title="Hi"> | ||
<p>You've stopped to record, you're free to play, delete (grey eraser), or purge your work (red eraser).</p> | ||
</div> | ||
|
||
|
||
<script type="text/javascript"> | ||
|
||
|
||
$( function() { | ||
$( "#dialog" ).dialog({ | ||
autoOpen: false, | ||
show: { | ||
effect: "blind", | ||
duration: 1000 | ||
}, | ||
hide: { | ||
effect: "explode", | ||
duration: 1000 | ||
} | ||
}); | ||
|
||
$( "#opener" ).on( "click", function() { | ||
$( "#dialog" ).dialog( "open" ); | ||
}); | ||
} ); | ||
|
||
</script> | ||
|
||
<script type="text/javascript"> | ||
|
||
|
||
$( function() { | ||
$( "#dialog2" ).dialog({ | ||
autoOpen: false, | ||
show: { | ||
effect: "blind", | ||
duration: 1000 | ||
}, | ||
hide: { | ||
effect: "explode", | ||
duration: 1000 | ||
} | ||
}); | ||
|
||
$( "#opener" ).on( "click", function() { | ||
$( "#dialog2" ).dialog( "open" ); | ||
}); | ||
} ); | ||
|
||
</script> | ||
|
||
<script type="text/javascript"> | ||
|
||
var recognizing = false | ||
var recognition = new webkitSpeechRecognition(); | ||
recognition.continuous = true | ||
recognition.interimResults = true | ||
|
||
var sentenceEl = null | ||
|
||
recognition.onstart = function() { | ||
sentenceEl = document.createElement("p") | ||
sentenceEl.classList.add("recognizing") | ||
document.getElementById("notepad-page").appendChild(sentenceEl) | ||
document.getElementById("interim-button").disabled = true | ||
document.getElementById("clear-button").disabled = true | ||
document.getElementById("record-button").classList.add("active") | ||
document.getElementById("record-button").disabled = false | ||
|
||
recognition.lang = "en-US"; | ||
recognition.start(); | ||
recognizing = true; | ||
} | ||
|
||
recognition.onresult = function (event) { | ||
sentenceEl.innerHTML = "" | ||
for (var i = event.resultIndex; i < event.results.length; ++i) { | ||
var result = event.results[i] | ||
var el = document.createElement("span") | ||
el.textContent = result[0].transcript | ||
sentenceEl.appendChild(el) | ||
el.classList.add(result.isFinal ? "recognized" : "recognizing") | ||
} | ||
} | ||
|
||
recognition.onerror = function(event) { | ||
alert(event.error) | ||
} | ||
|
||
recognition.onend = function() { | ||
recognizing = false | ||
if (sentenceEl) if (sentenceEl.hasChildNodes()) { | ||
sentenceEl.classList.remove("recognizing") | ||
sentenceEl.classList.add("recognized") | ||
} else { | ||
sentenceEl.parentElement.removeChild(sentenceEl) | ||
} | ||
document.getElementById("record-button").classList.remove("active") | ||
document.getElementById("record-button").disabled = false | ||
document.getElementById("clear-button").disabled = false | ||
document.getElementById("interim-button").disabled = false | ||
} | ||
|
||
function onInterimButtonClicked() { | ||
recognition.interimResults = !recognition.interimResults | ||
var button = document.getElementById("interim-button") | ||
if (recognition.interimResults) { | ||
button.classList.add("active") | ||
} else { | ||
button.classList.remove("active") | ||
} | ||
} | ||
|
||
function onClearButtonClicked() { | ||
var pageEl = document.getElementById("notepad-page") | ||
while (pageEl.hasChildNodes()) { | ||
pageEl.removeChild(pageEl.firstChild) | ||
} | ||
} | ||
|
||
|
||
function onPurgeButtonClicked() { | ||
var pageEl = document.getElementById("notepad-page") | ||
pageEl.innerHTML = '' | ||
} | ||
|
||
|
||
function onRecordButtonClicked() { | ||
document.getElementById("record-button").disabled = true | ||
if (recognizing) { | ||
recognition.stop(); | ||
$( "#dialog2" ).dialog( "open" ); | ||
|
||
} else { | ||
recognition.lang = "en-US"; | ||
recognition.start(); | ||
recognizing = true; | ||
$( "#dialog" ).dialog( "open" ); | ||
} | ||
} | ||
document.addEventListener('DOMContentLoaded', function() { | ||
onRecordButtonClicked(); | ||
|
||
}, false); | ||
</script> | ||
<script> | ||
var message = new SpeechSynthesisUtterance($("#notepad-page").val()); | ||
var voices = speechSynthesis.getVoices(); | ||
|
||
|
||
$("input").on("change", function () { | ||
console.log($(this).attr("id"), $(this).val()); | ||
message[$(this).attr("id")] = $(this).val(); | ||
}); | ||
|
||
$("select").on("change", function () { | ||
message.voice = voices[$(this).val()]; | ||
}); | ||
|
||
$("#play-button").on("click", function () { | ||
speechSynthesis.speak(message); | ||
}); | ||
|
||
//workaround | ||
|
||
var interval = setInterval(function () { | ||
voices = speechSynthesis.getVoices(); | ||
if (voices.length) clearInterval(interval); else return; | ||
|
||
for (var i = 0; i < voices.length; i++) { | ||
$("select").append("<option value=\"" + i + "\">" + voices[i].name + "</option>"); | ||
} | ||
}, 10); | ||
</script> | ||
|
||
</body> | ||
|
||
|
||
</html> |
Oops, something went wrong.