Video học lập trình mỗi ngày

Speech Recognition API - Chuyển giọng nói thành văn bản javascript Speech Recognition API - Trên thực tế có hai loại API trong HTML5 về Web Speech đó là (Speech Recognition) và loại còn lại là (Speech Synthesis). Hai thuật ngữ này nghe có vẻ rất cao siêu, nhưng trên thực tế cả hai api này đề cập đến "lời nói thành văn bản" và "văn bản thành lời nói". Nó chỉ vậy mà thôi. Bài viết này tập trung vào chuyển đổi lời nói thành văn bản và các bạn viết sách hay review sách đều rất cần đó là sử dụng SpeechRecognition API và lưu ý rằng hiện chỉ được Chrome hỗ trợ. Vui lòng kiếm tra trước khi test -> https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

speech recognition là gì

speech recognition là gì? Vẫn là một câu hỏi là gì của các developer khi bắt đầu tìm hiểu, để tìm hiểu rõ về Windows Speech Recognition là gì? thì chúng ta hãy tìm hiểu kỹ một chút về API này. Speech Recognition API hay còn gọi là công nghệ nhận dạng giọng nói, cũng có một số API liên quan khác được sử dụng để hiển thị kết quả, ngữ pháp, v.v. 

Những kết quả này có thể được sử dụng làm đầu vào bởi các API khác để thực hiện các tác vụ khác nhau. Thật không may là công nghệ này chưa phổ biến nhiều trình duyệt, như bạn có thể thấy từ biểu đồ khả năng tương thích bên dưới rằng Chrome là trình duyệt duy nhất đã triển khai nó. 

Lưu ý: Khi bạn đang sử dụng API nhận dạng giọng nói, trình duyệt rất có thể sẽ yêu cầu bạn cho phép sử dụng micrô của mình. Song song với việc tìm hiểu "speech recognition là gì?" thì bạn cũng không quên tìm kiếm định nghĩa về " Speech Synthesis là gì" luôn đi. Sau này khỏi mất công tìm hiểu.

Chuyển giọng nói thành văn bản online javascript

Trong bài này tips javascript làm một ví dụ cho các bạn về sách sử dụng Speech Recognition API và có ví dụ cụ thể luôn, theo dõi để tiếp tục code 

Demo: 

Tạo một phiên bản SpeechRecognition mới

var recognition = new webkitSpeechRecognition();

Đặt tiếp tục nghe hay tắt sau khi nghe tiếp âm thanh.

recognition.continuous = true;

Đặt có cho phép kết quả tạm thời hay không. Kết quả tạm thời là quá trình nhận dạng trung gian.

recognition.interimResults = true;

cài đặt ngôn ngữ

recognition.lang = 'en-US'; // ở đây ví dụ là Mỹ, còn Việt Nam là 'vi-VN' nhé.

Để kiểm soát việc bắt đầu và dừng nhận dạng giọng nói, bạn có thể sử dụng các phương thức start() và stop(), tương ứng với các sự kiện onstart và onend tương ứng

// start
recognition.start();
// Stop
recognition.stop();

Để xử lý kết quả nhận được sau khi start hay stop thì chúng ta có thể sử dụng event sau :

recognition.onresult = function(event) { 
    console.log(event);
}

Định dạng kết quả trả về sự kiện:

{
    results: {
        0: {
              	0: {
                	confidence: 0.695017397403717,
                	transcript: "xin chào mọi người"
              	},
              	isFinal:true,
              	length:1
        },
        length:1
    },
}

Xử lý lỗi

recognition.onerror = function(event) { 
    console.log(event);
}

Source Code Full

javascript:

class SpeechRecognitionApi{
    constructor(options) {
        const SpeechToText = window.speechRecognition || window.webkitSpeechRecognition;
        this.speechApi = new SpeechToText();
        this.speechApi.continuous = true;
        this.speechApi.interimResults = false;
        this.output = options.output ? options.output : document.createElement('div');
        console.log(this.output)
        this.speechApi.onresult = (event)=> { 
            console.log(event);
            var resultIndex = event.resultIndex;
            var transcript = event.results[resultIndex][0].transcript;

            console.log('transcript>>', transcript);
            console.log(this.output)
            this.output.textContent = transcript;

            
        }
    }
    init(){
        this.speechApi.start();
    }
    stop(){
        this.speechApi.stop();
    }
}

window.onload = function(){
    var speech = new SpeechRecognitionApi({
        output: document.querySelector('.output')
    })

    document.querySelector('.btn-start').addEventListener('click', function () {
        speech.init()
    })

    document.querySelector('.btn-stop').addEventListener('click', function () {
        speech.stop()
    })

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Anonystick - example speech to text javasctipt</title>
</head>
<body>
    <button class="btn-start">Start</button>
    <button class="btn-stop">Stop</button>
    <textarea class="output" cols="30" rows="10"></textarea>
    <script src="./app.js"></script>
</body>
</html>

hoặc có thể tải code tại: GITHUB 

Tham khảo thêm: developer.mozilla.org