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

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

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

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

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

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

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

يمكنك إضفاء الحيوية على صفحات الويب من خلال تفعيل إمكانية الاستماع إلى المستخدمين.

يُسعدنا تلقّي ملاحظاتك...

راجِع مقالة التعرّف على إعدادات الخصوصية في متصفّح Chrome للاطّلاع على سياسة الخصوصية (تم تعديلها في 16 يونيو 2026).