ভয়েস চালিত ওয়েব অ্যাপস - ওয়েব স্পিচ API এর পরিচিতি

নতুন জাভাস্ক্রিপ্ট ওয়েব স্পিচ এপিআই আপনার ওয়েব পেজগুলিতে স্পিচ রিকগনিশন যুক্ত করা সহজ করে তোলে। এই এপিআই ক্রোম সংস্করণ ২৫ এবং তার পরবর্তী সংস্করণগুলিতে স্পিচ রিকগনিশন ক্ষমতার উপর সূক্ষ্ম নিয়ন্ত্রণ এবং নমনীয়তা প্রদান করে। এখানে একটি উদাহরণ দেওয়া হলো যেখানে কথা বলার সাথে সাথেই শনাক্ত করা লেখাটি প্রায় সঙ্গে সঙ্গেই প্রদর্শিত হয়।

ওয়েব স্পিচ এপিআই ডেমো

ডেমো / উৎস

চলুন এর কার্যপ্রণালীটি একটু খতিয়ে দেখা যাক। প্রথমে, আমরা webkitSpeechRecognition অবজেক্টটি আছে কি না তা পরীক্ষা করে দেখি যে ব্রাউজারটি ওয়েব স্পিচ এপিআই (Web Speech API) সমর্থন করে কি না। যদি না করে, আমরা ব্যবহারকারীকে তার ব্রাউজার আপগ্রেড করার পরামর্শ দিই। (যেহেতু এপিআইটি এখনও পরীক্ষামূলক পর্যায়ে রয়েছে, তাই বর্তমানে এর নামের আগে ভেন্ডরের নাম যুক্ত করা আছে।) সবশেষে, আমরা webkitSpeechRecognition অবজেক্টটি তৈরি করি, যা স্পিচ ইন্টারফেসটি সরবরাহ করে, এবং এর কিছু অ্যাট্রিবিউট ও ইভেন্ট হ্যান্ডলার সেট করি।

if (!('webkitSpeechRecognition' in window)) {
    upgrade();
} else {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onstart = function() { ... }
    recognition.onresult = function(event) { ... }
    recognition.onerror = function(event) { ... }
    recognition.onend = function() { ... }
    ...

continuous এর ডিফল্ট মান হলো 'false', যার অর্থ হলো ব্যবহারকারী কথা বলা বন্ধ করলে স্পিচ রিকগনিশনও বন্ধ হয়ে যাবে। এই মোডটি ছোট ইনপুট ফিল্ডের মতো সাধারণ টেক্সটের জন্য খুবই উপযোগী। এই ডেমোতে , আমরা এটিকে 'true'-তে সেট করেছি, যাতে ব্যবহারকারী কথা বলার সময় বিরতি নিলেও রিকগনিশন চলতে থাকে।

interimResults এর ডিফল্ট মান হলো false, যার অর্থ হলো রিকগনাইজার দ্বারা ফেরত দেওয়া ফলাফলগুলোই চূড়ান্ত এবং অপরিবর্তনীয়। ডেমোটিতে এটিকে true সেট করা হয়েছে, ফলে আমরা প্রাথমিক ও অন্তর্বর্তীকালীন ফলাফল পাই যা পরিবর্তিত হতে পারে। ডেমোটি মনোযোগ দিয়ে দেখুন, ধূসর রঙের লেখাটি হলো অন্তর্বর্তীকালীন এবং মাঝে মাঝে পরিবর্তিত হয়, অন্যদিকে কালো রঙের লেখাগুলো হলো রিকগনাইজারের দেওয়া চূড়ান্ত প্রতিক্রিয়া যা অপরিবর্তিত থাকবে।

শুরু করার জন্য, ব্যবহারকারী মাইক্রোফোন বোতামে ক্লিক করেন, যা এই কোডটি চালু করে:

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

আমরা স্পিচ রিকগনাইজারের জন্য কথিত ভাষার 'lang' অংশটি ব্যবহারকারীর নির্বাচন ড্রপ-ডাউন তালিকা থেকে বেছে নেওয়া BCP-47 মানটিতে সেট করি, যেমন ইংরেজি-যুক্তরাষ্ট্রের জন্য “en-US”। যদি এটি সেট করা না থাকে, তবে এটি ডিফল্টভাবে HTML ডকুমেন্ট রুট এলিমেন্ট এবং হায়ারার্কির ভাষা ব্যবহার করে। ক্রোম স্পিচ রিকগনিশন অসংখ্য ভাষা সমর্থন করে (ডেমো সোর্সের “ langs ” টেবিলটি দেখুন), সেইসাথে কিছু ডান থেকে বামে লেখা ভাষাও সমর্থন করে যা এই ডেমোতে অন্তর্ভুক্ত নয়, যেমন he-IL এবং ar-EG।

ভাষা সেট করার পর, স্পিচ রিকগনাইজারটি সক্রিয় করতে আমরা recognition.start() কল করি। এটি অডিও ক্যাপচার করা শুরু করলে, onstart ইভেন্ট হ্যান্ডলারকে কল করে এবং এরপর প্রতিটি নতুন ফলাফলের সেটের জন্য onresult ইভেন্ট হ্যান্ডলারকে কল করে।

recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var 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);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    };
}

