Paste this link into the OBS Browser Source: https://honath.github.io/no-talking-timer/
This is a basic timer to be used as an OBS Browser Source - it is set to a default time of 5 minutes, and for the duration of the time, a timer and an image is displayed. When the timer ends, the timer and image is hidden again.
NOTICE: Pressing the 'Start'
button while the timer is already running will restart the timer!
Feel free to add this as a browser source and use it inside of your own streams.
You can change the configuration by forking and cloning this repository -
change the "MINUTES" variable in the script.js
file to the amount of minutes of your choosing,
and then host the document on whichever hosting service you prefer. I am using GitHub.
You can view how to add a browser source to OBS here.
- Width: 500
- Height: 1080
- This was designed to be placed over a webcam at the bottom of the screen, so that the button is hidden off-screen.
- You do not need to have the actual web page open in a tab - instead,
right click
on theBrowser Source
inside of yourScene
. Then, clickInteract
and OBS will open a new, small window with the'Start'
button visible and clickable. You can use this instead of an open window or tab in your browser, and is my recommendation. - Feel free to use custom CSS in the source properties. The image and timer are inside of an element with a class of
.wrapper
- you should be able to select it from there, and move it around if needed. - Learn more about CSS at W3Schools.com
You can change the font for all elements using custom CSS. Here is the styling for the font + its selector:
* {
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color: #fff;
-webkit-text-stroke: 2px black;
}
#start {
font-size: 5rem;
width: 500px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -250px;
top: 50%;
color: #000;
border: none;
}
- ./ (Root folder)
- index.html (Document structure)
- style.css (Styling for entire document)
- script.js (Manages display of the primary element and function of the timer)
- ./images/ (Folder for containing any images)
- shush.jpg (Image used in browser source)
- README.md (This README document)
- Fix broken links within README to be displayed on GitHub
- Made the wording more clear on line 3 in README
- Added a table of contents
- Added disclaimer under Usage line 22 in README
- Added a link back to the top of this README, at the bottom.
- General link improvements in README
- Slight changes to the README
- Timer interval was not clearing properly after timer finished. This should be resolved now.
- Initial release
- Features 5 minute timer
- Timer is hidden initially - is visible after "Start" button is pressed, until the timer ends
- Add a "Pause" button
- Add a "Stop" button
- Make buttons prettier
- Make "hush" image danker
Please report any bugs as an issue here on GitHub - suggestions are also welcome.