@huluvu424242/honey-webcomponents
Version:
Text to Speech component wich is reading texts from DOM elements.
1 lines • 9.66 kB
JavaScript
import{r as t,c as s,h as e,H as i,g as h}from"./p-bdf0d7ed.js";class a{constructor(t){a.isLoggingActive=t}static disableLogging(){this.isLoggingActive=!1}static enableLogging(){this.isLoggingActive=!0}static toggleLogging(t){t?a.enableLogging():a.disableLogging()}static logMessage(t){console&&this.isLoggingActive&&console.log(t)}static debugMessage(t){console&&this.isLoggingActive&&console.debug(t)}static errorMessage(t){console&&this.isLoggingActive&&console.error(t)}static infoMessage(t){console&&this.isLoggingActive&&console.info(t)}}a.isLoggingActive=!0;class r{constructor(t,s,e,i,h,r,n,o,l,c){this.onSpeakerStarted=s=>t(s),this.onSpeakerFinished=t=>s(t),this.onSpeakerPaused=t=>e(t),this.onSpeakerResume=t=>i(t),this.onSpeakerFailed=t=>h(t),this.audioLang=r,this.audioPitch=n,this.audioRate=o,this.audioVolume=l,this.voiceName=c,this.stimme=void 0,a.infoMessage("####constructor finished")}getDefaultStimme(){var t,s,e,i=[];const h=r.synthese.getVoices();if(a.infoMessage("Found voices:"+JSON.stringify(h)),!h)return null;for(var n=0;n<h.length;n++)(h[n].name===this.voiceName||h[n].lang===this.audioLang||h[n].default)&&(a.debugMessage("voice matched:"+h[n].name+h[n].lang),h[n].name===this.voiceName&&(t=h[n]),h[n].lang===this.audioLang&&h[n].default&&(s=h[n]),h[n].lang===this.audioLang&&i.push(h[n]),h[n].default&&(e=h[n]));return t||s||(i&&i.length>0?i[0]:e||h[0])}erzeugeVorleser(t){a.infoMessage("erzeugeVorleser started");const s=new SpeechSynthesisUtterance(t);return s.onend=this.onSpeakerFinished,s.onstart=this.onSpeakerStarted,s.onpause=this.onSpeakerPaused,s.onresume=this.onSpeakerResume,s.onerror=this.onSpeakerFailed,s.pitch=this.audioPitch,s.rate=this.audioRate,s.volume=this.audioVolume,s.voice=this.stimme,s.lang=this.audioLang,s}textVorlesen(t){if(this.stimme||(this.stimme=this.getDefaultStimme(),a.infoMessage("set default voice to "+this.stimme)),t){const s=this.erzeugeVorleser(t);a.infoMessage("speaker lang used:"+s.lang),s.voice?(a.infoMessage("speaker voice used:"+s.voice.name),a.infoMessage("speaker voice lang:"+s.voice.lang)):a.infoMessage("no voice matched for text: "+t),r.synthese.sprachSynthese.speak(s)}}pause(){r.synthese.sprachSynthese.pause()}resume(){r.synthese.sprachSynthese.resume()}cancel(){r.synthese.sprachSynthese.cancel()}}r.synthese=new class{constructor(){this.sprachSynthese=window.speechSynthesis,this.sprachSynthese.onvoiceschanged=()=>{!this.voices||this.voices.length<1?(this.voices=this.sprachSynthese.getVoices(),a.debugMessage("voices changed to: "+this.voices.join(","))):a.debugMessage("voices alraedy initialized")},a.debugMessage("call getVoices()"),this.sprachSynthese.getVoices()}getVoices(){return this.voices}};class n{constructor(t){this.url=t}static async loadData(t){const s=n.of(t);return s?await s.loadFileContent():new Promise((t=>{t(null)}))}static of(t){try{return new n(new URL(t))}catch(s){return a.errorMessage("Invalid URL:"+t+"\n"+s),null}}async loadFileContent(){const t=await fetch(this.url.toString(),{method:"GET"});return t.ok?t.text():new Promise((t=>{t(null)}))}}const o=class{constructor(e){t(this,e),this.honeySpeakerStarted=s(this,"honeySpeakerStarted",7),this.honeySpeakerFinished=s(this,"honeySpeakerFinished",7),this.honeySpeakerPaused=s(this,"honeySpeakerPaused",7),this.honeySpeakerResume=s(this,"honeySpeakerResume",7),this.honeySpeakerFailed=s(this,"honeySpeakerFailed",7),this.options={disabledHostClass:"speaker-disabled",enabledHostClass:"speaker-enabled",disabledTitleText:"Vorlesen deaktiviert, da keine Texte verfügbar",pressedTitleText:"Liest gerade vor",unpressedTitleText:"Vorlesen",pressedAltText:"Symbol eines tönenden Lautsprechers",unpressedAltText:"Symbol eines angehaltenen, tönenden Lautsprechers",pressedPureAltText:"Symbol eines tönenden Lautsprechers",unpressedPureAltText:"Symbol eines ausgeschaltenen Lautsprechers"},this.createAltText=!1,this.createTitleText=!1,this.taborder="0",this.texts=[],this.isPressed=!1,this.pure=!1,this.verbose=!1,this.iconwidth="36",this.iconheight="36",this.audiolang="de-DE",this.audiopitch=1,this.audiorate=1,this.audiovolume=1,this.voicename=void 0}connectedCallback(){this.ident=this.hostElement.id?this.hostElement.id:Math.random().toString(36).substring(7),this.initialHostClass=this.hostElement.getAttribute("class")||"",this.createTitleText=!this.hostElement.title,this.createAltText=!this.hostElement.alt,this.taborder=this.hostElement.getAttribute("tabindex")?this.hostElement.tabIndex+"":"0",a.toggleLogging(this.verbose)}async componentWillLoad(){this.sprachAusgabe=new r((()=>{this.isPressed=!0,this.honeySpeakerStarted.emit(this.ident),a.debugMessage("Vorlesen gestartet")}),(()=>{this.isPressed=!1,this.honeySpeakerFinished.emit(this.ident),a.debugMessage("Vorlesen beendet")}),(()=>{this.isPressed=!1,this.honeySpeakerPaused.emit(this.ident),a.debugMessage("Pause mit Vorlesen")}),(()=>{this.isPressed=!0,this.honeySpeakerResume.emit(this.ident),a.debugMessage("Fortsetzen mit Vorlesen")}),(t=>{this.isPressed=!1,this.honeySpeakerFailed.emit(this.ident),a.errorMessage("Fehler beim Vorlesen"+JSON.stringify(t))}),this.audiolang,this.audiopitch,this.audiorate,this.audiovolume,this.voicename),await this.updateTexte()}async updateOptions(t){for(let s in t)t.hasOwnProperty(s)&&(this.options[s]=t[s]);this.options=Object.assign({},this.options)}async startSpeaker(){this.isPressed=!1,await this.toggleAction()}async pauseSpeaker(){this.isPressed=!1,this.sprachAusgabe.pause()}async resumeSpeaker(){this.isPressed=!0,this.sprachAusgabe.resume()}async cancelSpeaker(){this.isPressed=!1,this.sprachAusgabe.cancel()}async toggleSpeaker(){await this.toggleAction()}hasNoTexts(){return!this.texts||this.texts.length<1||this.texts.filter((t=>t.trim().length>0)).length<1}createNewTitleText(){return this.hasNoTexts()?this.options.disabledTitleText:this.isPressed?this.options.pressedTitleText:this.options.unpressedTitleText}getTitleText(){return this.createTitleText?this.createNewTitleText():this.hostElement.title}createNewAltText(){return this.isPressed?this.pure?this.options.pressedPureAltText:this.options.pressedAltText:this.pure?this.options.unpressedPureAltText:this.options.unpressedAltText}getAltText(){return this.createAltText?this.createNewAltText():this.hostElement.getAttribute("alt")}loadDOMElementTexte(){this.textids&&this.textids.split(",").forEach((t=>{const s=document.getElementById(t);s?this.texts=[...this.texts,s.innerText]:a.errorMessage("text to speak not found of DOM element with id "+t)}))}async loadAudioUrlText(){if(this.texturl){a.debugMessage("audioURL: "+this.texturl);const t=await n.loadData(this.texturl);t&&(this.texts=[...this.texts,t]),a.debugMessage("###Texte###"+this.texts)}}async updateTexte(){this.texts=[],this.loadDOMElementTexte(),await this.loadAudioUrlText()}textidsChanged(t,s){a.debugMessage("textids changed from"+s+" to "+t),this.updateTexte()}async texturlChanged(t,s){this.texturl=t,a.debugMessage("texturl changed from"+s+" to "+t),await this.updateTexte()}getTexte(){return this.texts?this.texts:[]}textVorlesen(t){this.isPressed=!0,this.sprachAusgabe.textVorlesen(t+" ")}async toggleAction(){a.debugMessage("###TOGGLE TO"+this.isPressed),this.isPressed||await this.cancelSpeaker(),this.isPressed=!this.isPressed;const t=this.getTexte();if(this.isPressed&&t.length>0){const s=t.join("");this.textVorlesen(s)}else await this.cancelSpeaker()}async onClick(){this.hasNoTexts()||await this.toggleAction()}async onKeyDown(t){this.hasNoTexts()||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),await this.toggleAction())}getHostClass(){let t=this.initialHostClass;return this.hasNoTexts()?t+" "+this.options.disabledHostClass:t+" "+this.options.enabledHostClass}render(){return a.debugMessage("##RENDER##"),e(i,{title:this.getTitleText(),alt:this.getAltText(),role:"button",tabindex:this.hasNoTexts()?-1:this.taborder,"aria-pressed":this.isPressed?"true":"false",class:this.getHostClass(),disabled:this.hasNoTexts()},e("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:this.hasNoTexts()?"speakerimage-disabled":"speakerimage",viewBox:"0 0 75 75"},e("path",{"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.isPressed?e("path",{id:this.ident+"-air",fill:"none","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"},e("animate",{id:"airanimation",attributeType:"CSS",attributeName:"opacity",from:"1",to:"0",dur:"1s",repeatCount:"indefinite"})):this.pure?e("text",{id:this.ident+"-text",x:"60%",y:"55%"},"OFF"):e("path",{id:this.ident+"-air",fill:"none","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 assetsDirs(){return["assets"]}get hostElement(){return h(this)}static get watchers(){return{textids:["textidsChanged"],texturl:["texturlChanged"]}}};o.style=":host>svg{padding:var(--honey-speaker-padding, 5px);font-size:var(--honey-speaker-font-size, medium);border:var(--honey-speaker-border, 0);width:var(--honey-speaker-width, 36px);height:var(--honey-speaker-height, 36px)}:host>svg>path{stroke-width:5}.speakerimage{stroke:var(--honey-speaker-color, blue);fill:var(--honey-speaker-color, blue);background:var(--honey-speaker-background, transparent)}.speakerimage-disabled{stroke:var(--honey-disabled-color, gray);fill:var(--honey-disabled-color, gray);background:var(--honey-disabled-background, lightgrey);cursor:var(--honey-disabled-cursor, not-allowed)}";export{o as honey_speaker}