This component realize an speaker symbol button. Its can read a text of DOM elements referenced by an list of ids via voice.
npm install --save honey-speaker
<script
type="module"
src='https://unpkg.com/@huluvu424242/[email protected]/dist/honey-speaker/honey-speaker.js'>
</script>To the demo site
Vision of API (under construction)
<honey-speaker textids="text1,text2"></honey-speaker>
<p id="text1">fizz fizz fizz fizz</p>
<p id="text2">buzz buzz buzz buzz</p>To the live demo
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
- bug and feature description
- issue 43 minor bugfixing and refactoring
- issue 39 text splitting removed
- issue 35 change host classes depends of disabled or enabled
- issue 33 A11y config properties added
- issue 32 sync method call and symbol fixed
- issue 26 method pause and resume added
- issue 25 remove dependency of rxjs -> use fetch of es6
- issue 24 remove subscription and use async/await pairs
- issue 23 mutable attributes textids and texturl
- issue 17 reading text from url added
- initializing of voices fixed
- issue 2 e2e tests fixed
- css support of ::part removed (to complex for end user)
- a11y: tabindex=0, keydown: space and enter, role="button", alt text, svg role="img"
- speaker realized as toggle button
- custom css attribute names changed
- docu and demo urls fixed
- support of voice parameter
- support for large texts added
- defined css variables supported
- css ::part supported for speakerpane
- svg embed - no extra assets needed
- sizeable via css
- color of background, stroke and fill css styleable
- ident property computed from id attribute or random if absent
- example added
- stencil/core removed from bundle again (no storybook support at now)
- stencil/core added to bundle
- readme updated
- icon color blue
- background color attribute added
- first working version with icon.
- support of id list of speaker texts.
- try to publish assets with component to npmjs.com but failed.
- setup project based at https://github.com/ionic-team/stencil-component-starter rating-stencil-component
- https://auth0.com/blog/creating-web-components-with-stencil/
- https://www.twilio.com/blog/2018/02/creating-and-publishing-web-components-with-stencil.html
- https://stenciljs.com/docs/introduction
- https://css-tricks.com/styling-a-web-component/
- https://meowni.ca/posts/part-theme-explainer/
no warranty
MIT License
Firefox
Maybe you must via about:config set media.webspeech.synth.enabled to true
Generell
Firefox
Maybe you must via about:config set the layout.css.shadow-parts.enabled to true.
Generell