-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
demo.vue
97 lines (85 loc) · 2.49 KB
/
demo.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useSpeechSynthesis } from '@vueuse/core'
const voice = ref<SpeechSynthesisVoice>({ lang: 'en-US' } as SpeechSynthesisVoice)
const text = ref('Hello, everyone! Good morning!')
const speech = useSpeechSynthesis(text, {
lang: voice.value.lang,
})
let synth: SpeechSynthesis
const voices = ref<SpeechSynthesisVoice[]>([])
watch(voice, (newVoice) => {
speech.utterance.value.voice = newVoice
})
if (speech.isSupported) {
// load at last
setTimeout(() => {
synth = window.speechSynthesis
voices.value = synth.getVoices()
voice.value = voices.value[0]
})
}
const play = () => {
if (speech.status.value === 'pause') {
console.log('resume')
window.speechSynthesis.resume()
}
else {
speech.speak()
}
}
const pause = () => {
window.speechSynthesis.pause()
}
const stop = () => {
window.speechSynthesis.cancel()
}
</script>
<template>
<div>
<div v-if="!speech.isSupported">
Your browser does not support SpeechSynthesis API,
<a
href="https://caniuse.com/mdn-api_speechsynthesis"
target="_blank"
>more details</a>
</div>
<div v-else>
<label class="font-bold mr-2">Spoken Text</label>
<input v-model="text" class="!inline-block" type="text">
<br>
<label class="font-bold mr-2">Language</label>
<div bg="$vp-c-bg" border="$vp-c-divider-light 1" inline-flex items-center relative rounded>
<i i-carbon-language absolute left-2 opacity-80 pointer-events-none />
<select v-model="voice" px-8 border-0 bg-transparent h-9 rounded appearance-none>
<option bg="$vp-c-bg" disabled>
Select Language
</option>
<option
v-for="(voice, i) in voices"
:key="i"
bg="$vp-c-bg"
:value="voice"
>
{{ `${voice.name} (${voice.lang})` }}
</option>
</select>
<i i-carbon-chevron-down absolute right-2 opacity-80 pointer-events-none />
</div>
<div class="mt-2">
<button
:disabled="speech.isPlaying.value"
@click="play"
>
{{ speech.status.value === 'pause' ? 'Resume' : 'Speak' }}
</button>
<button :disabled="!speech.isPlaying.value" class="orange" @click="pause">
Pause
</button>
<button :disabled="!speech.isPlaying.value" class="red" @click="stop">
Stop
</button>
</div>
</div>
</div>
</template>