{"id":18300399,"url":"https://github.com/jpdevries/jquery-speakable","last_synced_at":"2025-10-06T00:51:11.154Z","repository":{"id":28200846,"uuid":"31703182","full_name":"jpdevries/jquery-speakable","owner":"jpdevries","description":"Easily make HTML elements speakable with this jQuery plugin.","archived":false,"fork":false,"pushed_at":"2015-03-05T10:54:11.000Z","size":176,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T09:35:38.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpdevries.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-05T08:18:10.000Z","updated_at":"2015-12-19T15:45:02.000Z","dependencies_parsed_at":"2022-08-02T11:02:45.817Z","dependency_job_id":null,"html_url":"https://github.com/jpdevries/jquery-speakable","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jpdevries/jquery-speakable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fjquery-speakable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fjquery-speakable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fjquery-speakable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fjquery-speakable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpdevries","download_url":"https://codeload.github.com/jpdevries/jquery-speakable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Fjquery-speakable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278542676,"owners_count":26004061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T15:12:13.038Z","updated_at":"2025-10-06T00:51:11.130Z","avatar_url":"https://github.com/jpdevries.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-speakable\nEasily make HTML elements speakable with this jQuery plugin.\n\nSometimes you need to make your HTML talk. Maybe this is for Accesibility Best Practices, maybe it's just for fun. Whatever your reasons may be `jquery.speakable.js` is ready to help you spill the beans.\n\n### Dependencies\n`jquery.speakable.js` requires:\n - `jQuery`\n - `window.speechSynthesis` support\n \n### Usage\n```html\n\u003ch1 class=\"speakable\"\u003eHello World\u003c/h1\u003e\n\u003ch2 class=\"speakable\"\u003e\u003cspan data-enunciate=\"You Only Live Once\"\u003eYOLO\u003c/span\u003e\u003c/h2\u003e\n\u003ch2 class=\"speakable\" data-transcript=\"fred-story\" data-voice=\"Fred\"\u003eWant to hear a story?\u003c/h2\u003e\n  \u003cp id=\"fred-story\"\u003eThis is a story by \u003cstrike muted\u003eFrank \u003c/strike\u003eFred.\u003c/p\u003e\n\u003cscript\u003e\n$('.speakable').each(function(){\n  $(this).speakable().click(function(){\n    $(this).data('plugin_speakable').speak();\n  });\n});\n\u003c/script\u003e\n```\n\n`speakable.jquery.js` simple gives your jQuery Objects the ability to speak. This is done by first calling `.speakable()` on your elements; then using the `data('plugin_speakable').speak()` method when it is time to talk.\n\n### Settings\nOption | Type | Default | Description\n------ | ---- | ------- | -----------\n`voice` | `String` | `\"Vicki\"` | Voice to be used by [`speechSynthesis` api](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#speechsynthesisvoice). See [demo](http://codepen.io/matt-west/full/wGzuJ).\n`lang` | `String` | `\"en-US\"` | Language to be used by [`speechSynthesis` api](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#utterance-attributes).\n`transcript` | `String` | null | ID of Element to be read aloud, or a `String` to read aloud.\n`tidyTranscript` | `Boolean` | `true` | Whether or not to tidy transcripts in preparation to be spoken. See [Considerations](#Considerations).\n`text` | `String` | null | Manually set transcript to be spoken. If set, `transcript` Setting will be ignored.\n`rate` | `Number` | null | Optionally set [rate of speech](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#dfn-utterancerate) as a value between `0.1` and `10`.\n`pitch` | `Number` | null | Optionally set [pitch fo speech](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#dfn-utterancepitch) as a value between `0` and `2`.\n`volume` | `Number` | null | Optionally set [volume of speech](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#dfn-utterancevolume) as a value between `0` and `1`.\n`unspeakable` | `String` | `'[muted]'` | Used with `jQuery.find` to select and remove unspeakable elements. Set to `null` or `false` to disable\n`enunciate` | `String` | `'enunciate'` | Data attribute used for enunciation considerations.\n\n`voice`, `lang`, `transcript`, `text`, `rate`, `pitch`, and `volume`, Settings can also be set via `data-voice`, `data-lang`, `data-transcript`, `data-text`, `data-rate`, `data-pitch`, and `data-volume`,  attributes respectively. When present these data attribues will override settings passed to `.speakable()`.\n\n### Events\nAll events settings are passed directly along to the [`speechSynthesis api`](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#utterance-events).\n\nEvent | Description | \n------| ----------- | \n`onstart` | Fired when this utterance has begun to be spoken.\n`onend` | Fired when this utterance has completed being spoken. If this event fires, the error event must not be fired for this utterance.\n`onerror` | Fired if there was an error that prevented successful speaking of this utterance. If this event fires, the end event must not be fired for this utterance.\n`onpause` | Fired when and if this utterance is paused mid-utterance.\n`onresume` | Fired when and if this utterance is resumed after being paused mid-utterance. Adding the utterance to the queue while the global SpeechSynthesis instance is in the paused state, and then calling the resume method does not cause the resume event to be fired, in this case the utterance's start event will be called when the utterance starts.\n`onboundary` | Fired when the spoken utterance reaches a word or sentence boundary. The user agent must fire this event if the speech synthesis engine provides the event.\n\n### Considerations\nWhen a transcript is prepared to be spoken it is first processed allowing for the following considerations.\n\nAttribute | Description |\n--------- | ----------- |\n`data-enunciate` | Text to read aloud rather than `innerHTML`\n`muted` | Ensures the element, and any children are never spoken of\n\nExample\n```html\n\u003ch3 class=\"speakable\" data-transcript=\"story\"\u003eListen to this\u003c/h3\u003e\n\u003cp id=\"story\"\u003e\n  \u003cspan data-enunciate=\"You Only Live Once\"\u003eYOLO\u003c/span\u003e. This is a \u003cspan muted\u003emade up \u003c/span\u003e story.\n\u003c/p\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Fjquery-speakable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpdevries%2Fjquery-speakable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Fjquery-speakable/lists"}