برنامه های وب مبتنی بر صدا - مقدمه ای بر Web Speech API

API جدید گفتار وب جاوا اسکریپت، افزودن تشخیص گفتار به صفحات وب شما را آسان می‌کند. این API امکان کنترل دقیق و انعطاف‌پذیری بر قابلیت‌های تشخیص گفتار در کروم نسخه ۲۵ و بالاتر را فراهم می‌کند. در اینجا مثالی آورده شده است که متن تشخیص داده شده تقریباً بلافاصله هنگام صحبت کردن ظاهر می‌شود.

نسخه آزمایشی API گفتار وب

نسخه آزمایشی / منبع

بیایید نگاهی به جزئیات بیندازیم. ابتدا، با بررسی وجود شیء webkitSpeechRecognition ، بررسی می‌کنیم که آیا مرورگر از Web Speech API پشتیبانی می‌کند یا خیر. اگر اینطور نباشد، پیشنهاد می‌کنیم کاربر مرورگر خود را ارتقا دهد. (از آنجایی که این API هنوز آزمایشی است، در حال حاضر با پیشوند vendor شناخته می‌شود.) در نهایت، شیء 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 و سلسله مراتب آن تنظیم می‌شود. تشخیص گفتار Chrome از زبان‌های متعددی پشتیبانی می‌کند (به جدول " 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" باشند، مانند زمانی که کاربر "پاراگراف جدید" را بیان می‌کند، بنابراین ما از تابع linebreak برای تبدیل این موارد به تگ‌های HTML <br> یا <p> استفاده می‌کنیم. در نهایت، این رشته‌ها را به عنوان innerHTML عناصر <span> مربوطه تنظیم می‌کند: final_span که با متن سیاه استایل‌بندی شده است و interim_span که با متن خاکستری استایل‌بندی شده است.

interim_transcript یک متغیر محلی است و هر بار که این رویداد فراخوانی می‌شود، کاملاً بازسازی می‌شود زیرا ممکن است تمام نتایج موقت از آخرین رویداد onresult تغییر کرده باشند. می‌توانیم همین کار را برای final_transcript نیز با شروع حلقه for از ۰ انجام دهیم. با این حال، از آنجا که متن نهایی هرگز تغییر نمی‌کند، ما با سراسری کردن final_transcript ، کد را کمی کارآمدتر کرده‌ایم، به طوری که این رویداد می‌تواند حلقه for را از event.resultIndex شروع کند و فقط هر متن نهایی جدید را اضافه کند.

همین! بقیه کد فقط برای زیبا جلوه دادن همه چیز وجود دارد. این کد حالت را حفظ می‌کند، پیام‌های آموزنده‌ای به کاربر نشان می‌دهد و تصویر GIF روی دکمه میکروفون را بین میکروفون ثابت، تصویر mic-slash و mic-animate با نقطه قرمز ضربان‌دار جابجا می‌کند.

تصویر mic-slash هنگام فراخوانی تابع recognition.start() نمایش داده می‌شود و سپس هنگام onstart با mic-animate جایگزین می‌شود. معمولاً این اتفاق آنقدر سریع می‌افتد که علامت slash قابل توجه نیست، اما اولین باری که از تشخیص گفتار استفاده می‌شود، کروم باید از کاربر اجازه استفاده از میکروفون را بخواهد، که در این صورت onstart فقط زمانی و در صورت اجازه کاربر اجرا می‌شود. صفحات میزبانی شده بر روی HTTPS نیازی به درخواست مکرر اجازه ندارند، در حالی که صفحات میزبانی شده با HTTP این کار را انجام می‌دهند.

بنابراین با فعال کردن امکان گوش دادن به کاربران، به صفحات وب خود جان ببخشید!

خوشحال میشیم نظراتتون رو بشنویم...

برای اطلاع از سیاست حفظ حریم خصوصی ما، به بخش «درک حریم خصوصی در کروم» مراجعه کنید (به‌روزرسانی: ۱۶ ژوئن ۲۰۲۶).