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

افتح موقع 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 على الويب موجودة منذ سنوات قليلة حتى الآن ، لكن الأمر يتطلب المزيد من العمل الآن لتضمينه في موقع الويب الخاص بك.

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

<!-- 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 الذي يقوم بكل العمل الثقيل.

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

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

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

1. إذا تم تضمين مربع Form / Search Form HTML داخل موقع HTTPS ، فلن يطلب المتصفح مرارًا وتكرارًا إذنًا لاستخدام الميكروفون.
2. يمكنك تغيير قيمة خاصية الاعتراف. lang من “en-us” إلى لغة أخرى (مثل Hi-in للهندودي أو FR-FR لـ Français). انظر القائمة الكاملة للغات المدعومة.