{"id":13797865,"url":"https://github.com/Hagsten/Talkify","last_synced_at":"2025-05-13T04:32:28.367Z","repository":{"id":40383453,"uuid":"44667520","full_name":"Hagsten/Talkify","owner":"Hagsten","description":"Javascript Text to speech library","archived":false,"fork":false,"pushed_at":"2023-10-20T10:12:50.000Z","size":686,"stargazers_count":229,"open_issues_count":6,"forks_count":34,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-04T14:08:37.965Z","etag":null,"topics":["javascript","text-to-speech","tts","voice"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hagsten.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-10-21T09:58:18.000Z","updated_at":"2025-04-21T11:14:25.000Z","dependencies_parsed_at":"2024-01-15T11:10:47.487Z","dependency_job_id":null,"html_url":"https://github.com/Hagsten/Talkify","commit_stats":{"total_commits":291,"total_committers":4,"mean_commits":72.75,"dds":0.03436426116838487,"last_synced_commit":"50be023cbd0fb4e4501237ee1cf2c5a1dc32cf7f"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hagsten%2FTalkify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hagsten%2FTalkify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hagsten%2FTalkify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hagsten%2FTalkify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hagsten","download_url":"https://codeload.github.com/Hagsten/Talkify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253877030,"owners_count":21977629,"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","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":["javascript","text-to-speech","tts","voice"],"created_at":"2024-08-04T00:00:35.276Z","updated_at":"2025-05-13T04:32:27.228Z","avatar_url":"https://github.com/Hagsten.png","language":"JavaScript","readme":"# Talkify\nA javascript text to speech (TTS) library. Originally from and used by https://talkify.net.\n\nGive a voice to your website in a matter of minutes. Talkify library provides you with high quality text to speech (TTS) voices in many languages.\n\nTo use our backend services (our hosted voices) you will require an api-key. Visit our portal (https://manage.talkify.net) to create your own API-key, Talkify offers 1000 free requests per month. \n\n* [Install](#installation)\n* [Dependencies](#dependencies)\n* [Usage](#usage)\n* [Features](#features)\n* [SSML](#ssml)\n* [Configuration](#configuration)\n* [API](#api)\n    * [Playlist](#playlist-fluent-builder)\n    * [Players](#player-valid-for-all-players)\n    * [Form reader](#formreader)\n    * [Text selection reader](#text-selection-reader)\n* [Events](#pubsub-events)\n\n## Installation\n```\n$ bower install talkify\n```\n\nor\n\n```\n$ npm install talkify-tts\n```\n\n# Dependencies\nFont Awesome 5+ (Used in Talkify Control Center)\n\n# Usage\n\n## Quick demos\n- Web Reader http://jsfiddle.net/5atrbjc6/\n- Form Reader http://jsfiddle.net/dx53bg6k/2/ \n- Text selection Reader http://jsfiddle.net/t5dbcL64/\n- Enhanced text visibility http://jsfiddle.net/pwbqkzxj/2/\n\n## Include the scripts and stylesheets\n### Minified version\n```html\n\u003cscript src=\"talkify.min.js\"\u003e\u003c/script\u003e\n```\n### Non-minified version\n```html\n\u003cscript src=\"talkify.js\"\u003e\u003c/script\u003e\n```\n\n### Stylesheets\nYou find our stylesheets under /styles folder. Include the stylesheets that you need (i.e. all under /modern-control-center for our \"modern\" UI).\n\n## Play all, top to bottom\n```javascript\t\t\n    var player = new talkify.TtsPlayer().enableTextHighlighting();\n\n    var playlist = new talkify.playlist()\n        .begin()\n        .usingPlayer(player)\n        .withTextInteraction()\n        .withElements(document.querySelectorAll('p')) //\u003c--Any element you'd like. Leave blank to let Talkify make a good guess\n        .build();\n    \n    playlist.play();\n```\n\n## Play simple text\n\n```javascript\nvar player = new talkify.TtsPlayer(); //or new talkify.Html5Player()\nplayer.playText('Hello world');\n```\n\n# Features\n- High qualiy voices (https://manage.talkify.net/docs#voices)\n- Supported languages:\n    - English\n    - Chinese\n    - Swedish\n    - German\n    - Korean\n    - Japanese\n    - Spanish\n    - French\n    - Italian\n    - Norweigean\n    - Danish\n    - Arabic\n    - Russian\n    - Dutch\n    - Polish\n    - Turkish\n    - Icelandic\n    - Portuguese\n    - Romanian\n    - Welsh\n    - Ukranian\n    - Slovak\n    - Bulgarian\n    - Czech\n    - Greek\n    - Finnish\n    - Hebrew\n    - Hindi\n    - Croatian\n    - Hungarian\n    - Indonesian\n    - Malay\n    - Slovenian\n    - Tamil\n    - Telugu\n    - Thai\n    - Vietnamese\n    - And more!\n  \n- Text highligting for easy read along\n- Control pitch, pauses between words, volume, speech rate, phonation and much more \n- Download as mp3\n- Playback of entire website or paragraph/s of your choice\n- Fully integrated UI options\n- Read web forms aloud\n- Listen to selected text\n- Enhanced visibility features\n\n## SSML\n```javascript\ntalkify.config.useSsml = true;\n```\n\nWhen useSSML is active, Talkify will translate the following markup into SSML. This has the potential of creating a smoother voice experience.\n\n| HTML tags | SSML |\n|----------|:------ |\n| h1 - h3 | emphasis strong |\n| b | emphasis strong |\n| strong | emphasis strong |\n| i | emphasis reduced |\n| em | emphasis strong |\n| br | break-strength strong |\n\n## Declarative settings\nThese settings are only supported by the TtsPlayer for now.\n\nTalkify supports declarative settings. These settings will override general settings. The following attributes can be added to any element that Talkify is connected to. When these attributes are present, Talkify will use them as playback settings.\n\n| data-attribute | Accepted values | Example | Remarks |\n|----------|:------ |:-------|:-------|\n| data-talkify-wordbreakms | [0, 10000] | data-talkify-wordbreakms=\"100\" ||\n| data-talkify-pitch | [-5, 5] | data-talkify-pitch=\"-2\" ||\n| data-talkify-rate | [-10, 10] | data-talkify-rate=\"-2\" ||\n| data-talkify-voice | Any authorized voice | data-talkify-voice=\"David\" ||\n| data-talkify-phonation | \"soft\", \"normal\" or \"\" | data-talkify-phonation=\"soft\" ||\n| data-talkify-whisper | \"true\" or \"false\" | data-talkify-whisper=\"true\" ||\n| data-talkify-whisper | \"true\" or \"false\" | data-talkify-whisper=\"true\" ||\n| data-talkify-read-as-lowercase | \"true\" | data-talkify-read-as-lowercase=\"true\"| Some voices spell out capital letters, which might be unwanted, this setting will read the content of the element as lower case |\n\n# Configuration\n```javascript\ntalkify.config = {\n    debug: false, //true to turn on debug print outs\n    useSsml: false, //true to turn on automatic HTML to SSML translation. This should give a smoother reading voice (https://en.wikipedia.org/wiki/Speech_Synthesis_Markup_Language)\n    maximumTextLength: 5000, //texts exceeding this limit will be splitted into multiple requests\n    remoteService: {\n        host : 'https://talkify.net',\n        apiKey = 'your-api-key',\n        active: true //True to use Talkifys language engine and hosted voices. False only works for Html5Player.\n    },\n    ui:\n    {\n        audioControls: { //disable to provide your own player or use Talkify headless.\n            enabled: true,\n            controlcenter: \"modern\", //[\"modern\", \"classic\", \"local\", \"native\"]\n            container: document.body,\n            voicepicker: {\n                enabled: true, //Applicable on modern and classic control centers\n                filter: {\n                    byClass: [], //Not applicable for Html5Player,  example: [\"Standard\", \"Premium\", \"Exclusive\", \"Neural\"]\n                    byCulture: [], //example: [\"en-EN\", \"en-AU\"]\n                    byLanguage: [] //Not applicable for Html5Player, example: [\"English\", \"Spanish\"]\n                }\n            }\n        }\n    },\n    keyboardCommands: { //Ctrl + command\n        enabled: false,\n        commands: { // Configure your own keys for the supported commands\n            playPause: 32,\n            next: 39,\n            previous: 37\n        }\n    },\n    voiceCommands: {\n        enabled: false,\n        keyboardActivation: { //Ctrl + command\n            enabled: true,\n            key: 77\n        },\n        commands: { // Configure your own phrases for the supported commands\n            playPause: [\"play\", \"pause\", \"stop\", \"start\"],\n            next: [\"play next\", \"next\"],\n            previous: [\"play previous\", \"previous\", \"back\", \"go back\"]\n        }\n    },\n    formReader: {\n        voice: null, //TTS voice name if remote service otherwise Web Speech API voice object\n        rate: 0, //See possible values for each tyoe of player down below\n        remoteService: true,\n        //Below is the default texts for the form.\n        requiredText: \"This field is required\",\n        valueText: \"You have entered {value} as: {label}.\",\n        selectedText: \"You have selected {label}.\",\n        notSelectedText: \"{label} is not selected.\"\n    },\n    autoScroll: {\n        offsetpx: 100 //number of pixels offset from window top\n    }\n}\n```\n\n# API\n[WebReader demo](http://jsfiddle.net/5atrbjc6/)\n\nTalkify lives in its own namespace - talkify. Hence, everything below is scoped to that namespace (i.e. talkify.playlist, etc).\n\n## Auto scroll\nTalkify provides an opt in auto scroll to the item to be played. \n\nActivate the feature by calling talkify.autoScroll.activate()\n\n| Method   | \n| activate |\n\n## Playlist fluent builder\nPlaylist builder is Talkifys way to instantiate your playlist. It comes with a fluent API.\t\n\nEntry point: talkify.playlist()\n\n| Method   | Parameters | Default |      Description      |  Mandatory |\n|----------|:------ |:------|:-------------|------:|\n| begin |  | |  Entry point. Call this to start building your playlist | Yes |\n| usingPlayer | TtsPlayer/Html5Player  | |   Specify which player to be used. |   Yes |\n| withTextInteraction | | | Enables you to click on paragraphs (and other text) to play |    No |\n| withElements | DOM elements | | Specifies with elements to play. If omitted, Talkify will crawl the page and select for you |    No |\n| excludeElements | Array of DOM-elements | [] | For example: document.querySelectorAll(\"button\") | No |\n| withTables | Table configuration, array of objects* | | Reads tables in a more intuitive way. The relevant header is repeated before each cell | No |\n| withRootSelector | string | 'body' | Sets the scope from where Talkify will start to crawl the page for text to play |    No |\n| subscribeTo | Json object | | Event subscriptions |    No |\n| build | | | Finalizes and creates the playlist instance |    Yes |\n\n*withTables parameter is an array of objects with the following properties: \n- table (DOM-query selector or actual DOM-elements)\n- headerCells (Optional. DOM-query selector or actual DOM-elements. Defaults to \"th\")\n- bodyCells (Optional. DOM-query selector or actual DOM-elements. Defaults to \"td\")\n\nwithTables works with any standard HTML-table and other non-standard tabular content (for example bootstrap grid system). For non standard tabular content, please use the optional parameters to tell Talkify which elements are header cells and which are body cells.\n\n## Playlist\nThis is the instance built from the playliste above.\n\n| Method   | Parameters | Default |      Description      |\n|----------|:------ |:------|:-------------|\n| getQueue | | | Returns the playlist queue |\n| play | | | Begins playback of playlist |\n| pause | | | Pauses playlist |\n| replayCurrent | | | Replays the current item in the playlist |\n| insert | DOM element | | Inserts new html elements to play. Useful for elements that Talkify were unable to locate. Elements will be inserted in correct order with respect to the page. |\n| isPlaying | | | True if any item is currently in a playing state |\n| setPlayer | TtsPlayer/Html5Player | | Sets the player that the playlist is using |\n| enableTextInteraction | | | Enables click to play on HTML elements |\n| disableTextInteraction | | | Disables click to play on HTML elements |\n| dispose | | | Clean up |\n\n### Playlist Events\n| Event   |\n|---------|\n| onEnded |\n| onVoiceCommandListeningStarted |\n| onVoiceCommandListeningEnded |\n\n## Player (valid for all players)\n| Method   | Parameters | Default |      Description      |\n|----------|:------ |:------|:-------------|\n| enableTextHighlighting | | | Tells the player to use text highlighting. For Html5Player this only works on localVoice. |\n| disableTextHighlighting | | | Turns off text highlighting. |\n| subscribeTo | Json object | | Event listeners |\n| playText | string | | Plays a text |\n| paused | | | True if paused |\n| isPlaying | | | True if playing |\n| play | | | Play |\n| pause | | | Pause |\n| forceVoice | object | | For Talkify hosted voices, this is a JSON object with a name property. The value of name should be the name of a voice from /api/speech/v1/voices. For browser voices, this is the actual voice from window.speechSynthesis.getVoices() |\n| enableEnhancedTextVisibility | | | Enables enhanced text visibility. Subtitle-bar, with a larger font-size, is added to the bottom of the screen. [Demo](http://jsfiddle.net/pwbqkzxj/2/) |\n| disableEnhancedTextVisibility | | | Disables enhanced text visibility |\n\n### Html5Player only\nEntry point: talkify.Html5Player().\n\n| Method   | Parameters | Default |      Description      |\n|----------|:------ |:------|:-------------|\n| forceLanguage | string | | Force the usage of a specific language. Use standard cultures like se-SE for Swedish and so on. Talkify will select a voice that matches the culture. |\n| setRate | double | 1 | [0.0, 2.0] Playback rate. |\n| setVolume | double | 1 | [0.0 - 1.0 ] |\n| usePitch | double | 1 | [0.0, 2.0] Adjusts the pitch of the voice. |\n\n### Talkify hosted only\nEntry point: talkify.TtsPlayer(options?).\n\nconstructor parameter \"options\" is optional.  Example { controlcenter: { container: document.querySelector('p.selector') , name: 'modern' }}\n\n| Method   | Parameters | Default |      Description      |\n|----------|:------ |:------|:-------------|\n| setRate | int | 1 | Playback rate. A value between -5 and 5 |\n| whisper | | | Sets the player to whispering mode |\n| normalTone | | | Sets the player to normal mode (opposite of whispering) |\n| usePhonation | string | normal | Supports for two phonations. \"soft\" and \"normal\". Empty string translates to \"normal\". Case sensitive |\n| useWordBreak | int | 0 | [0-10000] Adds a break between each word. Any value above 0 adds to the voices standard break length. |\n| usePitch | int | 0 | [-10 - +10] Adjusts the pitch of the voice. |\n| useVolumeBaseline | double | 0 | [-10 - +10] Adjusts the volume baseline |\n\n### Player Events\n| Event   |\n|---------|\n| onBeforeItemPlaying |\n| onSentenceComplete |\n| onPause |\n| onPlay | \n| onResume |  \n| onItemLoaded |\n| onTextHighligtChanged |\n\n## FormReader\n[Demo](http://jsfiddle.net/dx53bg6k/2/ )\n\nExample: talkify.formReader.addForm(document.getElementById(\"form-id\"));\n\n| Method   | Parameters | Default |      Description      |\n|----------|:------ |:------|:-------------|\n| addForm   | form element | None |   Adds TTS functionality to the form.         |\n| removeForm   | form element | None |  Unbinds all TTS functionality from the form         |\n\n## Text selection reader\n[Demo](http://jsfiddle.net/t5dbcL64/)\n\nThis feature allows the user to select/mark text using the mouse and have that text read aloud.\n\nExample: \n\n```javascript\n    talkify.selectionActivator\n        .withTextHighlighting()\n        .withEnhancedVisibility()\n        .activate();\n```\n\n| Method   | Parameters | Default |      Description      |\n|----------|:------ |:------|:-------------|\n| activate | - | - | Call this method to actiate the feature  |\n| deactivate | - | - | Call this method to deactivate the feature   |\n| withTextHighlighting | - | - | Presets text highlighting to activated. Users can turn this off in the control center UI |\n| withEnhancedVisibility | - | - | Presets enhanced visibility to activated. Users can turn this off in the control center UI |\n| withVoice | voice object | { name: 'Zira' } |  A voice object from our backend voice API or at the very least an object wih a name property including a valid voice name  |\n| withButtonText | string | \"Listen\" | The text that appears on popover button  |\n| excludeElements | Array of DOM-elements | [] | For example: document.querySelectorAll(\"button\") |\n\n## React to events\nTLDR; Example @ http://jsfiddle.net/andreas_hagsten/x6pve0jd/8/\n\nTalkify provides two event models - PubSub and classic callbacks. The newest, and primary, model is the PubSub model. PubSub is a loosly coupled model which enables client applications to hook in to the Talkify pipeline. To subscribe to events you will need to pass a context key (used when unsubscribing) as well as the event type and the event handler function. The event type is a string containing topics. An event is normally divided into 4 topics - context, origin, type and action.\n\n### The Context topic\nYou would use this top level topic if you run multiple instances of Talkify. This allows you to hook into a specific Talkify instance. If you want to listen to all instances or only have one just specify \"*\". You will find the context ID in the property \"correlationId\" of your Player instance.\n\n### The Origin topic\nWhere the event originates from. For example \"player\" or \"controlcenter\". A common use case is to listen to player events which is done by specifying \"player\" in this topic section.\n\n### The type topic\nType of event. For example \"tts\" for TTS-based events. \n\n### The action topic\nThis is the topic that describes what action is taken. This can be \"play\", \"loading\", \"pause\" and so forth.\n\nPutting all 4 topics together forms the event type to listen to. You can replace any part with the wildcard \"*\" which means that you listens to all events of the given topic.\n\nA few examples can be seen below. A full list of events supported is listed [Here](#PubSub-events).\n\n```javascript\ntalkify.messageHub.subscribe(\"[key]\", \"*\", function () {}); //all events\ntalkify.messageHub.subscribe(\"[key]\", \"*.player.tts.play\", function () {}); //play events from TtsPlayer\ntalkify.messageHub.subscribe(\"[key]\", \"*.player.tts.*\", function () {}) //all events from TtsPlayer\ntalkify.messageHub.subscribe(\"[key]\", \"*.player.*.play\", function () {}) //Play events from all player types\n```\n\n## PubSub events\n| Type | args (TBD) |\n|----------|:------ |\n| {contextId}.player.tts.ratechanged |  |\n| {contextId}.player.tts.seeked |  |\n| {contextId}.player.tts.pause |  |\n| {contextId}.player.tts.timeupdated |  |\n| {contextId}.player.tts.play |  |\n| {contextId}.player.tts.resume |  |\n| {contextId}.player.tts.loading |  |\n| {contextId}.player.tts.loaded |  |\n| {contextId}.player.tts.ended |  |\n| {contextId}.player.tts.voiceset |  |\n| {contextId}.player.tts.texthighlight.enabled |  |\n| {contextId}.player.tts.texthighlight.disabled |  |\n| {contextId}.player.tts.prepareplay |  |\n| {contextId}.player.tts.disposed |  |\n| {contextId}.player.tts.error |  |\n| {contextId}.player.tts.phonationchanged |  |\n| {contextId}.player.tts.whisperchanged |  |\n| {contextId}.player.tts.wordbreakchanged |  |\n| {contextId}.player.tts.volumechanged |  |\n| {contextId}.player.tts.pitchchanged |  |\n| {contextId}.player.tts.created |  |\n| {contextId}.player.tts.unplayable |  |\n| {contextId}.player.tts.enhancedvisibilityset | |\n| {contextId}.player.tts.creating | |\n| - | - |\n| {contextId}.player.html5.ratechanged |  |\n| {contextId}.player.html5.pause |  |\n| {contextId}.player.html5.utterancecomplete |  |\n| {contextId}.player.html5.ended |  |\n| {contextId}.player.html5.loaded |  |\n| {contextId}.player.html5.play |  |\n| {contextId}.player.html5.timeupdated |  |\n| {contextId}.player.html5.voiceset |  |\n| {contextId}.player.html5.texthighlight.enabled |  |\n| {contextId}.player.html5.texthighlight.disabled |  |\n| {contextId}.player.html5.prepareplay |  |\n| {contextId}.player.html5.created |  |\n| {contextId}.player.html5.unplayable |  |\n| {contextId}.player.html5.enhancedvisibilityset | |\n| {contextId}.player.html5.creating | |\n| - | - |\n| {contextId}.controlcenter.request.play |  |\n| {contextId}.controlcenter.request.pause |  |\n| {contextId}.controlcenter.request.rate |  |\n| {contextId}.controlcenter.request.volume |  |\n| {contextId}.controlcenter.request.pitch |  |\n| {contextId}.controlcenter.request.wordbreak |  |\n| {contextId}.controlcenter.request.phonation.normal |  |\n| {contextId}.controlcenter.request.phonation.soft |  |\n| {contextId}.controlcenter.request.phonation.whisper |  |\n| {contextId}.controlcenter.request.texthighlightoggled |  |\n| {contextId}.controlcenter.request.textinteractiontoggled |  |\n| {contextId}.controlcenter.request.enhancedvisibility | |\n| {contextId}.controlcenter.attached | |\n| {contextId}.controlcenter.detached | |\n| - | - |\n| {contextId}.wordhighlighter.complete |  |\n| - | - |\n| {contextId}.playlist.playing |  |\n| {contextId}.playlist.loaded |  |\n| {contextId}.playlist.textinteraction.enabled |  |\n| {contextId}.playlist.textinteraction.disabled |  |\n# License\nGPLv3\n","funding_links":[],"categories":["Speech Synthesis"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHagsten%2FTalkify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHagsten%2FTalkify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHagsten%2FTalkify/lists"}