<ed-speech> component

Support

The Speech Recognition API is only available in Chrome and Safari, your data is sent to server to do the text to speech task.

Usage

<ed-speech lang="en" answer="Hello">
  Say «Hello».
</ed-speech>

As in every ed-component, you can use Markdown as content.

<ed-speech lang="en" answer="heat">
  Say **heat** and not _it_.
</ed-speech>

As in every ed-component, you can use Markdown as content.

<ed-speech lang="es" answer="j">
  Pronuncia la lettra «j» en español
</ed-speech>

Credits

Benson Ruan Blog

API

Generated with @custom-elements-manifest

`ed-speech/src/EdSpeech.ts`:

class: `EdSpeechElement`

Superclass

Name	Module	Package
`HTMLElement`

Static Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`define`			`tagName`

Fields

Name	Privacy	Type	Default	Description	Inherited From
`lang`
`isHTML`
`innerHTML`			`` ` <style>

:host {
  display: block;       --bs-alert-bg: transparent;       --bs-alert-padding-x: 1rem;       --bs-alert-padding-y: 1rem;       --bs-alert-margin-bottom: 1rem;       --bs-alert-color: inherit;       --bs-alert-border-color: transparent;       --bs-alert-border: var(--border-size-1) solid var(--gray-1);       --bs-alert-border-radius: var(--border-radius-3);       --bs-alert-link-color: inherit;
}
main {
  display: flex;
}     #mic-button {
  background-color: var(--red-5);
  color: white;
  &.recording {
    background-color: initial;
    color: initial;
  }
  &.error {
    &::before {
      content: "!";
    }
    
  }
}

.question {
  font-size: var(--font-size-fluid-1, max(1.5rem,min(6vw,2.5rem)));
  font-weight: var(--font-weight-5, 500);
  flex-basis: 100%;
}
.alert {
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
  &.warning {          --bs-alert-color: var(--orange-5);          --bs-alert-bg: var(--orange-1);          --bs-alert-border-color: var(--orange-3);          --bs-alert-link-color: var(--orange-1mic-butt)mic-buuton;
  }
  &.success {         --bs-alert-color: var(--blue-5);          --bs-alert-bg: var(--blue-1);          --bs-alert-border-color: var(--blue-3);          --bs-alert-link-color: var(--blue-1);
  }
}
.final {
    font-weight: var(--font-weight-8);
  }
  .interim {
    color: var(--blue-5);
  }     </style>     <div id="info"></div>     <main>       <p class="question" aria-description="question"></p>       <button id="mic-button" style="display: none;">         <!-- from bootstrap icons -->         <svg class="mic" aria-label="Start microphone" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
      fill="currentColor" viewBox="0 0 16 16">           <title>Mic</title>           <path
        d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" />           <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z" />         </svg>         </button>         <button id="submit">Submit</button>     </main>     <div id="results">           <p id="final-result" class="final"></p>           <p id="interim-result" class="interim"></p>     </div>     ` `` |             |                |

Methods

Name	Privacy	Parameters
`showInfo`	private	`s: string`
`_handleClick`	private	`evt: Event`
`_handleResponse`	private	`evt: Event`

Events

Name	Type	Description	Inherited From
`edEvent`	`CustomEvent`

Attributes

Name	Field	Inherited From
`question`
`lang`
`isHTML`

<hr/>

Playground for <ed-speech> component

Settings

Live preview

html

<ed-speech></ed-speech>

preview