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

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

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

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

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

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

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

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

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