11 KiB
Studio 
This was originally a project to create a studio style clock you would find in a radio or television studio.
Once the basic clock was designed I decided to add an indicator for if the microphone is muted or not, as the browser does not have access to the audio panel it polls the microphone looking for sound and reports when sound is detected as an green ACTIVE status and red MUTED when it does not detect sound. Your browser should prompt you for access to the microphone to perform this check, my browser only presents the default microphone but there is a drop down in case more than one is available to it.
As the clock is designed for a studio status I also included a green LIVE and red OFF AIR status indicator, this polls https://decapi.me/twitch/uptime/${streamer} on page load and every 60 seconds there after to checks if offline is contained within the response, if it is the status will report a red OFF AIR.
As different iterations were made a text box to type the streamers handle was added, to handle if there are any errors the script will also check if Error is returned (if the streamer does not exist the website will respond [Error from Twitch API] 400: Bad Request - Malformed query params.) and will respond with a yellow ERROR status indicator.
If Error and offline are not detected it will respond with a green LIVE status indicator (the website returns how long the stream has been live at the point it is checked, such as 1 hour, 17 minutes, 45 seconds). If the streamer is live then the script polls https://decapi.me/twitch/game/${streamer} to get the current category and place this below the LIVE status indicator, it then passes this to https://static-cdn.jtvnw.net/ttv-boxart/ to obtain the box art Twitch presents and place this below the category.
You can find information on the different iterations and testing below along with some documentation on how you can personalise the page to make it your own. If you find any of this useful and would like to buy us a coffee please use the link at the top of this page.
Clock
A studio style clock with coloured dots at five minute intervals, showing the date and time.
To change the 5 minute interval dot colour update the stroke on row 32 to your desired colour:
stroke: #228B22;
To change the seconds interval dot colour update the stroke on row 36 to your desired colour:
stroke: #880808;
To change the time and date colour update the fill on row 64:
fill: #FF0000;
font-size: 62pt;
font-family: play, sans-serif;
text-anchor: middle;
letter-spacing: -0.05em;
}
To change the time and date font update the font-family on row 66:
font-family: play, sans-serif;
If you would like seporate colours, sizes, or fonts for the time and date you will need to split the above into two:
svg .hours.minutes, svg .seconds {
fill: #FF0000;
font-size: 62pt;
font-family: play, sans-serif;
text-anchor: middle;
letter-spacing: -0.05em;
}
svg .date {
fill: #FF0000;
font-size: 62pt;
font-family: play, sans-serif;
text-anchor: middle;
letter-spacing: -0.05em;
}
Mic Check
A webpage to check if sound is being recieved from your mic or not.
This code will check if audio is being detected, not if the microphone is muted. It uses the MediaStream API to get access to the user's microphone and listens for audio data using the AnalyserNode interface. If audio is being detected, the volume variable will be greater than the threshold value. If no audio is detected then MUTED is displayed, when audio is detected ACTIVE is displayed on the page.
Hard Coded Stream Status
Display whether a Twitch streamer is online or offline using decapi.
To change the stream being monitored update row 37 to your desired Twitch streamers handle:
https://decapi.me/twitch/uptime/<Twitch_Streamer>
To poll more/less frequently update row 56 to your desired interval in milliseconds (default to once a minute):
setInterval(checkStatus, 60000)
Selected Streamer Stream Status
Display whether a Twitch streamer is online or offline using decapi, users can enter their own stream to monitor.
To change the default stream being monitored update value= on row 72 to your desired Twitch streamers handle:
<input type="text" id="streamer" value="<Twitch_Streamer>">
To poll more/less frequently update row 62 to your desired interval in milliseconds (default to once a minute):
}, 60000);
Studio Dashboard V1
This web page combines Clock, Mic Check, and Selected Streamer Stream Status to display a studio clock in the main body of the page, and a mic/stream indicators on the right of the page.
To change the 5 minute interval dot colour update the stroke on row 156 to your desired colour:
stroke: #228B22;
To change the seconds interval dot colour update the stroke on row 161 to your desired colour:
stroke: #880808;
To change the time and date colour update the fill on row 193:
fill: #FF0000;
To change the time and date font update the font-family on row 195:
font-family: play, sans-serif;
To change the default stream being monitored update value= on row 234 to your desired Twitch streamers handle:
<input type="text" id="streamer" class="" value="<Twitch_Streamer>"><br>
To poll more/less frequently update row 322 to your desired interval in milliseconds (default to once a minute):
}, 60000);
To hide the mic selector and streamer selector update their class to hidden on rows 230:
<select id="mic-select" class="hidden"></select>
234 and 235:
<input type="text" id="streamer" class="hidden" value="CJ_Games_Live"><br>
<button id="streamer-conf" class="hidden" onclick="updateStatus()">Confirm</button>
Studio Dashboard V2
This web page combines Clock, Mic Check, and Selected Streamer Stream Status to display a studio clock in the main body of the page, and a mic/stream indicators on the right of the page. V2 also adds a button to show or hide the mic select and streamer inputs.
To change the 5 minute interval dot colour update the stroke on row 206 to your desired colour:
stroke: #228B22;
To change the seconds interval dot colour update the stroke on row 211 to your desired colour:
stroke: #880808;
To change the time and date colour update the fill on row 243:
fill: #FF0000;
To change the time and date font update the font-family on row 245:
font-family: play, sans-serif;
To change the default stream being monitored update value= on row 289 to your desired Twitch streamers handle:
<input type="text" id="streamer" class="hidden" value="<Twitch_Streamer>" style="display: none;">
To poll more/less frequently update row 376 to your desired interval in milliseconds (default to once a minute):
}, 60000);
Studio Dashboard V3.2
This web page combines Clock, Mic Check, and Selected Streamer Stream Status to display a studio clock in the main body of the page, and a mic/stream indicators on the right of the page. There is a button to show or hide the mic select and streamer inputs. V3 adds the stream category and art to the dashboard.
Version 3.1 cleared up some of the CSS from version 3 and ensures the art work resizes with the window. Version 3.2 embeds the fonts in the webpage, changes some of the resizing fonts, and removes some superfluous code from previous iterations.
To change the 5 minute interval dot colour update the stroke on row 218 to your desired colour:
stroke: #4eff4e;
To change the seconds interval dot colour update the stroke on row 223 to your desired colour:
stroke: #FF0000;
To change the time and date colour update the fill on row 255:
fill: #FF0000;
To change the time and date font update the font-family on row 258:
font-family: 'LED Dot-Matrix', sans-serif;
If this font is removed you can also remove rows 4 and 8:
<link href="https://fonts.cdnfonts.com/css/led-dot-matrix" rel="stylesheet">
@import url('https://fonts.cdnfonts.com/css/led-dot-matrix');
To change the default stream being monitored update value= on row 305 to your desired Twitch streamers handle:
<input type="text" id="streamer" value="<Twitch_Streamer>" style="display: none;">
To poll more/less frequently update row 409 to your desired interval in milliseconds (default to once a minute):
}, 60000);
If you want to replace the Play font you will need to change rows 46, 76, 105, 111, 118, 142, 155, and 175:
font-family: 'Play', sans-serif;
You can also remove rows 5 and 9:
<link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
Large Screen
Small Screen
