|
1 | | -# voicecapture-vue |
| 1 | +Here's a more concise version of the README for `voicecapture-vue`, incorporating your previous example while maintaining clarity: |
2 | 2 |
|
3 | | -A component darkmode injection in your document page with vue.js |
| 3 | +--- |
4 | 4 |
|
5 | | -<a href="https://voicecapture-vue.web.app" target="_blank">Live Preview</a> |
| 5 | +# VoiceCapture Vue |
6 | 6 |
|
7 | | -Install |
8 | | -```js |
9 | | -npm install --save voicecapture-vue |
10 | | -``` |
| 7 | +`VoiceCapture Vue` is a Vue component for real-time voice capture and speech transcription. This component leverages the Web Speech API for speech recognition and provides an interactive UI. |
11 | 8 |
|
12 | | -Usage basic |
13 | | -```vue |
14 | | -import VoiceCaptureVue from 'voicecapture-vue'; |
| 9 | +## Installation |
15 | 10 |
|
16 | | -<VoiceCaptureVue /> |
17 | | -``` |
| 11 | +Install `voicecapture-vue` via npm: |
18 | 12 |
|
19 | | -Prop hiddenLabel |
20 | | -```vue |
21 | | -<VoiceCaptureVue :hiddenLabel="true" /> |
| 13 | +```bash |
| 14 | +npm install voicecapture-vue |
22 | 15 | ``` |
23 | 16 |
|
24 | | -Prop hiddenIcon |
25 | | -```vue |
26 | | -<VoiceCaptureVue :hiddenIcon="true" /> |
27 | | -``` |
| 17 | +## Basic Usage |
28 | 18 |
|
29 | | -Prop labelDark and labelLight |
30 | | -```vue |
31 | | -<VoiceCaptureVue labelDark="Tema escuro" labelLight="Tema claro" /> |
32 | | -``` |
| 19 | +### Script Setup |
33 | 20 |
|
34 | | -Slot change icon and label custom |
35 | | -```vue |
36 | | -<VoiceCaptureVue> |
37 | | - <template #iconDark> |
38 | | - <svg></svg> |
39 | | - </template> |
40 | | - <template #iconLight> |
41 | | - <svg></svg> |
42 | | - </template> |
43 | | - <template #labelDark> |
44 | | - Off |
45 | | - </template> |
46 | | - <template #labelLight> |
47 | | - On |
48 | | - </template> |
49 | | -</VoiceCaptureVue> |
50 | | -``` |
| 21 | +```javascript |
| 22 | +<script setup> |
| 23 | +import { ref } from 'vue'; |
| 24 | +import VoiceCapture from 'voicecapture-vue'; |
51 | 25 |
|
52 | | -Usage useVoiceCaptureVue with toggleMode and mode value |
53 | | -```vue |
54 | | -import { useVoiceCaptureVue } from 'voicecapture-vue'; |
| 26 | +const isVoiceCaptureActive = ref(false); |
| 27 | +const selectedLang = ref('en'); |
| 28 | +const selectedMode = ref('fullscreen'); |
| 29 | +const transcript = ref(''); |
55 | 30 |
|
56 | | -const { mode, toggleMode } = useVoiceCaptureVue(); |
| 31 | +function handleTranscript(text) { |
| 32 | + transcript.value = text; |
| 33 | +} |
57 | 34 |
|
58 | | -<button @click="toggleMode">VoiceCaptureVue {{ mode }}</button> |
| 35 | +function handleStatusChange(status) { |
| 36 | + isVoiceCaptureActive.value = status; |
| 37 | +} |
| 38 | +</script> |
59 | 39 | ``` |
60 | 40 |
|
61 | | -Style modification and usage in your styles |
62 | | -```css |
63 | | -body { |
64 | | - --dm-color-primary: #41b883; |
65 | | - --dm-color-secondary: #34495e; |
66 | | - --dm-color-text: #222; |
67 | | - --dm-color-background: #fff; |
68 | | -} |
| 41 | +### Template Example |
69 | 42 |
|
70 | | -body.darkmode { |
71 | | - --dm-color-text: #fff; |
72 | | - --dm-color-background: #222; |
73 | | -} |
| 43 | +Use the component in your template with language and mode options: |
| 44 | + |
| 45 | +```html |
| 46 | +<template> |
| 47 | + <div> |
| 48 | + <VoiceCapture |
| 49 | + :status="isVoiceCaptureActive" |
| 50 | + :lang="selectedLang" |
| 51 | + :mode="selectedMode" |
| 52 | + @voiceTranscript="handleTranscript" |
| 53 | + @onStatus="handleStatusChange" |
| 54 | + /> |
| 55 | + <textarea v-model="transcript" placeholder="Transcript results"></textarea> |
| 56 | + </div> |
| 57 | +</template> |
74 | 58 | ``` |
75 | | -Create your variable colors and update this with class .darkmode. |
76 | 59 |
|
77 | | -### Description class of components |
78 | | -If VoiceCaptureVue usage in a page, a class in body document is update with class darkmode. |
79 | | -In LocalStorage is created a key store with value current mode. |
80 | | -Do you usage children body.darkmode styles for your application. |
81 | | -I recomend create a variables colors in css and update this with toggle class of body document. |
| 60 | +### Props |
| 61 | + |
| 62 | +| Prop | Type | Default | Description | |
| 63 | +|------------|---------|------------|----------------------------------------------------------------------------------------------| |
| 64 | +| `status` | Boolean | `false` | Toggles the voice capture on/off. Set to `true` to activate voice recognition. | |
| 65 | +| `lang` | String | `"en"` | Specifies the language for speech recognition (e.g., `"pt"` for Portuguese). | |
| 66 | +| `mode` | String | `"normal"` | Defines the display mode: `"normal"` for inline, `"fullscreen"` for full-screen. | |
| 67 | + |
| 68 | +### Events |
| 69 | + |
| 70 | +| Event | Payload | Description | |
| 71 | +|--------------------|-------------|-------------------------------------------------------------------------------------------------| |
| 72 | +| `@voiceTranscript` | `String` | Emitted with the transcription generated from the user's speech. | |
| 73 | +| `@onStatus` | `Boolean` | Emitted when the voice capture status changes (active/inactive). | |
0 commit comments