DaVoice Integration Guides

Step-by-step guides to integrate wake word detection into your applications across all major platforms

New to voice activation? Read what a wake word is and how wake word detection works before choosing an integration path.

⚛️React Native🎯Flutter🍎iOS (Swift)🤖Android (Kotlin)🐍Python🌐Web/JavaScript

Web/JavaScript Integration Guide

📦 Repository

GitHub: https://github.com/frymanofer/Web_WakeWordDetection

Browser-based wake word detection using Web Audio API and ONNX Runtime Web.

Step 1: Installation

# Using npm
npm install davoice-web

# Using yarn
yarn add davoice-web

# Or use CDN
<script src="https://cdn.jsdelivr.net/npm/davoice-web@latest/dist/davoice.min.js"></script>

Step 2: HTML Setup

<!DOCTYPE html>
<html>
<head>
    <title>DaVoice Wake Word Demo</title>
</head>
<body>
    <h1>Wake Word Detection</h1>
    <button id="startBtn">Start Listening</button>
    <button id="stopBtn" disabled>Stop Listening</button>
    <div id="status">Not listening</div>
    <div id="detections"></div>

    <script type="module" src="app.js"></script>
</body>
</html>

Step 3: JavaScript Implementation

import { KeywordDetector } from 'davoice-web';

class WakeWordApp {
    constructor() {
        this.detector = null;
        this.isListening = false;
        this.initializeUI();
    }

    initializeUI() {
        this.startBtn = document.getElementById('startBtn');
        this.stopBtn = document.getElementById('stopBtn');
        this.status = document.getElementById('status');
        this.detections = document.getElementById('detections');

        this.startBtn.addEventListener('click', () => this.start());
        this.stopBtn.addEventListener('click', () => this.stop());
    }

    async start() {
        try {
            // Request microphone permission
            const stream = await navigator.mediaDevices.getUserMedia({
                audio: {
                    echoCancellation: true,
                    noiseSuppression: true,
                    autoGainControl: true
                }
            });

            // Initialize detector
            this.detector = new KeywordDetector({
                modelPath: '/models/hey_jarvis.onnx',
                threshold: 0.97,
                sampleRate: 16000,
                onDetection: (result) => this.handleDetection(result)
            });

            await this.detector.initialize();
            await this.detector.start(stream);

            this.isListening = true;
            this.updateUI();
            this.status.textContent = 'Listening for wake word...';

        } catch (error) {
            console.error('Failed to start:', error);
            this.status.textContent = `Error: ${error.message}`;
        }
    }

    stop() {
        if (this.detector) {
            this.detector.stop();
            this.isListening = false;
            this.updateUI();
            this.status.textContent = 'Stopped listening';
        }
    }

    handleDetection(result) {
        console.log('Wake word detected!', result);

        const detection = document.createElement('div');
        detection.className = 'detection';
        detection.innerHTML = `
            <strong>Detected!</strong>
            Confidence: ${(result.confidence * 100).toFixed(1)}%
            Time: ${new Date().toLocaleTimeString()}
        `;
        this.detections.prepend(detection);

        // Trigger action (e.g., show voice input UI)
        this.showVoiceInput();
    }

    showVoiceInput() {
        // Implement your voice command interface here
        alert('Wake word detected! Ready for your command.');
    }

    updateUI() {
        this.startBtn.disabled = this.isListening;
        this.stopBtn.disabled = !this.isListening;
    }
}

// Initialize app
const app = new WakeWordApp();

Step 4: Advanced Features

// Web Worker for better performance
const workerDetector = new KeywordDetector({
    modelPath: '/models/wake_word.onnx',
    useWorker: true,  // Run in Web Worker
    threshold: 0.95
});

// Real-time audio visualization
const visualizer = new AudioVisualizer({
    canvasId: 'waveform',
    detector: detector
});

// Handle wake word with speech recognition
detector.onDetection = async (result) => {
    // Start Web Speech API
    const recognition = new webkitSpeechRecognition();
    recognition.lang = 'en-US';
    recognition.interimResults = false;

    recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript;
        console.log('Voice command:', transcript);
        processVoiceCommand(transcript);
    };

    recognition.start();
};

// Process voice commands
function processVoiceCommand(command) {
    const lowerCommand = command.toLowerCase();

    if (lowerCommand.includes('lights on')) {
        controlLights('on');
    } else if (lowerCommand.includes('play music')) {
        playMusic();
    }
    // Add more commands...
}

⚠️ Browser Compatibility

Wake word detection in browsers requires:

  • • HTTPS connection (required for microphone access)
  • • Modern browser (Chrome 87+, Firefox 90+, Safari 14+)
  • • WebAssembly support
  • • Web Audio API support

✅ Use Cases

  • • Voice-controlled web applications
  • • Browser-based voice assistants
  • • Interactive demos and prototypes
  • • Educational tools

Need Help Getting Started?

Our team provides free integration support and custom wake word training for all platforms.

Contact Integration SupportView GitHub Repos

Free Development Support • Code Examples • Community Discord • 1-2 Week Custom Model Turnaround