كيفية إضافة ميزة تحويل النص إلى كلام على أي صفحة ويب

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

واجهة برمجة تطبيقات الكلام عبر الويب

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

الرمز الأولي والتحقق من الدعم

للبدء ، دعونا ننشئ صفحة ويب بها لي عينة النص أن روى, و ثلاثة أزرار.

 
    
 
 
الأرنب مع العديد من الأصدقاء
  
وكان الأرنب شعبية جدا مع ... 
 
لكنه رفض ، مشيرا إلى أن ... 
  
المغزى من القصة… 
 
 

الأزرار ستكون ضوابط السرد. الآن نحن بحاجة للتأكد إذا كان UA يدعم اصطناع الكلام جهة تعامل. للقيام بذلك ، نتحقق بسرعة باستخدام JavaScript إذا كان نافذة او شباك كائن لديه 'اصطناع الكلام' خاصية, أم لا.

 onload = function () if ('speechSynthesis' in window) / * توليف الكلام المدعوم * / آخر / * توليف الكلام غير معتمد * / 

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

عندما ينقر المستخدم على أحد الأزرار ، تكون وظيفته (onClickPlay (), onClickPause (), onClickStop ()) وسوف يطلق.

 if ('speechSynthesis' in window) var synth = speechSynthesis؛ فار العلم = خطأ ؛ / * مراجع إلى الأزرار * / var playEle = document.querySelector ('# play')؛ var pauseEle = document.querySelector ('# pause')؛ var stopEle = document.querySelector ('# stop')؛ / * انقر فوق معالجات الأحداث للأزرار * / playEle.addEventListener ('انقر' ، onClickPlay) ؛ pauseEle.addEventListener ('انقر' ، onClickPause) ؛ stopEle.addEventListener (انقر فوق ، onClickStop) ؛ وظيفة onClickPlay ()  وظيفة onClickPause ()  وظيفة onClickStop ()  

إنشاء وظائف مخصصة

دعنا الآن بناء وظائف النقر من الأزرار الفردية الثلاثة التي سيتم استدعاؤها بواسطة معالجات الأحداث.

1. لعب / استئناف

عند النقر على زر التشغيل ، نحن أولاً افحص ال علم. إذا كان كذلك خاطئة, وضعناها ل صحيح, حتى إذا تم النقر فوق الزر في وقت لاحق ، فإن الرمز داخل أول إذا الشرط لن ينفذ (ليس حتى العلم خاطئة مرة أخرى).

بعدها نحن إنشاء مثيل جديد من SpeechSynthesisUtterance الواجهة التي تحتوي على معلومات حول الخطاب ، مثل النص المراد قراءته وحجم الكلام والصوت المنطوق والسرعة ودرجة الصوت ولغة الكلام. نضيف نص المقال كمعلمة منشئ, وإسنادها إلى كلام متغير.

 تعمل onClickPlay () if (! flag) flag = true؛ النطق = جديد SpeechSynthesisUtterance (document.querySelector ('article'). textContent)؛ utterance.voice = synth.getVoices () [0]؛ utterance.onend = function () flag = false؛ ؛ synth.speak (الكلام)؛  if (synth.paused) / * إلغاء الإيقاف المؤقت / استئناف السرد * / synth.resume ()؛  

نحن نستخدم ال SpeechSynthesis.getVoices () طريقة ل حدد صوتًا للخطاب من الأصوات المتاحة في جهاز المستخدم. نظرًا لأن هذه الطريقة تُرجع مجموعة من جميع خيارات الصوت المتاحة في أي جهاز ، فإننا تخصيص أول صوت متاح للجهاز باستخدام utterance.voice = synth.getVoices () [0]؛ بيان.

ال على نهاية تمثل الخاصية معالج حدث أعدم عند الانتهاء من الكلام. بداخله ، نغير قيمة علم متغير العودة إلى كاذبة بحيث الرمز الذي يبدأ الخطاب يمكن تنفيذها عندما يكون الزر النقر مرة أخرى.

ثم نسميه SpeechSynthesis.speak () طريقة من أجل ابدأ السرد. نحن بحاجة أيضا إلى التحقق إذا تم إيقاف السرد, التي نستخدمها للقراءة فقط SpeechSynthesis.paused خاصية. إذا تم إيقاف السرد مؤقتًا ، فسنحتاج إلى ذلك استئناف السرد على زر النقر ، والتي يمكننا أن أتحقق باستخدام SpeechSynthesis.resume () طريقة.

2. وقفة

الآن لنقم بإنشاء onClickPause () الوظيفة التي تحقق أولا إذا كان السرد مستمرًا ولم يتوقف مؤقتًا. يمكننا اختبار هذه الشروط من خلال الاستفادة من SpeechSynthesis.speaking و ال SpeechSynthesis.paused الخصائص. إذا كانت كل الشروط صحيحة ، لدينا onClickPause () وظيفة توقف الكلام عن طريق الاتصال على SpeechSynthesis.pause () طريقة.

 تعمل على onClickPause () if (synth.speaking &&! synth.paused) / * pause narrative * / synth.pause ()؛  

3. توقف

ال onClickStop () وظيفة هي بنيت على غرار ل onClickPause (). إذا كان الخطاب مستمرًا ، فنحن توقف عن ذلك عن طريق الاتصال على SpeechSynthesis.cancel () طريقة ذلك يزيل كل الكلام.

 تعمل على onClickStop () if (synth.speaking) / * stop narrative * / / * for safari * / flag = false؛ synth.cancel ()؛  

لاحظ أن على إلغاء الكلام ، و على نهاية يتم إطلاق الحدث تلقائيًا, وقد أضفنا بالفعل رمز إعادة تعيين العلم بداخله. ومع ذلك, يوجد خطأ في متصفح Safari الذي يمنع هذا الحدث من إطلاق النار ، وهذا هو السبب في أننا إعادة توطين العلم في onClickStop () وظيفة. ليس عليك القيام بذلك إذا كنت لا تريد دعم Safari.

دعم المتصفح

جميع أحدث إصدارات المتصفحات الحديثة لديك دعم كامل أو جزئي ل API توليف الكلام. لا تلعب متصفحات Webkit الكلام من علامات تبويب متعددة ، والإيقاف المؤقت هو عربات التي تجرها الدواب (يعمل ولكن عربات التي تجرها الدواب) ، ولا تتم إعادة تعيين الكلام عندما يقوم المستخدم بإعادة تحميل الصفحة في متصفحات Webkit.

العمل التجريبي

ألق نظرة على العرض التوضيحي المباشر أدناه ، أو تحقق من الكود الكامل على جيثب.

انظر القلم ؟؟  ° Ã… ¸ا¢Text ؟؟  ؟؟ à £ النص إلى كلام - جافا سكريبت بواسطة HONGKIAT (hkdc) على CodePen.