@christianriedl/utils 1.0.92 → 1.0.94

package/dist/audio.d.ts

@@ -0,0 +1,16 @@
+export interface IStop {
+    stop(): void;
+    running: boolean;
+}
+export interface IPause extends IStop {
+    resume(): void;
+    pause(): void;
+    paused: boolean;
+}
+export declare class Audio {
+    static recordAudio(endThreshold: number, onEnd: (blob: Blob) => void, onStateChange?: () => void, onError?: (e: string) => void): Promise<IPause>;
+    static getSpeechSynthesizeVoices(): Promise<SpeechSynthesisVoice[]>;
+    static speechSynthesize(text: string, voiceName?: string, language?: string, rate?: number, pitch?: number, onEnd?: () => void, onStateChange?: () => void, onError?: (e: string) => void): Promise<IPause>;
+    static speechTranscribe(language?: string, retStop?: IStop): Promise<SpeechRecognitionResult>;
+    static playAudio(audioData: ArrayBuffer, onEnd?: () => void): Promise<IStop>;
+}

package/dist/audio.js

@@ -0,0 +1,154 @@
+export class Audio {
+    static async recordAudio(endThreshold, onEnd, onStateChange, onError) {
+        const constraints = { "video": false, "audio": true };
+        const stream = await navigator.mediaDevices.getUserMedia(constraints);
+        const recordedChunks = [];
+        const recorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
+        recorder.ondataavailable = async (ev) => {
+            recordedChunks.push(ev.data);
+            const arr = await ev.data.arrayBuffer();
+            if (endThreshold && recordedChunks.length > 1 && ev.data.size < endThreshold)
+                recorder.stop();
+        };
+        recorder.start(1000);
+        recorder.onstop = () => {
+            const blob = new Blob(recordedChunks, { type: recordedChunks[0].type });
+            onEnd(blob);
+        };
+        if (onError) {
+            recorder.onerror = (ev) => onError(ev.type);
+        }
+        return {
+            stop: () => {
+                if (recorder.state != 'inactive') {
+                    recorder.stop();
+                    onStateChange?.();
+                }
+            },
+            pause: () => {
+                if (recorder.state != 'paused') {
+                    recorder.pause();
+                    onStateChange?.();
+                }
+            },
+            resume: () => {
+                if (recorder.state == 'paused') {
+                    recorder.resume();
+                    onStateChange?.();
+                }
+            },
+            get paused() { return recorder.state == 'paused'; },
+            get running() { return recorder.state == 'recording'; }
+        };
+    }
+    static getSpeechSynthesizeVoices() {
+        const synth = window.speechSynthesis;
+        var promise = new Promise(function (resolve, reject) {
+            synth.onvoiceschanged = (ev) => {
+                const voices = synth.getVoices();
+                resolve(voices);
+            };
+        });
+        return promise;
+    }
+    static async speechSynthesize(text, voiceName, language, rate, pitch, onEnd, onStateChange, onError) {
+        let voice;
+        const synth = window.speechSynthesis;
+        const utterance = new SpeechSynthesisUtterance();
+        utterance.text = text;
+        if (voiceName || language) {
+            const voices = await Audio.getSpeechSynthesizeVoices();
+            const voice = voiceName ? voices.find((v) => v.name == voiceName) : voices.find((v) => v.lang == language);
+            utterance.voice = voice ? voice : null;
+        }
+        if (rate)
+            utterance.rate = 1;
+        if (pitch)
+            utterance.pitch = 1;
+        if (language)
+            utterance.lang = "language";
+        if (onEnd) {
+            utterance.onend = (ev) => {
+                onEnd();
+                onStateChange?.();
+            };
+        }
+        if (onStateChange) {
+            utterance.onpause = (ev) => onStateChange();
+            utterance.onresume = (ev) => onStateChange();
+            utterance.onstart = (ev) => onStateChange();
+        }
+        if (onError) {
+            utterance.onerror = (ev) => {
+                onError(ev.error);
+            };
+        }
+        synth.speak(utterance);
+        return {
+            stop: () => {
+                if (synth.pending || synth.speaking)
+                    synth.cancel();
+            },
+            pause: () => {
+                if (!synth.paused)
+                    synth.pause();
+            },
+            resume: () => {
+                if (synth.paused)
+                    synth.resume();
+            },
+            get paused() { return synth.paused; },
+            get running() { return synth.pending || synth.speaking; }
+        };
+    }
+    static async speechTranscribe(language, retStop) {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        const speechRecognition = new SpeechRecognition();
+        let ended = false;
+        if (retStop) {
+            retStop.stop = () => {
+                if (!ended)
+                    speechRecognition.stop();
+            };
+        }
+        const promise = new Promise(function (resolve, reject) {
+            if (language)
+                speechRecognition.lang = language;
+            speechRecognition.continuous = false;
+            speechRecognition.maxAlternatives = 1;
+            speechRecognition.onresult = (ev) => {
+                ended = true;
+                const result = ev.results[ev.resultIndex];
+                resolve(result);
+            };
+            speechRecognition.onerror = (ev) => {
+                ended = true;
+                reject(ev.error);
+            };
+            speechRecognition.start();
+        });
+        return promise;
+    }
+    static async playAudio(audioData, onEnd) {
+        const context = new AudioContext();
+        const buffer = await context.decodeAudioData(audioData);
+        const source = context.createBufferSource();
+        let ended = false;
+        source.onended = (ev) => {
+            ended = true;
+            if (onEnd)
+                onEnd();
+        };
+        source.buffer = buffer;
+        source.connect(context.destination);
+        source.start(0);
+        return {
+            stop: () => {
+                if (!ended)
+                    source.stop();
+            },
+            get running() { return !ended; }
+        };
+    }
+}
+//# sourceMappingURL=audio.js.map

