@huluvu424242/honey-speech
Version:
Text to Speech component wich is reading texts from DOM elements.
461 lines (460 loc) • 13 kB
JavaScript
import { Component, Element, Event, h, Host, Listen, Prop, State } from "@stencil/core";
import { Sprachausgabe } from "../../libs/sprachausgabe";
import { Logger } from "../../libs/logger";
export class HoneySpeech {
constructor() {
/**
* true wenn das Tag ohne alt Attribute deklariert wurde
*/
this.createAltText = false;
/**
* true wenn das Tag ohne title Attribut deklariert wurde
*/
this.createTitleText = false;
/**
* taborder
*/
this.taborder = "0";
/**
* if the toggle button is pressed
*/
this.isPressed = false;
/**
* use pure speaker symbol for silence state
*/
this.pure = false;
/**
* enable console logging
*/
this.verbose = false;
/**
* icon width
*/
this.iconwidth = "36";
/**
* icon height
*/
this.iconheight = "36";
/**
* i18n language ident for Web Speech API: de-DE or en or de ...
*/
this.audiolang = "de-DE";
/**
* pitch for Web Speech API
*/
this.audiopitch = 1;
/**
* rate for Web Speech API
*/
this.audiorate = 1;
/**
* volume for Web Speech API
*/
this.audiovolume = 1;
/**
* voice name used of Web Speech API
*/
this.voicename = undefined;
}
connectedCallback() {
// States initialisieren
this.ident = this.hostElement.id ? this.hostElement.id : Math.random().toString(36).substring(7);
this.createTitleText = !this.hostElement.title;
this.createAltText = !this.hostElement["alt"];
this.taborder = this.hostElement.getAttribute("tabindex") ? (this.hostElement.tabIndex + "") : "0";
// Properties auswerten
Logger.toggleLogging(this.verbose);
}
componentWillLoad() {
this.sprachAusgabe = new Sprachausgabe(() => {
this.honeySpeakerStarted.emit(this.ident);
this.isPressed = true;
Logger.debugMessage("Vorlesen gestartet");
}, () => {
this.honeySpeakerFinished.emit(this.ident);
this.isPressed = false;
Logger.debugMessage("Vorlesen beendet");
}, () => {
this.honeySpeakerPaused.emit(this.ident);
this.isPressed = false;
Logger.debugMessage("Pause mit Vorlesen");
}, () => {
this.honeySpeakerResume.emit(this.ident);
this.isPressed = true;
Logger.debugMessage("Fortsetzen mit Vorlesen");
}, (ev) => {
this.honeySpeakerFailed.emit(this.ident);
this.isPressed = false;
Logger.errorMessage("Fehler beim Vorlesen" + JSON.stringify(ev));
}, this.audiolang, this.audiopitch, this.audiorate, this.audiovolume, this.voicename);
}
createNewTitleText() {
if (this.isPressed) {
return "Liest gerade vor";
}
else {
return "Vorlesen";
}
}
getTitleText() {
if (this.createTitleText) {
return this.createNewTitleText();
}
else {
return this.hostElement.title;
}
}
createNewAltText() {
if (this.isPressed) {
return "Symbol eines stummen Lautsprechers";
}
else {
return "Symbol eines tönenden Lautsprechers";
}
}
getAltText() {
if (this.createAltText) {
return this.createNewAltText();
}
else {
return this.hostElement.getAttribute("alt");
}
}
getTexte() {
if (this.textids) {
const refIds = this.textids.split(",");
const texte = [];
refIds.forEach(elementId => {
const element = document.getElementById(elementId);
if (element) {
texte.push(element.innerText);
}
else {
Logger.errorMessage("text to speak not found of DOM element with id " + elementId);
}
});
return texte;
}
else {
return ["Kein Text vorhanden, daher keine Ausgabe möglich."];
}
}
async textVorlesen(text) {
this.isPressed = true;
await this.sprachAusgabe.textVorlesen(text + " ");
}
toggleAction() {
Logger.debugMessage("###TOGGLE TO" + this.isPressed);
this.isPressed = !this.isPressed;
if (this.isPressed) {
const texte = this.getTexte();
texte.forEach(async (text) => {
this.textVorlesen(text);
});
}
else {
this.sprachAusgabe.cancel();
}
}
onClick() {
this.toggleAction();
}
onKeyDown(ev) {
if (ev.key === 'Enter' || ev.key === ' ') {
ev.preventDefault();
this.toggleAction();
}
}
render() {
Logger.debugMessage('##RENDER##');
return (h(Host, { title: this.getTitleText(), alt: this.getAltText(), role: "button", tabindex: this.taborder, "aria-pressed": this.isPressed ? "true" : "false" }, this.isPressed ? (h("svg", { id: this.ident + "-svg", xmlns: "http://www.w3.org/2000/svg", width: this.iconwidth, height: this.iconheight, role: "img", "aria-label": this.getAltText(), class: "speakerimage", viewBox: "0 0 75 75" },
h("path", { "stroke-width": "5", "stroke-linejoin": "round", d: "M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z" }),
h("path", { id: "air", stroke: "var(--honey-speaker-color,black);", fill: "none", "stroke-width": "5", "stroke-linecap": "round", d: "M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" },
h("animate", { id: "airanimation", attributeType: "CSS", attributeName: "opacity", from: "1", to: "0", dur: "1s", repeatCount: "indefinite" })))) : (h("svg", { id: this.ident + "-svg", xmlns: "http://www.w3.org/2000/svg", width: this.iconwidth, height: this.iconheight, role: "img", "aria-label": this.getAltText(), class: "speakerimage", viewBox: "0 0 75 75" },
h("path", { "stroke-width": "5", "stroke-linejoin": "round", d: "M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z" }),
this.pure ? (h("text", { id: "eins", x: "60%", y: "55%" }, "OFF")) : (h("path", { id: "air", stroke: "var(--honey-speaker-color,black);", fill: "none", "stroke-width": "5", "stroke-linecap": "round", d: "M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" }))))));
}
static get is() { return "honey-speech"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["honey-speech.css"]
}; }
static get styleUrls() { return {
"$": ["honey-speech.css"]
}; }
static get assetsDirs() { return ["assets"]; }
static get properties() { return {
"pure": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "use pure speaker symbol for silence state"
},
"attribute": "pure",
"reflect": false,
"defaultValue": "false"
},
"textids": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "An comma separated list with ids of DOM elements\nwhich inner text should be speech."
},
"attribute": "textids",
"reflect": false
},
"verbose": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "enable console logging"
},
"attribute": "verbose",
"reflect": false,
"defaultValue": "false"
},
"iconwidth": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "icon width"
},
"attribute": "iconwidth",
"reflect": false,
"defaultValue": "\"36\""
},
"iconheight": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "icon height"
},
"attribute": "iconheight",
"reflect": false,
"defaultValue": "\"36\""
},
"audiolang": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "i18n language ident for Web Speech API: de-DE or en or de ..."
},
"attribute": "audiolang",
"reflect": false,
"defaultValue": "\"de-DE\""
},
"audiopitch": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "pitch for Web Speech API"
},
"attribute": "audiopitch",
"reflect": false,
"defaultValue": "1"
},
"audiorate": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "rate for Web Speech API"
},
"attribute": "audiorate",
"reflect": false,
"defaultValue": "1"
},
"audiovolume": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "volume for Web Speech API"
},
"attribute": "audiovolume",
"reflect": false,
"defaultValue": "1"
},
"voicename": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "voice name used of Web Speech API"
},
"attribute": "voicename",
"reflect": false,
"defaultValue": "undefined"
}
}; }
static get states() { return {
"isPressed": {}
}; }
static get events() { return [{
"method": "honeySpeakerStarted",
"name": "honeySpeakerStarted",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired if the voice is speaking."
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "honeySpeakerFinished",
"name": "honeySpeakerFinished",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired if the voice has finished with speaking."
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "honeySpeakerPaused",
"name": "honeySpeakerPaused",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired if the voice is paused with speaking."
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "honeySpeakerResume",
"name": "honeySpeakerResume",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired if the voice is resumed after paused with speaking."
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "honeySpeakerFailed",
"name": "honeySpeakerFailed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired if the voice has failed to speak."
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}]; }
static get elementRef() { return "hostElement"; }
static get listeners() { return [{
"name": "click",
"method": "onClick",
"target": undefined,
"capture": true,
"passive": false
}, {
"name": "keydown",
"method": "onKeyDown",
"target": undefined,
"capture": true,
"passive": false
}]; }
}