# iandevlin/speechapi-examples architecture

> Architecture diagram of the GitHub repository iandevlin/speechapi-examples, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/iandevlin/speechapi-examples
- Repository: https://github.com/iandevlin/speechapi-examples

## Overview

This repository is a small Web Speech API example for controlling an HTML5 video by voice. A user starts or stops recognition with page controls; recognized, sufficiently confident commands are mapped to video playback, seeking, volume, and mute actions, with matching command feedback. The JavaScript excerpt supports the recognition and control flow; the HTML-to-script and page-to-video wiring is not shown, so those links are omitted.

Main entry points: [`speechapi-video/js/video-speech.js`](https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/js/video-speech.js) (Voice controller), [`speechapi-video/index.html`](https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/index.html) (Example page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_example["Video voice control"]
  node_page["Example page<br/>[index.html]"]
  node_controller["Voice controller<br/>[video-speech.js]"]
  node_player["Video player<br/>[index.html]"]
  node_media["Bundled video<br/>[big-buck-bunny.mp4]"]
end

subgraph group_browser["Browser capabilities"]
  node_recognition["Speech recognition"]
end

node_user(("User"))

node_user -->|"uses controls"| node_page
node_controller -->|"starts and stops"| node_recognition
node_recognition -->|"returns results"| node_controller
node_controller -->|"controls playback"| node_player
node_controller -->|"highlights commands"| node_page

click node_page "https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/index.html"
click node_controller "https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/js/video-speech.js"
click node_player "https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/index.html"
click node_media "https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/video/big-buck-bunny.mp4"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page,node_controller,node_player,node_media,node_user toneBlue
class node_recognition toneAmber
```

## Components

### Video voice control

- [Example page](https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/index.html): `speechapi-video/index.html`
- [Voice controller](https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/js/video-speech.js): `speechapi-video/js/video-speech.js`
- [Video player](https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/index.html): `speechapi-video/index.html`
- [Bundled video](https://github.com/iandevlin/speechapi-examples/blob/master/speechapi-video/video/big-buck-bunny.mp4): `speechapi-video/video/big-buck-bunny.mp4`

### Browser capabilities

- **Speech recognition**

### Other components

- **User**

## Connections

- User → Example page: uses controls
- Voice controller → Speech recognition: starts and stops (evidence: `speechapi-video/js/video-speech.js`)
- Speech recognition → Voice controller: returns results (evidence: `speechapi-video/js/video-speech.js`)
- Voice controller → Video player: controls playback (evidence: `speechapi-video/js/video-speech.js`)
- Voice controller → Example page: highlights commands (evidence: `speechapi-video/js/video-speech.js`)