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

JavaScript Web Speech API اضافه کردن تشخیص گفتار به صفحات وب شما را آسان می کند. این API امکان کنترل دقیق و انعطاف پذیری بر روی قابلیت های تشخیص گفتار در کروم نسخه 25 و جدیدتر را فراهم می کند. در اینجا یک مثال با متن شناسایی شده است که تقریباً بلافاصله هنگام صحبت ظاهر می شود.

نسخه ی نمایشی Web Speech API

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

بیایید نگاهی به زیر کاپوت بیاندازیم. ابتدا، با بررسی اینکه آیا شی webkitSpeechRecognition وجود دارد، بررسی می کنیم که آیا مرورگر از Web Speech API پشتیبانی می کند یا خیر. اگر نه، پیشنهاد می کنیم کاربر مرورگر خود را ارتقا دهد. (از آنجایی که 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 و سلسله مراتب است. تشخیص گفتار 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 در 0 انجام دهیم. با این حال، چون متن نهایی هرگز تغییر نمی‌کند، کد اینجا را با تبدیل final_transcript به صورت جهانی کمی کارآمدتر کرده‌ایم تا این رویداد بتواند حلقه for را شروع کند. در event.resultIndex و فقط هر متن نهایی جدید را اضافه کنید.

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

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

بنابراین صفحات وب خود را با فعال کردن آنها برای گوش دادن به کاربران خود زنده کنید!

ما دوست داریم نظرات شما را بشنویم...

برای آشنایی با نحوه استفاده Google از داده‌های صوتی از این API، به کاغذ سفید حریم خصوصی Chrome مراجعه کنید.