এই হ্যান্ডলারটি এখন পর্যন্ত প্রাপ্ত সমস্ত ফলাফলকে একত্রিত করে দুটি স্ট্রিং তৈরি করে: final_transcript এবং interim_transcript । ফলাফলস্বরূপ প্রাপ্ত স্ট্রিংগুলিতে "\n" থাকতে পারে, যেমন যখন ব্যবহারকারী "new paragraph" বলেন, তাই আমরা linebreak ফাংশন ব্যবহার করে সেগুলিকে HTML ট্যাগ <br> বা <p> তে রূপান্তর করি। সবশেষে, এটি এই স্ট্রিংগুলিকে তাদের সংশ্লিষ্ট <span> এলিমেন্টের innerHTML হিসেবে সেট করে: final_span যা কালো টেক্সট দিয়ে স্টাইল করা হয়, এবং interim_span , যা ধূসর টেক্সট দিয়ে স্টাইল করা হয়।

interim_transcript একটি লোকাল ভ্যারিয়েবল, এবং প্রতিবার এই ইভেন্টটি কল করার সময় এটি সম্পূর্ণরূপে পুনর্গঠিত হয়, কারণ শেষ onresult ইভেন্টের পর থেকে সমস্ত অন্তর্বর্তীকালীন ফলাফল পরিবর্তিত হয়ে থাকতে পারে। আমরা for লুপটি 0 থেকে শুরু করে final_transcript জন্যও একই কাজ করতে পারতাম। কিন্তু, যেহেতু চূড়ান্ত টেক্সট কখনও পরিবর্তিত হয় না, তাই আমরা final_transcript গ্লোবাল করে কোডটিকে আরও কিছুটা কার্যকর করেছি, যাতে এই ইভেন্টটি event.resultIndex থেকে for লুপ শুরু করতে পারে এবং শুধুমাত্র যেকোনো নতুন চূড়ান্ত টেক্সট যুক্ত করতে পারে।

ব্যাস! বাকি কোডটা শুধু সবকিছুকে সুন্দর দেখানোর জন্য রাখা হয়েছে। এটি স্টেট বজায় রাখে, ব্যবহারকারীকে কিছু তথ্যপূর্ণ বার্তা দেখায় এবং মাইক্রোফোন বাটনের GIF ইমেজটিকে স্থির মাইক্রোফোন, মাইক-স্ল্যাশ ইমেজ ও স্পন্দিত লাল বিন্দুসহ মাইক-অ্যানিমেটের মধ্যে অদলবদল করে।

recognition.start() কল করা হলে mic-slash ছবিটি দেখানো হয় এবং onstart চালু হলে তা mic-animate দিয়ে প্রতিস্থাপিত হয়। সাধারণত এই প্রক্রিয়াটি এত দ্রুত ঘটে যে স্ল্যাশটি চোখে পড়ে না, কিন্তু প্রথমবার স্পিচ রিকগনিশন ব্যবহার করার সময়, Chrome-কে মাইক্রোফোন ব্যবহারের জন্য ব্যবহারকারীর কাছে অনুমতি চাইতে হয়, সেক্ষেত্রে onstart কেবল তখনই চালু হয় যখন ব্যবহারকারী অনুমতি দেন। HTTPS-এ হোস্ট করা পেজগুলোকে বারবার অনুমতি চাইতে হয় না, কিন্তু HTTP-তে হোস্ট করা পেজগুলোকে তা করতে হয়।

তাই আপনার ওয়েব পেজগুলোকে ব্যবহারকারীদের কথা শোনার ক্ষমতা দিয়ে সেগুলোকে প্রাণবন্ত করে তুলুন!

আমরা আপনার মতামত জানতে আগ্রহী...

আমাদের গোপনীয়তা নীতির জন্য Chrome-এর গোপনীয়তা বুঝুন (হালনাগাদ: ১৬ জুন, ২০২৬) দেখুন।