package/dist/audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.js","sourceRoot":"","sources":["../src/audio.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -12,6 +12,5 @@ export * from './appConfig';
 export * from './statistics';
 export * from './marshalBE';
 export * from './marshalLE';
-export * from './useSpeechRecognition';
-export * from './useSpeechSynthesis';
+export * from './audio';
 export { InjectionKey, Ref, ref, reactive, toRaw, isRef, watchEffect } from 'vue';

package/dist/index.js

@@ -12,7 +12,6 @@ export * from './appConfig';
 export * from './statistics';
 export * from './marshalBE';
 export * from './marshalLE';
-export * from './useSpeechRecognition';
-export * from './useSpeechSynthesis';
+export * from './audio';
 export { ref, reactive, toRaw, isRef, watchEffect } from 'vue';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAqB,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAqB,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/utils",
-  "version": "1.0.92",
+  "version": "1.0.94",
   "description": "Interfaces, local storage, service worker, configuration, application state",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Microphone.vue

@@ -1,45 +1,29 @@
 <script setup lang="ts">
     import { ref, watch } from 'vue'
-    import { useSpeechRecognition } from '@christianriedl/utils';
+    import { Audio } from '@christianriedl/utils';
 
-    const props = defineProps<{ lang?: string, maxAlternatives?: number, size?: string, cls?: string, variant?: string }>();
+    const props = defineProps<{ lang?: string, size?: string, cls?: string, variant?: "elevated" | "outlined" | "flat" | "text" | "tonal" | "plain" | undefined }>();
     const emits = defineEmits<{
-        (e: 'result', result: string): void,
-        (e: 'listening', isListening: boolean): void,
-        (e: 'final', visFinal: boolean): void
+        (e: 'result', result: SpeechRecognitionResult): void
     }>();
 
     const sz = props.size ? props.size : "large";
-    const cls = props.cls ? props.cls : "bg-office";
+    const cls = props.cls ? [props.cls] : ["bg-office"];
     const vari = props.variant ? props.variant : "tonal";
