Smart Clock (Voice Control)

Voice-controlled 7-segment smart clock (zh-TW Web Speech API) on QuickUI 0.6.2: shows time, date, year, seconds and runs spoken countdowns.

Overview

Item	Value
Created	2024-12-20
Category	App & Platform Examples
HTML files	`index.html`
Source	target/20241220

Live Preview

Open the example in a new tab

Page Sections

Section	Description
Clock (#timer.timer)	Four div.number digits of 7 span segments each plus a div.colon; digits render from data-value.
Hint (section.bottom)	Lists supported commands: 顯示當前日期／年份／時間／秒數、計時xx分鐘、計時xx秒.

Interactions

In QUI when.rendered: if webkitSpeechRecognition is missing, alert('此瀏覽器不支援語音識別功能'); otherwise start continuous zh-TW recognition with interim results.
onresult debounces 500ms, then matches keywords: 現在/當前時間 → setTime, 年份 → setYear, 日期 → setDate, 秒數 → setSec (each refreshed every 1s by setInterval).
'計時N分鐘' / '計時N秒' parsed by regex start setCountDown; '停止' stops; other speech of 2+ chars and onerror/onend show a face (setFace: eyes + mouth).

Dependencies

Name	Version	Source
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
QuickUI (@pardnchiu/quickui)	0.6.2	https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@0.6.2/dist/QuickUI.js
Google Analytics (gtag.js)	-	https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX
Noto Sans / Noto Sans TC (font-family only)	-	declared in SCSS; no font stylesheet linked
Web Speech API (webkitSpeechRecognition)	-	browser built-in

Styling

Item	Value
SCSS entry	`sass/index.scss`
Output CSS	`css/index.css`
Partials	`_init.scss`, `function/_hsbTohsl.scss`

_init holds the reset; function/_hsbTohsl provides hsb()/hsba(). index.scss sizes the clock with --width: calc(100vw / 40), --height and --triHeight, and toggles segment opacity per [data-value] (0-9, '-', eye, mouth/none for the colon).

cd target/20241220
npx sass sass/index.scss css/index.css --no-source-map || exit 1

Techniques

Pure-CSS 7-segment digits: span:nth-child segments shown via [data-value] attribute selectors; viewport-relative sizing with CSS vars.
JS writes element.dataset.value only; no DOM rebuilding.
Web Speech API with debounce (setTimeout) and setInterval refresh; regex extraction of countdown length.

External Assets

https://pardn.io/image/head.png (favicon), https://pardn.io/web-template/image/20241220.jpg (og/twitter image), canonical/og:url https://pardn.io/web-template/target/20241220