Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 439f64f

Browse files
day 21
1 parent 9375796 commit 439f64f

File tree

9 files changed

+203
-1
lines changed

9 files changed

+203
-1
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
3636
| [Day 17](./each%20day%20build%20day!/Day%2017/) | [Mouseover Shadow](./each%20day%20build%20day!/Day%2017/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2017/README.md/) |
3737
| [Day 18](./each%20day%20build%20day!/Day%2018/) | [Custom sorting names](./each%20day%20build%20day!/Day%2018/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2018/README.md/) |
3838
| [Day 19](./each%20day%20build%20day!/Day%2019/) | [Reducing time](./each%20day%20build%20day!/Day%2019/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2019/README.md/) |
39-
| [Day 20](./each%20day%20build%20day!/Day%2020/) | [Sticky Nav](./each%20day%20build%20day!/Day%2020/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2020/README.md/) |
39+
| [Day 20](./each%20day%20build%20day!/Day%2020/) | [Sticky Nav](./each%20day%20build%20day!/Day%2020/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2020/README.md/) |
40+
| [Day 21](./each%20day%20build%20day!/Day%2021/) | [Speech Recognition](./each%20day%20build%20day!/Day%2021/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2021/README.md/) |
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
एक्सीडेंट कॉल ने जीता
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
3+
<input type="button" class="btn" onclick="convertToTextFile()" value="download">
4+
5+
<script defer="" src="main.js"></script>
6+
<!-- Code injected by live-server -->
7+
<script type="text/javascript">
8+
// <![CDATA[ <-- For SVG support
9+
if ('WebSocket' in window) {
10+
(function () {
11+
function refreshCSS() {
12+
var sheets = [].slice.call(document.getElementsByTagName("link"));
13+
var head = document.getElementsByTagName("head")[0];
14+
for (var i = 0; i < sheets.length; ++i) {
15+
var elem = sheets[i];
16+
var parent = elem.parentElement || head;
17+
parent.removeChild(elem);
18+
var rel = elem.rel;
19+
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
20+
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
21+
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
22+
}
23+
parent.appendChild(elem);
24+
}
25+
}
26+
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
27+
var address = protocol + window.location.host + window.location.pathname + '/ws';
28+
var socket = new WebSocket(address);
29+
socket.onmessage = function (msg) {
30+
if (msg.data == 'reload') window.location.reload();
31+
else if (msg.data == 'refreshcss') refreshCSS();
32+
};
33+
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
34+
console.log('Live reload enabled.');
35+
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
36+
}
37+
})();
38+
}
39+
else {
40+
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
41+
}
42+
// ]]>
43+
</script>
44+
45+
<p>hi I am Suraj</p><p>turn off this app</p><p>want to download this</p>
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
train ki jagah
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>डाउनलोड बोलना साइंस</p><p>नेशनल मेडिकल</p><p></p>

‎each day build day!/Day 21/README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Speech to File
2+
3+
Many of you would not that you can use speechrecognition right in your browser well only `chrome` and `edge` browser I was also astonished to find <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition"> this </a>while going through mdn docs. This technology is experimental but is fun to play with.
4+
So, I decided to make something playful with it. It has two main features as of now
5+
- listen to user speak and print on the screen
6+
- option to download the spoken words as a txt (later I will add docx/pdf etc)
7+
- It also prompts to download the file if you say `download the transcript`
8+
- it supports all BCP 47 languages
9+
10+
# Challenges
11+
- SpeechRecognition api
12+
- DOM manipulation
13+
14+
# demo
15+
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
bugs
2+
- unable to save multilines
3+
- speech detection is slow
4+
5+
6+
features
7+
- option to select languages
8+
- save in multiple format

‎each day build day!/Day 21/index.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Speech to File app 📁</title>
8+
9+
</head>
10+
11+
<body>
12+
<h1>Speech to text 🎤 </h1>
13+
<div class="editor" contenteditable></div>
14+
15+
<input type="button" class="btn" onclick="convertToTextFile()" value ="download">
16+
17+
<style>
18+
html {
19+
font-size: 10px;
20+
}
21+
22+
body {
23+
background: #1c7ae6;
24+
font-family: 'helvetica neue';
25+
font-weight: 200;
26+
font-size: 20px;
27+
}
28+
h1{
29+
margin: auto 38%;
30+
}
31+
.editor {
32+
max-width: 500px;
33+
margin: 50px auto;
34+
background: white;
35+
border-radius: 5px;
36+
box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
37+
padding: 1rem 2rem 1rem 5rem;
38+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
39+
background-size: 100% 3rem;
40+
position: relative;
41+
line-height: 3rem;
42+
}
43+
44+
p {
45+
margin: 0 0 3rem;
46+
}
47+
48+
.editor:before {
49+
content: '';
50+
position: absolute;
51+
width: 4px;
52+
top: 0;
53+
left: 30px;
54+
bottom: 0;
55+
border: 1px solid;
56+
border-color: transparent #efe4e4;
57+
}
58+
59+
.btn{
60+
61+
margin:5px 45%;
62+
63+
}
64+
65+
66+
</style>
67+
<script defer src="main.js"></script>
68+
</body>
69+
70+
</html>

‎each day build day!/Day 21/main.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
let p = document.createElement('p');
2+
const words = document.querySelector('.editor');
3+
words.appendChild(p);
4+
5+
6+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
7+
8+
const recognition = new SpeechRecognition();
9+
recognition.interimResults = true;
10+
recognition.lang = 'hi-IN';
11+
12+
13+
// eventlistener on recognition object
14+
recognition.addEventListener('result', e => {
15+
const transcript = Array.from(e.results)
16+
.map(result => result[0])
17+
.map(result => result.transcript)
18+
.join('');
19+
20+
21+
//add some easter eggs
22+
const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
23+
p.textContent = poopScript;
24+
25+
if (e.results[0].isFinal) {
26+
p = document.createElement('p');
27+
words.appendChild(p);
28+
}
29+
30+
if(transcript.includes('download this')){
31+
console.log('download')
32+
convertToTextFile();
33+
}
34+
35+
});
36+
37+
38+
recognition.addEventListener('end', recognition.start);
39+
40+
recognition.start();
41+
42+
43+
44+
function convertToTextFile(mimeType) {
45+
const text = document.querySelector('.editor p').innerHTML;
46+
47+
console.log(text)
48+
const filename = `transcript-no-` + Math.round(Math.random() * 1000) + '.txt';
49+
let link = document.createElement('a');
50+
mimeType = mimeType || 'text/plain';
51+
if (navigator.msSaveBlob) { // IE 10+
52+
navigator.msSaveBlob(new Blob([text], { type: mimeType + ';charset=utf-8;' }), filename);
53+
} else {
54+
55+
link.setAttribute('download', filename);
56+
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(text));
57+
link.click();
58+
}
59+
60+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /