Le composant KendoReact SpeechToTextButton rationalise l’apport de capacités de reconnaissance vocale aux applications React. Apprenez à l’implémenter et à le configurer pour différentes langues, et intégrez-le dans d’autres composants tels que les formulaires.
L’interaction vocale peut parfois constituer un élément crucial des applications Web modernes, offrant aux utilisateurs un moyen plus naturel et plus accessible de saisir des données. Des assistants virtuels aux outils de dictée, la technologie de reconnaissance vocale contribue souvent à améliorer notre interaction avec les interfaces numériques.
Dans cet article, nous examinerons Composant React SpeechToTextButton de la bibliothèque Progress KendoReact, qui apporte la fonctionnalité parole-texte directement aux applications React.
Le composant KendoReact SpeechToTextButton fait partie de Prime KendoReactune bibliothèque d’interface utilisateur de niveau entreprise avec plus de 120 composants pour créer des applications sophistiquées.
Le composant KendoReact SpeechToTextButton
Le composant KendoReact SpeechToTextButton utilise le API vocale Web pour intégrer des fonctionnalités de reconnaissance vocale dans les applications React. Il agit comme un pont entre la parole de l’utilisateur et le traitement de texte de votre application, gérant les complexités de la reconnaissance vocale tout en fournissant une interface claire et personnalisable.
Le composant KendoReact SpeechToTextButton est distribué via le @progress/kendo-react-boutons package npm et peut être importé directement :
import { SpeechToTextButton } from '@progress/kendo-react-buttons';
Voici un exemple de base de la façon dont nous pouvons utiliser le <SpeechToTextButton /> composant:
import * as React from 'react';
import { SpeechToTextButton } from '@progress/kendo-react-buttons';
const App = () => {
const [transcript, setTranscript] = React.useState('');
const [isListening, setIsListening] = React.useState(false);
const handleStart = () => {
setIsListening(true);
console.log('Speech recognition started');
};
const handleEnd = () => {
setIsListening(false);
console.log('Speech recognition ended');
};
const handleResult = (event) => {
const { isFinal, alternatives } = event;
if (isFinal && alternatives.length > 0) {
setTranscript(alternatives[0].transcript);
}
};
const handleError = (event) => {
setIsListening(false);
console.error('Speech recognition error:', event);
};
return (
<div style={{ padding: '20px' }}>
<h3>Voice Input Demo</h3>
<div style={{ marginBottom: '20px' }}>
<SpeechToTextButton
onStart={handleStart}
onEnd={handleEnd}
onResult={handleResult}
onError={handleError}
/>
<span style={{ marginLeft: '10px', color: isListening ? 'green' : 'gray' }}>
{isListening ? 'Listening...' : 'Click to speak'}
</span>
</div>
{transcript && (
<div style={{ padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
<strong>You said:</strong> "{transcript}"
</div>
)}
</div>
);
};
export default App;
Cet exemple crée une interface parole-texte simple qui permet aux utilisateurs de cliquer sur le bouton du microphone pour lancer la reconnaissance vocale. Le composant fournit un retour visuel sur l’état d’écoute et affiche le texte reconnu une fois le traitement vocal terminé.
Vous remarquerez que SpeechToTextButton gère automatiquement certaines des complexités de la reconnaissance vocale, notamment les autorisations d’accès au microphone, le traitement audio et le formatage des résultats.
Configuration de la reconnaissance vocale
L’un des principaux atouts du composant SpeechToTextButton réside dans ses options configurables, qui nous permettent d’adapter le comportement de reconnaissance vocale aux besoins spécifiques de notre application.
Configuration de la langue
Le composant prend en charge plusieurs langues via le propriété de languepermettant aux applications de servir les utilisateurs internationaux :
import * as React from 'react';
import { SpeechToTextButton } from '@progress/kendo-react-buttons';
import { DropDownList } from '@progress/kendo-react-dropdowns';
const LanguageDemo = () => {
const [selectedLanguage, setSelectedLanguage] = React.useState('en-US');
const [recognition, setRecognition] = React.useState('');
const languages = [
{ text: 'English (US)', value: 'en-US' },
{ text: 'English (UK)', value: 'en-GB' },
{ text: 'Spanish (Spain)', value: 'es-ES' },
{ text: 'French (France)', value: 'fr-FR' },
{ text: 'German (Germany)', value: 'de-DE' },
{ text: 'Japanese (Japan)', value: 'ja-JP' },
];
const handleResult = (event) => {
const { isFinal, alternatives } = event;
if (isFinal && alternatives.length > 0) {
setRecognition(alternatives[0].transcript);
}
};
return (
<div style={{ padding: '20px' }}>
<h3>Multi-Language Speech Recognition</h3>
<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '8px' }}>
Select Language:
</label>
<DropDownList
data={languages}
textField="text"
dataItemKey="value"
value={languages.find(lang => lang.value === selectedLanguage)}
onChange={(e) => setSelectedLanguage(e.value.value)}
style={{ width: '200px' }}
/>
</div>
<div style={{ marginBottom: '20px' }}>
<SpeechToTextButton
lang={selectedLanguage}
onResult={handleResult}
/>
<span style={{ marginLeft: '10px', fontStyle: 'italic' }}>
Speak in {languages.find(lang => lang.value === selectedLanguage)?.text}
</span>
</div>
{recognition && (
<div style={{ padding: '15px', background: '#e8f5e8', borderRadius: '4px' }}>
<strong>Recognized ({selectedLanguage}):</strong> "{recognition}"
</div>
)}
</div>
);
};
export default LanguageDemo;
Dans cet exemple, nous maintenons la langue actuellement sélectionnée dans une variable d’état React, selectedLanguagequi est mis à jour par un DropDownList composant. Cet état est ensuite transmis directement au lang accessoire du SpeechToTextButton. Le handleResult La fonction capture la transcription finale et la stocke dans le recognition état à afficher à l’utilisateur.
L’exemple ci-dessus montre comment la configuration linguistique permet aux applications de prendre en charge les utilisateurs parlant différentes langues, en ajustant automatiquement le moteur de reconnaissance vocale en conséquence.
Reconnaissance continue et résultats intermédiaires
Pour les applications plus sophistiquées, le composant propose reconnaissance continue et résultats intermédiaires capacités :
import * as React from 'react';
import { SpeechToTextButton } from '@progress/kendo-react-buttons';
import { Checkbox } from '@progress/kendo-react-inputs';
const AdvancedRecognitionDemo = () => {
const [continuous, setContinuous] = React.useState(true);
const [interimResults, setInterimResults] = React.useState(true);
const [finalText, setFinalText] = React.useState('');
const [interimText, setInterimText] = React.useState('');
const [sessionResults, setSessionResults] = React.useState([]);
const handleResult = (event) => {
const { isFinal, alternatives } = event;
if (alternatives.length > 0) {
const transcript = alternatives[0].transcript;
if (isFinal) {
setFinalText(transcript);
setInterimText('');
setSessionResults(prev => [...prev, transcript]);
} else if (interimResults) {
setInterimText(transcript);
}
}
};
const clearSession = () => {
setSessionResults([]);
setFinalText('');
setInterimText('');
};
return (
<div style={{ padding: '20px', maxWidth: '600px' }}>
<h3>Advanced Speech Recognition</h3>
<div style={{ marginBottom: '20px' }}>
<div style={{ marginBottom: '10px' }}>
<Checkbox
label="Continuous Recognition"
checked={continuous}
onChange={(e) => setContinuous(e.value)}
/>
</div>
<div style={{ marginBottom: '10px' }}>
<Checkbox
label="Show Interim Results"
checked={interimResults}
onChange={(e) => setInterimResults(e.value)}
/>
</div>
</div>
<div style={{ marginBottom: '20px' }}>
<SpeechToTextButton
continuous={continuous}
interimResults={interimResults}
onResult={handleResult}
/>
<button
onClick={clearSession}
style={{ marginLeft: '10px', padding: '8px 16px' }}
>
Clear Session
</button>
</div>
{interimResults && interimText && (
<div style={{
padding: '10px',
background: '#fff3cd',
border: '1px solid #ffeaa7',
borderRadius: '4px',
marginBottom: '10px'
}}>
<em>Interim: {interimText}</em>
</div>
)}
<div style={{
padding: '15px',
background: '#f8f9fa',
borderRadius: '4px',
minHeight: '100px'
}}>
<strong>Session Results:</strong>
{sessionResults.length > 0 ? (
<ol style={{ marginTop: '10px' }}>
{sessionResults.map((result, index) => (
<li key={index} style={{ marginBottom: '5px' }}>{result}</li>
))}
</ol>
) : (
<p style={{ color: '#6c757d', fontStyle: 'italic', marginTop: '10px' }}>
Start speaking to see results...
</p>
)}
</div>
</div>
);
};
export default AdvancedRecognitionDemo;
Cet extrait utilise deux variables d’état, continuous et interimResultsqui sont contrôlés par des cases à cocher et transmis comme accessoires au composant React SpeechToTextButton.
Le handleResult le rappel vérifie le isFinal propriété de l’événement. Si le résultat est définitif, la transcription est ajoutée au sessionResults tableau. Sinon, si les résultats intermédiaires sont activés, la transcription est affichée sous forme d’aperçu en temps réel. Un bouton « Effacer la session » est également inclus pour réinitialiser le texte capturé.
Cet exemple montre comment la reconnaissance continue permet des sessions de dictée plus longues, tandis que les résultats intermédiaires fournissent un retour en temps réel qui rend l’interface plus réactive et naturelle.
Intégration avec les composants de formulaire
L’une des applications les plus pratiques de SpeechToTextButton est son intégration avec les composants de formulaire, notamment les entrées de texte et les zones de texte. Cela permet aux utilisateurs de dicter le contenu directement dans les formulaires, améliorant ainsi l’accessibilité et l’expérience utilisateur globale.
import * as React from 'react';
import { SpeechToTextButton } from '@progress/kendo-react-buttons';
import { TextArea, InputSuffix } from '@progress/kendo-react-inputs';
import { Button } from '@progress/kendo-react-buttons';
const VoiceEnabledForm = () => {
const [message, setMessage] = React.useState('');
const [isListening, setIsListening] = React.useState(false);
const [appendMode, setAppendMode] = React.useState(true);
const handleStart = () => {
setIsListening(true);
};
const handleEnd = () => {
setIsListening(false);
};
const handleResult = (event) => {
const { isFinal, alternatives } = event;
if (isFinal && alternatives.length > 0) {
const transcript = alternatives[0].transcript;
setMessage(prev => {
if (appendMode && prev) {
const needsSpace = !prev.endsWith(' ') && !prev.endsWith('\n');
return prev + (needsSpace ? ' ' : '') + transcript;
} else {
return transcript;
}
});
}
};
const handleError = (event) => {
setIsListening(false);
console.error('Speech recognition error:', event);
};
const SpeechSuffix = () => (
<InputSuffix orientation="vertical">
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '5px'
}}>
<SpeechToTextButton
size="small"
fillMode="flat"
themeColor="primary"
onStart={handleStart}
onEnd={handleEnd}
onResult={handleResult}
onError={handleError}
/>
{isListening && (
<span style={{
fontSize: '10px',
color: '#28a745',
marginTop: '2px'
}}>
Listening...
</span>
)}
</div>
</InputSuffix>
);
return (
<div style={{ padding: '20px', maxWidth: '500px' }}>
<h3>Voice-Enabled Contact Form</h3>
<div style={{ marginBottom: '20px' }}>
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
Your Message:
</label>
<TextArea
value={message}
onChange={(e) => setMessage(e.value)}
rows={4}
placeholder="Type your message or use the microphone to dictate..."
suffix={<SpeechSuffix />}
style={{ width: '100%' }}
/>
</div>
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '20px'
}}>
<div>
<label style={{ fontSize: '14px' }}>
<input
type="checkbox"
checked={appendMode}
onChange={(e) => setAppendMode(e.target.checked)}
style={{ marginRight: '5px' }}
/>
Append to existing text
</label>
</div>
<Button
onClick={() => setMessage('')}
fillMode="outline"
themeColor="secondary"
size="small"
>
Clear
</Button>
</div>
<div style={{
padding: '10px',
background: '#f8f9fa',
borderRadius: '4px',
fontSize: '14px'
}}>
<strong>Tips:</strong>
<ul style={{ margin: '5px 0', paddingLeft: '20px' }}>
<li>Click the microphone and speak clearly</li>
<li>Use "append mode" to add to existing text</li>
<li>Punctuation works best with clear pauses</li>
</ul>
</div>
</div>
);
};
export default VoiceEnabledForm;
Dans cette mise en œuvre, le SpeechToTextButton est rendu sous forme de suffixe dans un KendoReact TextArea composant. Le handleResult la fonction est configurée pour mettre à jour le message l’État, qui est lié au TextAreala valeur. Il comporte également un appendMode état, contrôlé par une case à cocher, qui permet à l’utilisateur soit d’ajouter le texte reconnu au contenu existant, soit de le remplacer entièrement.
Conclure
Le composant KendoReact SpeechToTextButton facilite l’intégration de capacités de reconnaissance vocale à nos applications React. Nous avons vu à quel point il est facile de démarrer avec une implémentation de base, de la configurer pour différentes langues, de permettre une reconnaissance continue avec des résultats intermédiaires et de l’intégrer de manière transparente dans des composants de formulaire, tels que KendoReact. Zone de texte composant.
Pour plus de détails sur le composant KendoReact SpeechToTextButton, y compris sa gamme complète d’options de configuration et de références API, assurez-vous de consulter le documentation officielle.
Et essayez ce composant pratique, ainsi que 120 autres, avec l’essai gratuit de la bibliothèque KendoReact.
Source link