Nutzung der honey-speaker Komponente

Beispiele zur Benutzung

Das ist das Vorwort zum Text. Es folgt ein Lautsprecher in der Ausprägung pure.

Buttontext Vorlesen

Newsfeeder Beispiel

Nachrichtentext Beispiel

1. Artikel

Das ist ein Beispieltext von einem ersten DOM Element der vorzulesen ist. Der Text symbolisiert den ersten Zeitungsartikel. Das ist der Text eines Buttons welcher sich im Paragraph befindet und auch vorgelesen wird. Dies ist der Text welcher nach dem Button im Paragraph folgt.

2. Artikel

Das ist der Text eines zweiten DOM Elementes. Er symbolisiert den 2. Zeitungsartikel.

Ändern der Audio Parameter

Tonhöhe

  <honey-speaker id="pitch0"  textids="vorwort" title="pitch0 (Höhe 0.1)"
                audiopitch="0.1"></honey-speaker>
  <honey-speaker id="pitch1"  textids="vorwort" title="pitch1 (Höhe 1 = default)"
                audiopitch="1"></honey-speaker>
  <honey-speaker id="pitch2"  textids="vorwort" title="pitch2 (Höhe 2 :-) )"
                audiopitch="2"></honey-speaker>

Geschwindigkeit

  <honey-speaker id="rate0"  textids="vorwort" title="rate0 (Rate 0.1)"
                audiorate="0.1"></honey-speaker>
  <honey-speaker id="rate1"  textids="vorwort" title="rate1 (Rate 1 = default)"
                audiorate="1"></honey-speaker>
  <honey-speaker id="rate2"  textids="vorwort" title="rate2 (Rate 2 :-) )"
                audiorate="2"></honey-speaker>

Lautstärke

  <honey-speaker id="vol0"  textids="vorwort" title="vol0 (Volume 0.1)"
                audiovolume="0.1"></honey-speaker>
  <honey-speaker id="vol1"  textids="vorwort" title="vol1 (Volume 0.5)"
                audiovolume="0.5"></honey-speaker>
  <honey-speaker id="vol2"  textids="vorwort" title="vol2 (Volume 1 = default)"
                audiovolume="1"></honey-speaker>

Stimme nach Sprache

  <honey-speaker id="lang0"  textids="vorwort" title="lang0 (Lang de-DE)"
                audiolang="de-DE"></honey-speaker>
  <honey-speaker id="lang1"  textids="vorwort" title="lang1 (Lang en-US)"
                audiolang="en-US"></honey-speaker>
  <honey-speaker id="lang2"  textids="vorwort" title="lang2 (Lang ru-RU)"
                audiolang="ru-RU"></honey-speaker>

Stimme nach Namen

  <honey-speaker id="name0"  textids="vorwort" title="name0 (Voice Google Deutsch)"
                voicename="Google Deutsch"></honey-speaker>
  <honey-speaker id="name1"  textids="vorwort" title="name1 (Voice Google US English)"
                voicename="Google US English"></honey-speaker>
  <honey-speaker id="name2"  textids="vorwort" title="name2 (Voice Google русский)"
                voicename="Google русский"></honey-speaker>

Styling der Komponente

Globale Definitionen um alle Komponenten identisch zu stylen

  /* <style> set all speaker at page to defaults of component via :root */
    :root {
      --honey-speaker-background: transparent;
      --honey-speaker-color: blue;
      --honey-speaker-padding: 5px;
      --honey-speaker-font-size: medium;
      --honey-speaker-border: 0;
      --honey-speaker-width: 36px;
      --honey-speaker-height: 36px;
    }

Styling über css class und custom properties verändert

  # part of style sheet

    #css1 {
      --honey-speaker-color: gray;
    }

    .css2class {
      --honey-speaker-color: red;
      --honey-speaker-background: #E8CD9A;
    }

    #css3 {
      --honey-speaker-color: green;
    }
    .css3class {
      --honey-speaker-background: #E8CD9A;
    }

  # part of html

    <honey-speaker id="css1" textids="artikel2"></honey-speaker>
    <honey-speaker textids="artikel2" class="css2class"></honey-speaker>
    <honey-speaker id="css3" textids="artikel2" class="css3class"></honey-speaker>

Speaker Größe und Farben verändert

  /* part of css */
 #s10x10 {
    --honey-speaker-height: 10px;
    --honey-speaker-width: 10px;
    --honey-speaker-background: #E8CD9A;
  }
  #s20x20 {
    --honey-speaker-height: 20px;
    --honey-speaker-width: 20px;
    --honey-speaker-color: red;
    --honey-speaker-background: LightBlue;
  }
  #s30x30 {
    --honey-speaker-height: 30px;
    --honey-speaker-width: 30px;
    --honey-speaker-color: black;
    --honey-speaker-background: yellow;

  }
  #s40x50 {
    --honey-speaker-height: 40px;
    --honey-speaker-width: 50px;
    --honey-speaker-color: yellow;
    --honey-speaker-background: LightGreen;
  }
  #s50x60 {
    --honey-speaker-height: 50px;
    --honey-speaker-width: 60px;
    --honey-speaker-color: cyan;
    --honey-speaker-background: #E8CD9A;
  }
  #s100x100 {
    --honey-speaker-height: 100px;
    --honey-speaker-width: 100px;
    --honey-speaker-color: gray;
    --honey-speaker-background: #E8CD9A;
  }
  #s100x100transparent {
    --honey-speaker-height: 100px;
    --honey-speaker-width: 100px;
    --honey-speaker-color: gray;
  }
  #s90x100 {
    --honey-speaker-height: 90px;
    --honey-speaker-width: 100px;
    --honey-speaker-color: brown;
    --honey-speaker-background: #E8CD9A;
  }
  #s50x100 {
    --honey-speaker-height: 50px;
    --honey-speaker-width: 100px;
    --honey-speaker-color: green;
    --honey-speaker-background: #E8CD9A;
  }

<honey-speaker id="s10x10" textids="artikel2"       ></honey-speaker>
<honey-speaker id="s20x20" textids="artikel2"       ></honey-speaker>
<honey-speaker id="s30x30" textids="artikel2"       ></honey-speaker>
<honey-speaker id="s40x50" textids="artikel2"       ></honey-speaker>
<honey-speaker id="s50x60" textids="artikel2"       ></honey-speaker>
<honey-speaker id="s100x100" textids="artikel2"       ></honey-speaker>
<honey-speaker id="s100x100transparent" textids="artikel2"       ></honey-speaker>
<honey-speaker id="s90x100" textids="artikel2"       ></honey-speaker>
<honey-speaker id="s50x100" textids="artikel2"       ></honey-speaker>