كيفية إضافة ميزة التعرف على الكلام إلى موقع الويب الخاص بك

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

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

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

<style>
  .speech {
    border: 1px solid #ddd;
    width: 300px;
    padding: 0;
    margin: 0;
  }

  .speech input {
    border: 0;
    width: 240px;
    display: inline-block;
    height: 30px;
    font-size: 14px;
  }

  .speech img {
    float: right;
    width: 40px;
  }
</style>

<form id="labnol" method="get" action="http://www.labnol.org">
  <div class="speech">
    <input type="text" name="s" id="transcript" placeholder="Say Something" />
    <img onclick="startDictation()" src="https://i.imgur.com/cHidSVu.gif" />
  </div>
</form>

<script>
  function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = 'en-US';
      recognition.start();

      recognition.onresult = function (e) {
        document.getElementById('transcript').value = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };
      recognition.onerror = function (e) {
        recognition.stop();
      };
    }
  }
</script>

أضف ميزة التعرف على الصوت إلى موقع الويب الخاص بك

لقد كانت واجهة برمجة تطبيقات HTML5 Web Speech موجودة منذ بضع سنوات حتى الآن، ولكنها تتطلب المزيد من العمل الآن لتضمينها في موقع الويب الخاص بك.

في وقت سابق، كان بإمكانك إضافة السمة x-webkit-speech إلى أي حقل إدخال للنموذج وسيصبح قادرًا على استخدام الصوت. ومع ذلك، فقد تم إهمال سمة x-webkit-speech ويتعين عليك الآن استخدام JavaScript API لتضمين ميزة التعرف على الكلام. إليك الكود المحدث:

<!-- CSS Styles -->
<style>
  .speech {
    border: 1px solid #ddd;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .speech input {
    border: 0;
    width: 240px;
    display: inline-block;
    height: 30px;
  }
  .speech img {
    float: right;
    width: 40px;
  }
</style>

<!-- Search Form -->
<form id="labnol" method="get" action="https://www.google.com/search">
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>

<!-- HTML5 Speech Recognition API -->
<script>
  function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = 'en-US';
      recognition.start();

      recognition.onresult = function (e) {
        document.getElementById('transcript').value = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };

      recognition.onerror = function (e) {
        recognition.stop();
      };
    }
  }
</script>

لدينا CSS لوضع صورة الميكروفون داخل مربع الإدخال، ورمز النموذج الذي يحتوي على زر الإدخال وجافا سكريبت الذي يقوم بكل العمل الشاق.

عندما يقوم المستخدم بالنقر فوق صورة الميكروفون داخل مربع البحث، يتحقق JavaScript مما إذا كان متصفح المستخدم يدعم التعرف على الكلام. إذا كان الأمر كذلك، فإنه ينتظر وصول النص المكتوب من خوادم Google ثم يرسل النموذج.

يستخدم تطبيق الإملاء أيضًا واجهة برمجة تطبيقات التعرف على الكلام على الرغم من أنه يكتب النص المكتوب في حقل منطقة النص بدلاً من مربع الإدخال.

بعض الملاحظات:

1. إذا كان نموذج HTML / مربع البحث مضمنًا داخل موقع ويب HTTPS، فلن يطلب المتصفح الإذن بشكل متكرر لاستخدام الميكروفون.
2. يمكنك تغيير قيمة خاصيةcognito.lang من ‘en-US’ إلى لغة أخرى (مثل hi-In للغة الهندية أو fr-FR للغة الفرنسية). اطلع على القائمة الكاملة للغات المدعومة.