وظيفة تركيب الكلام HTML5 غير المعروفة

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

يرجى وضع سماعات الرأس أولاً، ثم انسخ الكود التالي إلى وحدة تحكم Chrome لتجربته ~

 Let msg = new SpeechSynthesisUtterance(مرحبًا بك في قراءة مدونتي);window.speechSynthesis.speak(msg);

انظر، ليس من الصعب تنفيذ تركيب الكلام على الواجهة الأمامية

من المثال أعلاه، يمكننا تخمين وظائف الطريقتين المذكورتين أعلاه.

 SpeechSyntehesisUtterancwindow.speechSynthesis.speak

بالطبع، لا يتضمن تركيب الكلام هاتين الواجهتين فقط، ولكن لنبدأ بهاتين النقطتين.

المرجع: Developer.mozilla.org/en-US/docs/… يحتوي كائن SpeechSyntehesisUtteranc على المحتوى الذي ستقرأه خدمة الكلام وبعض المعلمات، مثل اللغة ودرجة الصوت وحجم الصوت.

 SpeechSyntehesisUtteranc()SpeechSynthesisUtterance.langSpeechSynthesisUtterance.pitchSpeechSynthesisUtterance.rateSpeechSynthesisUtterance.voiceSpeechSynthesisUtterance.volume

ملحوظة: الخصائص المذكورة أعلاه كلها قابلة للقراءة والكتابة! يمكنك نسخ الكود أدناه وتجربته وستكون هناك تعليمات في التعليقات.

 Let msg = new SpeechSynthesisUtterance();msg.text = كيف حالك // النص المراد تركيبه msg.lang = en-US // نطق اللغة الإنجليزية الأمريكية (يتم تحديده تلقائيًا بشكل افتراضي) msg.rate = 2 // سرعة مزدوجة (افتراضي) هو 1، النطاق من 0.1 إلى 10) msg.pitch = 2 // درجة الصوت العالية (كلما زاد الرقم، زادت وضوحه، الافتراضي هو 1، النطاق من 0 إلى 2) msg.volume = 0.5 // حجم الصوت 0.5 مرة (الافتراضي هو 1، النطاق 0~1) window.speechSynthesis.speak(msg);

وفي الوقت نفسه، يمكن لهذا الكائن أيضًا الاستجابة لسلسلة من الأحداث، والتي يمكن استخدامها:

• يبدأ
• نهاية
• الحدود
• يوقف
• سيرة ذاتية

وبمساعدة هذه الأحداث، يمكننا إكمال بعض الوظائف البسيطة، مثل حساب عدد الكلمات في الجمل الإنجليزية:

 Let count = 0; // عدد الكلمات Let msg = new SpeechSynthesisUtterance();let Synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // ابدأ القراءة console.log(`محتوى النص: $ {msg.text}`); console.log(start);});msg.addEventListener('end',()=>{ // نهاية القراءة console.log(end); console.log(`عدد الكلمات النصية (الكلمات): ${count}`);msg.addEventListener('boundary',()=>{ // عد الكلمات count++;});

بعد المحاولة، نظرًا لأن اللغة الصينية لا تستخدم مسافات للفصل بين كل كلمة، فسيتم التعرف عليها تلقائيًا. على سبيل المثال، سيتم التعرف على كلمة "مرحبًا بالقراء" على أنها كلمتين: "مرحبًا" و"قارئ".

المرجع: Developer.mozilla.org/en-US/docs/…

بعد الحديث عن SpeechSyntehesisUtteranc، دعونا نلقي نظرة على SpeechSynthesis

تتمثل الوظيفة الرئيسية لـ SpeechSynthesis في تنفيذ سلسلة من عناصر التحكم في الكلام، مثل البدء أو الإيقاف المؤقت.

يحتوي على ثلاث خصائص للقراءة فقط تشير إلى حالة الصوت:

 SpeechSynthesis.pausedSpeechSynthesis.pending

هناك أيضًا سلسلة من الأساليب لمعالجة الكلام:

•SpeechSynthesis.speak() يبدأ في قراءة الكلام ويطلق حدث البداية في نفس الوقت

•SpeechSynthesis.pause() يتوقف مؤقتًا ويطلق حدث الإيقاف المؤقت

يستمر •SpeechSynthesis.resume() ويطلق حدث الاستئناف في نفس الوقت

•SpeechSynthesis.cancel() يلغي القراءة ويطلق حدث النهاية في نفس الوقت

بناءً على طرق التشغيل هذه، يمكننا تحسين قارئ النصوص الخاص بنا بشكل أكبر:

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

إذا كانت الواجهة الأمامية لهذا الموقع تستخدم إطار عمل MVVM (خذ Vue كمثال)، فقد يتم تخزين محتوى المقالة في البيانات، والتي يمكن استخدامها لبناء تركيب الكلام الذي نحتاجه

بالطبع، من الممكن أيضًا الحصول على المقالة من خلال طلب Ajax، وتحليل البيانات المطلوبة، وإنشاء كائن تركيب الكلام.

إذا كانت المقالة مكتوبة مباشرة بتنسيق HTML، فيجب تحليل DOM في هذا الوقت، حتى البنية الفوضوية التالية بعد الاختبار

 <div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>

اقرأ النص مباشرة من خلالInnerText، ثم قم ببناء كائن تركيب الكلام، ويمكنك أيضًا قراءته بالترتيب المطلوب (سيتم تجاهل الصور)

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

مهما حدث، يمكننا إيجاد الحل المناسب~

لا تزال هذه الميزة في المسودة وغير مدعومة على نطاق واسع.

مرة أخرى، لا يمكن تطبيق واجهة برمجة التطبيقات (API) هذه على بيئات الإنتاج حتى الآن.

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

ذات مرة، عندما كنت في حيرة من أمري، قرأت بعض المقالات التي كتبها الخبراء وقرأت بعض الأفكار المهمة حول تطوير الواجهة الأمامية. شيء واحد أعجبني بشدة:

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

ما ورد أعلاه هو وظيفة تركيب الكلام HTML5 غير المعروفة التي قدمها المحرر، وآمل أن تكون مفيدة لك، إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب.