@using Syncfusion.EJ2.Inputs

<div id='speechtotext-container'>
    <ejs-speechtotext id="speech-to-text" transcriptChanged="onTranscriptChanged"></ejs-speechtotext>
    <ejs-textarea id="output-textarea" rows="5" cols="50" value="" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
</div>

<script>
    function onTranscriptChanged(args) {
        var textareaObj = ej.base.getComponent(document.getElementById("output-textarea"), "textarea");
        textareaObj.value = args.transcript;
    }
</script>

<style>
    #speechtotext-container {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

@using Syncfusion.EJ2.Inputs

<div class="form-group">
    <label>Name (speak):</label>
    <ejs-speechtotext id="name-voice" transcriptChanged="onNameTranscript"></ejs-speechtotext>
    <ejs-textbox id="name-field"></ejs-textbox>
</div>

<div class="form-group">
    <label>Message (speak):</label>
    <ejs-speechtotext id="message-voice" transcriptChanged="onMessageTranscript"></ejs-speechtotext>
    <ejs-textarea id="message-field" rows="4"></ejs-textarea>
</div>

<script>
    function onNameTranscript(args) {
        var nameField = ej.base.getComponent(document.getElementById("name-field"), "textbox");
        nameField.value = args.transcript;
    }

    function onMessageTranscript(args) {
        var messageField = ej.base.getComponent(document.getElementById("message-field"), "textarea");
        messageField.value = args.transcript;
    }
</script>

@using Syncfusion.EJ2.Inputs

<ejs-speechtotext id="speech-control"></ejs-speechtotext>

<div>
    <button onclick="startVoiceInput()">Start Recording</button>
    <button onclick="stopVoiceInput()">Stop Recording</button>
</div>

<script>
    function startVoiceInput() {
        var speechComponent = ej.base.getComponent(
            document.getElementById("speech-control"), 
            "speechtotext"
        );
        speechComponent.startListening();
    }

    function stopVoiceInput() {
        var speechComponent = ej.base.getComponent(
            document.getElementById("speech-control"), 
            "speechtotext"
        );
        speechComponent.stopListening();
    }
</script>

@using Syncfusion.EJ2.Inputs

<ejs-speechtotext id="error-speech" 
    onError="handleError" 
    onStart="handleStart" 
    onStop="handleStop">
</ejs-speechtotext>

<div id="error-message" style="display:none; color: red; padding: 10px;"></div>

<script>
    function handleError(args) {
        var errorDiv = document.getElementById("error-message");
        errorDiv.style.display = "block";
        
        var errorMessages = {
            'no-speech': '🔇 No speech detected. Please try again.',
            'audio-capture': '🎙️ Microphone not found.',
            'not-allowed': '🔒 Microphone permission denied.',
            'network': '🌐 Network error occurred.'
        };
        
        errorDiv.textContent = errorMessages[args.error] || 'Error: ' + args.error;
        setTimeout(() => { errorDiv.style.display = "none"; }, 5000);
    }

    function handleStart() {
        console.log('🎤 Listening started');
    }

    function handleStop() {
        console.log('⏹️ Listening stopped');
    }
</script>

<ejs-speechtotext 
    id="speechId"
    lang="en-US"
    allowInterimResults="true"
    cssClass="e-primary"
    enableRtl="false"
    locale="en-US"
    transcriptChanged="onTranscriptChanged"
    onStart="onStartListening"
    onStop="onStopListening"
    onError="onError"
    created="onCreated">
    
    <e-speechtotext-buttonSettings 
        content="Start Listening" 
        stopContent="Stop Listening"
        iconCss="e-icons e-play"
        stopIconCss="e-icons e-pause"
        iconPosition="Right"
        isPrimary="true">
    </e-speechtotext-buttonSettings>
    
    <e-speechtotext-tooltipSettings 
        position="TopCenter"
        content="Click to start"
        stopContent="Click to stop">
    </e-speechtotext-tooltipSettings>
</ejs-speechtotext>