@huluvu424242/honey-speaker v0.0.18

honey-speaker

This component realize an speaker symbol button. Its can read a text of DOM elements referenced by an list of ids via voice.

installation

npm install --save honey-speaker

usage

<script 
    type="module" 
    src='https://unpkg.com/@huluvu424242/honey-speaker@0.0.18/dist/honey-speaker/honey-speaker.js'>
</script>

To the demo site

Vision of API (under construction)

demo

<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

become an supporter

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

releaselog

v0.0.18 unpublished

• bug and feature description

v0.0.18 published at 2020-11-22

• issue 43 minor bugfixing and refactoring

v0.0.17 published at 2020-11-16

• issue 39 text splitting removed

v0.0.16 published at 2020-11-15

• issue 35 change host classes depends of disabled or enabled
• issue 33 A11y config properties added
• issue 32 sync method call and symbol fixed

v0.0.15 published at 2020-11-08

• 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

v0.0.14 published at 2020-11-06

• issue 17 reading text from url added

v0.0.13 published at 2020-11-06

• 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

v0.0.12 published at 2020-02-29

• docu and demo urls fixed

v0.0.11 published at 2020-02-29

• support of voice parameter

v0.0.10 published at 2020-02-28

• 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)

v0.0.9 published at 2020-02-23

• stencil/core added to bundle

v0.0.8

• readme updated
• icon color blue
• background color attribute added

v0.0.7

• first working version with icon.
• support of id list of speaker texts.

v0.0.2 - v0.0.6

• try to publish assets with component to npmjs.com but failed.

v0.0.1

• setup project based at https://github.com/ionic-team/stencil-component-starter rating-stencil-component

internet links

• 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/

warranty

no warranty

license

MIT License

technology used

• Web Speech API
• Custom Elements
• CSS Custom Properties
• Shadow Parts

browser support

Web Speech API

Firefox

Maybe you must via about:config set media.webspeech.synth.enabled to true

Generell

• Can I use with browsers?

Custom Elements

• Can I use with browsers?

CSS Custom Properties

• Can I use with browsers?

Shadow Parts

Firefox

Maybe you must via about:config set the layout.css.shadow-parts.enabled to true.

Generell

• Can I use with browsers?