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

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

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

الإصدار التجريبي / المصدر

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

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

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 على زر الميكروفون بين الميكروفون الثابت والصورة المائلة للميكروفون وتحريك الميكروفون مع النقطة الحمراء النابضة.

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

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

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

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