Instantly share code, notes, and snippets.

Embed
What would you like to do?
The code for the IBM Developer UK word counter tutorial
<!DOCTYPE html>
<html>
<head>
<title>Simple Mic Streamer</title>
<style>
{{{payload.styles}}}
</style>
</head>
<body>
<h1>Sean's Friendly Word Counting Assistant</h1>
<button id="toggle" data-state="stopped">Start</button>
<script>
{{{payload.script}}}
</script>
</body>
</html>
(function(){
'use strict';
let ws = createWebSocket('wss://' + window.location.host + '/ws/audio');
bindWebSocketEvents(ws);
function createWebSocket(URL){
console.log('Attempting to establish WS connection to:', URL);
return new WebSocket(URL);
}
function bindWebSocketEvents(WS){
ws.addEventListener('open', function(){
console.log('WS connection established');
}, false);
ws.addEventListener('message', function(msg){
console.log('WS message:', msg);
}, false);
ws.addEventListener('error', function(err){
console.log('WS error:', err);
}, false);
ws.addEventListener('close', function(e){
console.log('WS connection closed:', e);
ws = createWebSocket('wss://' + window.location.host + '/ws/audio');
bindWebSocketEvents(ws);
});
}
const button = document.querySelector('button');
let mR;
const constraints = {
video : false,
audio : true
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream){
mR = new MediaRecorder(stream);
mR.start();
setInterval(function(){
mR.ondataavailable = function(e){
console.log(e.data);
if(button.dataset.state === 'started'){
console.log('Sending to server:', e.data);
if(ws.readyState === 1){
ws.send(e.data);
}
}
}
mR.stop();
mR = new MediaRecorder(stream);
mR.start();
}, 5000);
})
.catch(function(err){
console.log('Media stream err:', err);
})
;
button.addEventListener('click', function(){
this.dataset.state = this.dataset.state === 'stopped' ? 'started' : 'stopped';
this.textContent = this.dataset.state === 'stopped' ? 'Start' : 'Stop';
}, false);
}());
/*
* {
background: blue;
}*/
body{
display: flex;
flex-direction: column;
align-items: center;
font-family: sans-serif;
}
#toggle{
width: 200px;
padding: 1em;
border: 1px solid black;
border-radius: 10px;
cursor: pointer;
font-weight: 800;
font-size: 1em;
outline: 0 solid transparent;
}
#toggle[data-state="started"]{
color: white;
border-color: red;
background: #ff7878;
animation: pulse 2.5s infinite;
-moz-animation: pulse 2.5s infinite;
-webkit-animation: pulse 2.5s infinite;
-o-animation: pulse 2.5s infinite;
}
@keyframes pulse{
0% {opacity:1; }
50% {opacity: 0.5; }
100% {opacity: 1; }
}
@-moz-keyframes pulse{
0% {opacity:1; }
50% {opacity: 0.5; }
100% {opacity: 1; }
}
@-webkit-keyframes pulse{
0% {opacity:1; }
50% {opacity: 0.5; }
100% {opacity: 1; }
}
@-o-keyframes pulse{
0% {opacity:1; }
50% {opacity: 0.5; }
100% {opacity: 1; }
}
This is all of the code needed to follow the IBM Developer UK word counter tutorial.
const MAX_WORDS_ALLOWED = 185;
const ALLOWANCE = 40;
const WINDOW_TRANSCRIPTS = context.get('audio') || [];
const data = {
time : Date.now() | 0,
words : msg.transcription.split(' ')
};
WINDOW_TRANSCRIPTS.push(data);
const MINUTE_TRANSCRIPT_WINDOW = WINDOW_TRANSCRIPTS.filter(datum => {return (Date.now() | 0) - datum.time < 60000 });
context.set('audio', MINUTE_TRANSCRIPT_WINDOW);
const WORDS_COUNTED = MINUTE_TRANSCRIPT_WINDOW.reduce( (acc, data) => {
console.log('COUNT!:', acc, data);
return acc + data.words.length
}, 0 );
const TIME_ELAPSED = (MINUTE_TRANSCRIPT_WINDOW[MINUTE_TRANSCRIPT_WINDOW.length - 1].time) - MINUTE_TRANSCRIPT_WINDOW[0].time;
const MULT_FACTOR = (60000 / TIME_ELAPSED);
const WORDS_SPOKEN = WORDS_COUNTED * MULT_FACTOR;
const NB = `EST: ${WORDS_SPOKEN} COUNTED: ${WORDS_COUNTED} TIME ELAPSED: ${TIME_ELAPSED}`;
console.log(NB);
msg.NB = NB;
if(WORDS_SPOKEN > MAX_WORDS_ALLOWED){
msg.payload = '#0000ff';
} else if(WORDS_SPOKEN > MAX_WORDS_ALLOWED - ALLOWANCE){
msg.payload = '#ffff00';
} else {
msg.payload = '#00ff00';
}
msg.words_spoken = WORDS_SPOKEN === Infinity ? 0 : WORDS_SPOKEN;
return msg;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment