Web Speech Recognition

Bài đăng này đã không được cập nhật trong 7 năm

Web Speech API

The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.)

Mặc dù đây mới chỉ là công nghệ thử nghiệm nhưng nó cũng khá lý thú. Trong bài viết này mình không đề cập nhiều tới các công nghệ này mà chỉ xây dựng một vài ví dụ về sử dụng nó trong thực tế.

Chúng ta cùng tìm hiểu qua các khái niệm (concepts) và cách sử dụng cơ bản của Web speech api.

Concepts and Usage

1. Nhận dạng giọng nói

Được sử dụng thông qua SpeechRecognition interface, nó cung cấp khả năng nhận dạng ngôn ngữ từ âm thanh và trả về những nhận dạng thích hợp nhất.

Nói chung, bạn sẽ tạo một đối tượng SpeechRecognition, nó có sẵn một số bộ xử lý sự kiện để phát hiện khi nào giọng nói được nhập thông qua micrô của thiết bị. SpeechGrammar interface chứa một bộ ngữ pháp cụ thể mà ứng dụng của bạn cần nhận ra. Ngữ pháp được định nghĩa bằng cách sử dụng JSpeech Grammar Format (JSGF.)

2. Tổng hợp giọng nói.

Được sử dụng thông qua SpeechSynthesis interface, nó cho phép các chương trình có thể "đọc" các đoạn văn bản mà chúng ta cung cấp. Bạn có thể sử dụng hay thay đổi các loại giọng nói khác nhau được cung cấp thông qua object SpeechSynthesisVoice.

Speech to text

Chúng ta cùng tìm hiểu về nhận dạng giọng nói thông qua 1 ví dụ đơn giản dưới đây.

Đầu tiên chúng ta cần tạo một đối tượng recognitionmới và đặt một số cài đặt đơn giản.

let recognizing = false; // true when start recognize
let ignore_onend;
let start_timestamp;

// Create new speech recognize
const recognition = new webkitSpeechRecognition();

// Simple setting
recognition.continuous = false; // Set true if you want it continuous to recognize
recognition.interimResults = true; // Set true if you want it return interim result

Tiếp theo chúng ta đi vào xử lý khi chúng ta bắt đầu (onstart), nhận kết quả (onresult), gặp lỗi (onerror), kết thúc (onend). Note:showInfo là phương thức chúng ta sử dụng để thông báo cho người dùng trong quá trình sử dụng.

// Start speak
recognition.onstart = function() {
    recognizing = true;
};

// Handle speak error
recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
        showInfo('info_no_speech');
        ignore_onend = true;
    }
    
    // No microphone
    if (event.error == 'audio-capture') {
        showInfo('info_no_microphone');
        ignore_onend = true;
    }
    
    // if browser is not allowed to use speaker or micro
    if (event.error == 'not-allowed') {
        if (event.timeStamp - start_timestamp < 100) {
            showInfo('info_blocked');
        } else {
            showInfo('info_denied');
        }
        
        ignore_onend = true;
    }
};

// When it got result (run many time)
recognition.onresult = function(event) {
    let interim_transcript = '';
    for (let i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            final_transcript = event.results[i][0].transcript;
        } else {
            interim_transcript += event.results[i][0].transcript;
        }
    }

    final_transcript = capitalize(final_transcript); // Set final result (it won't return until recognition ended)
    interim_span.innerHTML = linebreak(capitalize(interim_transcript)); // Show current result
};

// When you stop speak and it recognized your speech
recognition.onend = function() {
    recognizing = false; //
    if (ignore_onend) {
        return;
    }

    if (!final_transcript) {
        return;
    }

    // Return last transcript by callback function
    if (resultCallback && typeof resultCallback === 'function') {
        resultCallback(final_transcript);
    }
};

Vậy là chúng ta đã có một recognition. Tiếp theo cần 2 phương thức để bắt đầu (startRecognize) và dừng (stopRecognize) nhận dạng.

/** 
 * Start recognize
 * @param string language - language code of input voice
 * @param function onResult
 */
function startRecognize(language, onResult) {
    if (recognizing) { // if recognizing, stop it and return
        recognition.stop();
        return;
    }

    final_transcript = ''; // Reset final transcript
    recognition.lang = language; // Set language for recognition
    recognition.start(); // Start....
    ignore_onend = false;
    showInfo('info_allow');
    start_timestamp = event.timeStamp;
    resultCallback = onResult;
}

// Force stop recognize
function stopRecognize() {
    // Send last recognize text
    if (resultCallback && final_transcript) {
        resultCallback(final_transcript);
    }

    recognition.stop();
}

Phía trên là code cơ bản cho việc sử dụng Web Speech API để nhận diện giọng nói. Và đây là thành quả:

Mã nguồn: speech2text

Mở rộng

Chúng ta đã nhận diện được giọng nói rồi nhưng dịch tự động thì sao?

Hầu hết chúng ta cũng đã biết về google translate và google cũng có sẵn api cho việc dịch tự động này - https://cloud.google.com/translate/. Google translate api miễn phí cho 1 tỉ kí tự đầu tiên, từ những kí tự tiếp theo chúng ta phải trả phí cho việc sử dụng api này.

Mình khá là ngại khi phải đăng kí sử dụng api bên google nên mình sử dụng api của yandex.net. Nó cho đăng kí miễn phí và không phải nhập thông tin về thẻ thanh toán. Đầu tiên chúng ta cần phải đăng kí user và tạo api key trên yandex - https://translate.yandex.com/developers/keys. Vậy là xong, tiếp theo là gửi request lên và nhận kết quả.

function translateText(text) {
    let obj = {
        text,
        lang: 'en', // ngôn ngữ mà bạn muốn dịch
        format: 'plain'
    }
    
    axios.post('https://translate.yandex.net/api/v1.5/tr.json/translate?key=' + API_KEY + '&' + this.serialize(obj))
        .then(response => {
            let text = response.data.text[0]; // retrieve translated text
        });
}

Và đây là thành quả: