تطبيقات الويب التي تعتمد على الصوت - مقدمة عن واجهة برمجة تطبيقات Web Speech

تعمل Web Speech API الجديدة على تسهيل إضافة ميزة التعرّف على الكلام إلى صفحاتك على الويب. تتيح واجهة برمجة التطبيقات هذه التحكم الدقيق في إمكانات التعرف على الكلام في الإصدار 25 من Chrome والإصدارات الأحدث. في ما يلي مثال يظهر النص الذي تم التعرّف عليه على الفور تقريبًا أثناء التحدّث.

عرض توضيحي لواجهة برمجة تطبيقات Web Speech

DEMO / المصدر

لنلقِ نظرة على التفاصيل. أولاً، نتأكّد مما إذا كان المتصفِّح متوافقًا مع Web Speech API من خلال التأكّد من توفُّر الكائن webkitSpeechRecognition. إذا لم يكن كذلك، نقترح على المستخدم ترقية المتصفح. (بما أنّ واجهة برمجة التطبيقات لا تزال في مرحلة تجريبية، فهي تعمل حاليًا على إنشاء حسابات كبادئة.) وأخيرًا، ننشئ الكائن 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 التلقائية على "خطأ"، ما يعني أنّه عندما يتوقف المستخدم عن التحدّث، ستنتهي ميزة التعرّف على الكلام. ويُعدّ هذا الوضع رائعًا للنصوص البسيطة مثل حقول الإدخال القصيرة. في هذا العرض التوضيحي، يتم ضبطها على "صحيح" لكي يستمر التعرّف على الصوت حتى إذا توقّف المستخدم مؤقتًا أثناء التحدّث.

القيمة التلقائية لـ interimResults هي "false"، ما يعني أن النتائج الوحيدة التي تعرضها أداة التعرف هي النتائج النهائية ولن تتغير. يضبط العرض التوضيحي الأمر على "صحيح" حتى نحصل على نتائج مبكرة ومؤقتة قد تتغير. شاهد العرض التوضيحي بعناية، فالنص الرمادي هو النص المؤقت والذي يتغير أحيانًا، في حين أن النص الأسود هو ردود من أداة التعرف على أنها نهائية ولن تتغير.

للبدء، ينقر المستخدم على زر الميكروفون، مما يؤدي إلى تشغيل هذا الرمز:

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>. وأخيرًا، تضبط هذه السلاسل على أنّها HTML داخلي لعناصر <span> المقابلة لها: final_span بنمط نص أسود، وinterim_span ذات نمط نص رمادي.

interim_transcript هو متغير محلي وتتم إعادة إنشائه بالكامل في كل مرة يتم فيها استدعاء هذا الحدث لأنه من الممكن أن تكون جميع النتائج المؤقتة قد تغيّرت منذ آخر حدث onresult. يمكننا تنفيذ الإجراء نفسه مع final_transcript من خلال بدء التكرار الحلقي for عند 0. وبما أنّ النص النهائي لا يتغيّر أبدًا، جعلنا الرمز هنا أكثر فعالية من خلال جعل final_transcript عامة، بحيث يمكن لهذا الحدث بدء التكرار الحلقي for في event.resultIndex وإلحاق أي نص نهائي جديد فقط.

هذا كل شيء. باقي التعليمات البرمجية موجودة فقط لجعل كل شيء يبدو جميلاً. تحافظ هذه الخدمة على الحالة، وتعرض للمستخدم بعض الرسائل الإعلامية، وتستبدل صورة GIF على زر الميكروفون بين الميكروفون الثابت والصورة المائلة للميكروفون وتحريك الميكروفون باستخدام النقطة الحمراء الوامضة.

يتم عرض صورة الشرطة المائلة للميكروفون عند استدعاء recognition.start()، ويتم بعد ذلك استخدام صورة متحركة للميكروفون عند تنشيط onstart. ويحدث ذلك عادةً بسرعة كبيرة لدرجة أنّ الشرطة المائلة غير مرئية، ولكن عند استخدام ميزة التعرّف على الكلام لأول مرة، يحتاج Chrome إلى طلب الإذن من المستخدم لاستخدام الميكروفون، وفي هذه الحالة لا يتم تنشيط onstart إلا في حال سماح المستخدم له بذلك. لا تحتاج الصفحات التي تتم استضافتها على HTTPS إلى طلب الإذن بشكل متكرر، في حين أن الصفحات المستضافة عبر HTTP تجري ذلك.

لذا اجعل صفحات الويب تنبض بالحياة من خلال تمكينهم من الاستماع إلى المستخدمين!

تسرّنا معرفة ملاحظاتك...

يمكنك الرجوع إلى التقرير الموجز لخصوصية Chrome للتعرّف على كيفية تعامل Google مع البيانات الصوتية من واجهة برمجة التطبيقات هذه.