-    const lang = ref('de-AT');
-    const maxAlternatives = ref(1);
-
-    if (props.lang)
-        lang.value = props.lang;
-    if (props.maxAlternatives)
-        maxAlternatives.value = props.maxAlternatives;
-
-    const speech = useSpeechRecognition({
-      lang,
-      maxAlternatives,
-      continuous: false,
-    })
-
-    const sampled = ref<string[]>([])
-
-    function onStart() {
-      speech.result.value = ''
-      speech.start()
+    const language = props.lang ? props.lang : 'de-AT';
+    const color = ref('primary');
+
+    async function onStart() {
+        color.value = 'error';
+        var result = await Audio.speechTranscribe(language);
+        color.value = 'primary';
+        emits('result', result);
     }
-
-    const { isListening, isFinal, stop, result } = speech
-    watch(isListening, isListening => emits("listening", isListening.value));
-    watch(isFinal, isFinal => emits("final", isFinal.value));
-    watch(result, result => emits("result", result.value));
 </script>
 
 <template>
-    <v-btn :size="sz" :class="cls" :variant="vari" icon="$microphone" :color="isListening ? 'red' : 'white'", @click="onStart"></v-btn>
+    <v-btn :variant="vari" :class="cls" @click="onStart">
+        <v-icon :size="sz" icon="$microphone" :color="color"></v-icon>
+    </v-btn>
 </template>
 

package/src/components/TextToSpeech.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+    import { ref, watch, inject, toRef, onMounted } from 'vue'
+    import { Audio, appConfigSymbol, IPause } from '@christianriedl/utils';
+
+    const props = defineProps<{ text: string, language?: string, autoStart?: boolean }>();
+
+    const appConfig = inject(appConfigSymbol)!;
+    const text = toRef(props, "text");
+    const voiceName = ref(appConfig.localStorage.getItemString("ttsVoice", ""));
+    const pitch = ref(appConfig.localStorage.getItemNumber("ttsPitch", 10) / 10);
+    const rate = ref(appConfig.localStorage.getItemNumber("ttsRate", 10) / 10);
+    const voice = ref<SpeechSynthesisVoice>(undefined as unknown as SpeechSynthesisVoice)
+    const voices = ref<SpeechSynthesisVoice[]>([])
+    const configure = ref(false);  
+    const paused = ref(false);
+    const ended = ref(false);
+    let pause: IPause;
+
+    async function onPlay() {
+        if (pause && pause.paused) {
+            pause.resume();
+            paused.value = false;
+        }
+        else {
+            paused.value = ended.value = false;
+            pause = Audio.speechSynthesize(text.value, voiceName.value, props.language, rate.value, pitch.value,
+                () => {
+                    ended.value = true
+                },
+                () => {
+                    paused.value = pause.pause;
+                    ended.value = !pause.running;                     
+                });
+        }
+    }
+
+    function onPause() {
+        if (pause && !pause.paused) {
+            pause.pause();
+        }
+    }
+    function onStop() {
+        if (pause)
+            pause.stop();
+    }
+    function onVoiceChange() {
+        appConfig.localStorage.setItem("ttsVoice", voiceName.value);
+        voice.value = voices.value.find((v) => v.name == voiceName.value)!;
+    }
+    function onPitchChange() {
+        appConfig.localStorage.setItem("ttsPitch", Math.floor (pitch.value * 10));
+    }
+    function onRateChange() {
+        appConfig.localStorage.setItem("ttsRate", Math.floor(rate.value * 10));
+    }
+    async function onSettings() {
+        configure.value = !configure.value;
+        if (configure.value && voices.value.length == 0) {
+            voices.value = await Audio.getSpeechSynthesizeVoices();   
+        }
+    }
+    if (props.autoStart) {
+        watch(text, text => { if (text) onPlay(); });
+    }
+</script>
+
+<template>
+  <v-row dense>
+    <v-col cols="12">
+    <v-btn v-if="speech.status.value == 'play'" @click.stop="onPause">
+      <v-icon icon="$pause" />
+    </v-btn>
+    <v-btn v-else @click.stop="onPlay">
+      <v-icon icon="$play" />
+    </v-btn>
+      <v-btn @click.stop="onStop">
+        <v-icon icon="$stop" />
+      </v-btn>
+      <v-btn @click.stop="onSettings">
+        <v-icon icon="$settings" />
+      </v-btn>
+    </v-col>
+  </v-row>
+  <v-row v-if="configure" dense>
+    <v-col cols="12">
+      <v-select density="compact" v-model="voiceName"
+                item-title="name" 
+                :items="voices"
+                persistent-hint
+                @update:modelValue="onVoiceChange"
+                dense solo hide-details single-line>
+      </v-select>
+    </v-col>
+  </v-row>
+  <v-row v-if="configure" dense>
+    <v-col cols="6">
+      <v-slider v-model="pitch" label="Pitch" density="compact" min="0.5" max="2" step="0.1"
+                @update:modelValue="onPitchChange"></v-slider>
+    </v-col>
+    <v-col cols="6">
+      <v-slider v-model="rate" label="Rate" density="compact" min="0.5" max="2" step="0.1"
+                @update:modelValue="onRateChange"></v-slider>
+    </v-col>
+  </v-row>
+</template>
+