https://github.com/luochang212/monaco-speech-editor
Online code editor for visually impaired people.
https://github.com/luochang212/monaco-speech-editor
accessibility audio blind blindness code-editor compiler impairment javascript monaco-editor online-editor router speech speech-synthesis web-application
Last synced: 2 months ago
JSON representation
Online code editor for visually impaired people.
- Host: GitHub
- URL: https://github.com/luochang212/monaco-speech-editor
- Owner: luochang212
- License: mit
- Created: 2019-08-10T12:09:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-12-03T15:08:05.000Z (6 months ago)
- Last Synced: 2025-12-06T19:54:57.853Z (6 months ago)
- Topics: accessibility, audio, blind, blindness, code-editor, compiler, impairment, javascript, monaco-editor, online-editor, router, speech, speech-synthesis, web-application
- Language: JavaScript
- Homepage: https://luochang212.github.io/gadget/monaco-speech-editor/
- Size: 10.1 MB
- Stars: 23
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# monaco-speech-editor
[](https://opensource.org/licenses/MIT)
[中文文档](https://github.com/luochang212/monaco-speech-editor/tree/master/docs)
Monaco Speech Editor is an online code editor for visually impaired people. It provides several built-in functions to make it easy to read, edit and compile.
## Quick Start
Try the editor out [on my website]( https://luochang212.github.io/gadget/monaco-speech-editor/).
## Run Locally
Since this web application was written with pure JS and didn't use any framework, it is easy to run locally.
First, download the repository.
```
git clone https://github.com/luochang212/monaco-speech-editor.git
```
Then, open `monaco-speech-editor`.
Now, click `index.html`, it will open in your browser.
## Features
File Manager:
- Create a file
- Delete a file
- Rename a file
- Upload a file
- Download a file
- Restore a file
Console:
- Display HTML file in an iframe
- Display HTML file in a new tab
- Display HTML file in a new window
- Display the output of console.log()
Themes:
- Day mode
- Night mode
Accessibility:
- Toolbar: Including Syntax highlighting, Jump to line, play previous line, Play current line, Play next line.
- Reading mode: Including Character Mode, Code Mode, Music Mode, Overview mode.
- Spotlight: It is a list of settings that allows you to turn on or turn off settings.
- Linear Index: It is a list of features and corresponding hotkeys.
## Initialize The Editor with Routers
If you are a visually impaired user, Please open the website above and add a router `#tutorial` after the address to play an audio tutorial automatically. PS: this audio might not be played on google chrome because of [the policy of google chrome](https://www.chromestatus.com/feature/5687444770914304).
If you are a person with normal vision, Please open the website above and add a router `#mute` to disable any autoplay event.
Complete list of routers
| Router | Setting |
| --------------- | ------------------------------------------------- |
| #load-demo | Load demo |
| #dark | Turn on night mode |
| #full-screen | Full screen |
| #run | Open console bar |
| #tutorial | Play audio tutorial |
| #spotlight | Turn on spotlight |
| #linear-index | Turn on linear index |
| #character-mode | Turn on character mode |
| #code-mode | Turn on code mode |
| #overview-mode | Turn on overview mode |
| #voice-feedback | Turn on voice feedback |
| #voice-cue | Turn on voice cue |
| #mute | Disable any autoplay event |
| #dark&run | Turn on night mode and console bar |
| #dark&mute | Turn on night mode and disable any autoplay event |
## Dependencies
- [Monaco Editor](https://github.com/microsoft/monaco-editor)
- [Web Speech API](https://w3c.github.io/speech-api/)
## FAQ
❓Is the editor supported in mobile browsers or mobile web app frameworks?
No, both Monaco Editor and Web Speech API can't work well on mobile browser.
❓How to use routers to configure the initial setting？
For example, If you open [https://luochang212.github.io/gadget/monaco-speech-editor/#dark&mute](https://luochang212.github.io/gadget/monaco-speech-editor/#dark&mute). Monaco Speech Editor will turn on night mode and disable any autoplay event for you.
## License
MIT License