tpro-speech-sdk-js

v1.0.1

Published

a year ago

A floating microphone widget for speech recognition

Downloads

0High
0Medium
0Low

arvind5588

speech-recognition widget microphone websocket audio

T-Pro Speech SDK Js

A customizable, draggable floating microphone widget for real-time speech recognition with WebSocket support.

Features

🎤 Floating microphone widget
🔄 Real-time speech recognition
🖱️ Draggable interface
🎯 Customizable positioning
🌐 WebSocket support
📱 Responsive design
⚡ Easy integration

Installation

npm tpro-speech-sdk-js

Quick Start

import { initSpeechWidget } from 'tpro-speech-sdk-js';

const config = {
    token: 'T-PRO-ACCESS-TOKEN',
    userId: 'T-PRO-USER-ID',
    engineId: 'T-PRO-ENGINE-ID',
    languageId: 'T-PRO-LANGUAGE-ID',
    topicId: 'T-PRO-TOPIC-ID'
};

const widget = initSpeechWidget(config);

Configuration Options

Required Configuration

const config = {
    // Required parameters
    token: 'T-PRO-ACCESS-TOKEN',      // Authentication token
    userId: 'T-PRO-USER-ID',          // User identifier
    engineId: 'T-PRO-ENGINE-ID',      // Speech recognition engine ID
    languageId: 'T-PRO-LANGUAGE-ID',  // Language code
    topicId: 'T-PRO-TOPIC-ID',        // Recognition topic/context
    
    // Optional parameters
    wsServer: 'wss://your-server',   // WebSocket server URL (optional)
    position: {                      // Widget position (optional)
        bottom: 20,
        right: 20
    },
    onResult: (result) => {          // Result callback (optional)
        console.log(result);
    }
};

Position Customization

const config = {
    position: {
        top: 20,      // Distance from top in pixels
        right: 20,    // Distance from right in pixels
        bottom: 20,   // Distance from bottom in pixels
        left: 20      // Distance from left in pixels
    }
};

Usage Examples

Basic Implementation

<!DOCTYPE html>
<html>
<head>
    <title>Speech Recognition Demo</title>
</head>
<body>
    <div id="transcription"></div>
    
    <script type="module">
        import { initSpeechWidget } from 'tpro-speech-sdk-js';

        const widget = initSpeechWidget({
            token: 'T-PRO-ACCESS-TOKEN',
            userId: 'T-PRO-USER-ID',
            engineId: 'T-PRO-ENGINE-ID',
            languageId: 'T-PRO-LANGUAGE-ID',
            topicId: 'T-PRO-TOPIC-ID',
            onResult: (result) => {
                document.getElementById('transcription').textContent = result.words[0];
            }
        });
    </script>
</body>
</html>

With Error Handling

try {
    const widget = initSpeechWidget({
        token: 'T-PRO-ACCESS-TOKEN',
        userId: 'T-PRO-USER-ID',
        engineId: 'T-PRO-ENGINE-ID',
        languageId: 'T-PRO-LANGUAGE-ID',
        topicId: 'T-PRO-TOPIC-ID'
        onResult: (result) => {
            handleRecognitionResult(result);
        }
    });

    // Listen for recognition events
    window.addEventListener('recognitionResult', (event) => {
        console.log('Recognition result:', event.detail);
    });
} catch (error) {
    console.error('Failed to initialize speech widget:', error);
}

Custom Styling

/* Override default widget styles */
.speech-recognition-widget {
    background-color: #007bff;
    width: 60px;
    height: 60px;
}

.speech-recognition-widget.stop {
    background-color: #dc3545;
}

Events

The widget emits events that you can listen to:

// Recognition result event
window.addEventListener('recognitionResult', (event) => {
    const result = event.detail;
    console.log('Transcription:', result.words[0]);
    console.log('Confidence:', result.confidence);
});

API Reference

initSpeechWidget(config)

Initializes and returns a new speech recognition widget instance.

Parameters:

config (Object): Configuration options
- token (String): Authentication token
- userId (String): User identifier
- engineId (String): Speech recognition engine ID
- languageId (String): Language code
- topicId (String): Recognition topic
- wsServer (String, optional): WebSocket server URL
- position (Object, optional): Widget position
- onResult (Function, optional): Result callback

Returns:

SpeechWidget instance

Widget Methods

const widget = initSpeechWidget(config);

// Stop recording and disconnect
widget.stop();

// Update widget position
widget.updatePosition({
    bottom: 40,
    right: 40
});

Browser Support

The widget supports all modern browsers that implement the MediaRecorder API:

Chrome (desktop & mobile)
Firefox (desktop & mobile)
Edge
Safari 14.1+
Opera

Development

To contribute to the development:

# Clone the repository
git clone https://github.com/T-Pro/tpro-speech-sdk-js.git

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

Troubleshooting

Common Issues

"io is not defined" error

// Make sure socket.io-client is installed
npm install socket.io-client

// And properly imported
import { io } from 'socket.io-client';

Microphone access denied

// Ensure you have the proper permissions
await navigator.mediaDevices.getUserMedia({ audio: true });

WebSocket connection failed

// Check your token and server URL
const config = {
    token: 'T-PRO-ACCESS-TOKEN',
    wsServer: 'wss://correct-server-url'
};

License

MIT License - see the LICENSE file for details.

Support

For support, please:

Check the documentation
Open an issue
Contact support at [email protected]