إضافة تحويل النص إلى كلام إلى JavaScript

لست بحاجة إلى إطار عمل لإضافة ميزة تحويل النص إلى كلام (TTS) إلى موقعك. فسواء كنت تعمل بلغة HTML وJavaScript المجردتين، أو بمولّد مواقع ثابتة، أو بصفحة تُعرض من الخادم، فإن إضافة الصوت إلى محتواك أمر بسيط.

يشرح هذا الدليل طريقة عمل النطق في المتصفح، ومزايا الأساليب المختلفة وعيوبها، وكيفية دمج TTS2Go في أي مشروع JavaScript.

تأتي المتصفحات الحديثة مزوّدة بواجهة Web Speech API مدمجة. وببضعة أسطر من JavaScript المجردة يمكنك:

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

لا حاجة إلى حزم npm، ولا إلى مفاتيح API، ولا إلى خادم. إنها مجانية وتعمل دون اتصال بالإنترنت.

أما العيب فيكمن في الجودة والاتساق:

• كثيرًا ما تبدو الأصوات آلية.
• تتفاوت جودة الأصوات والخيارات المتاحة بين المنصات.
• يختلف صوت Chrome على Windows عن صوت Safari على macOS.
• لا يمكنك ضمان تجربة استماع متسقة لجميع المستخدمين.

غيّر تحويل النص إلى كلام بالذكاء الاصطناعي حدود ما يمكن تحقيقه بالصوت على الويب. فنماذج الصوت العصبية تُنتج صوتًا يبدو بشريًا حقًا، بوقفات ونبرات وإيقاع طبيعية.

أحد الخيارات هو توليد الصوت مسبقًا لكل محتواك واستضافة الملفات على شبكة CDN.

المزايا

• تشغيل فوري للمستخدمين
• جودة وصوت متطابقان في كل مكان

العيوب

• تدفع مقدمًا تكلفة توليد الصوت لكل محتوى، سواء شُغِّل أم لا
• يجب أن يكون المحتوى معروفًا مسبقًا
• تتطلب التحديثات إعادة توليد الملفات
• تزداد تكاليف التخزين مع نمو مكتبة محتواك

يصلح التوليد المسبق للكتالوجات الصغيرة والثابتة، لكنه يصبح مكلفًا وغير مرن عند التوسع.

النهج الأكثر كفاءة هو توليد الصوت فقط عندما ينقر أحدهم فعلًا على زر التشغيل.

الفوائد

• تدفع فقط مقابل الصوت الذي يطلبه المستخدمون
• يتعامل بسلاسة مع المحتوى الديناميكي والمحتوى الذي ينشئه المستخدمون

التحدي

من دون أي ضوابط، يستطيع أي زائر لموقعك أن يُطلق عمليات توليد مكلفة. تحتاج إلى طريقة تحدد بها ما يُولَّد ومتى، لتتحكم في ميزانيتك مع الاستمرار في تقديم تحويل النص إلى كلام في كل مكان.

يعتمد TTS2Go نهجًا هجينًا يوازن بين الجودة والتكلفة والبساطة.

1. مفتاح آمن من جهة العميل

تضيف الـ SDK إلى موقعك باستخدام مفتاح API للواجهة الأمامية. يعتمد المفتاح على حظر الطلبات حسب النطاق وتحديد معدل الطلبات، لذا يمكن وضعه بأمان في الشيفرة من جهة العميل. إنه آلية للتعريف وتحديد المعدل، وليس سرًّا.

1. الزائر الأول: نطق فوري من المتصفح + توليد في الخلفية

عندما ينقر أول شخص على زر TTS في محتوى ما، يسمع فورًا الكلام المُركَّب من المتصفح. وفي الوقت نفسه، يُرسَل طلب توليد إلى TTS2Go في الخلفية.

1. الموافقة والتحكم في الميزانية

في لوحة تحكم TTS2Go يمكنك:

• الموافقة على طلبات التوليد يدويًا، أو
• ضبط نظام الموافقة بالذكاء الاصطناعي ليوافق تلقائيًا على الطلبات التي تستوفي معاييرك.

وهذا يمنحك تحكمًا كاملًا في ميزانية التوليد.

1. الزوار اللاحقون: صوت مميز بالذكاء الاصطناعي من CDN

بعد الموافقة على الطلب وتوليده، يحصل كل مستخدم لاحق ينقر على TTS في المحتوى نفسه على صوت عالي الجودة بالذكاء الاصطناعي بالصوت الذي اخترته، يُقدَّم فورًا من شبكة CDN الخاصة بـ TTS2Go.

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

ثبّت حزمة TTS2Go الخاصة بـ JavaScript المجردة باستخدام npm:

npm install @tts2go/vanilla

إذا كنت لا تستخدم أداة تجميع (bundler)، فيمكنك تحميلها من CDN عبر وسم <script> والوصول إليها باسم window.TTS2Go.

أنشئ نسخة جديدة من TTS2Go باستخدام بيانات اعتماد مشروعك:

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

استدعِ tts.create() مع النص ومعرّف الصوت للحصول على نسخة TTS مزوّدة بأدوات تحكم كاملة في التشغيل:

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

من هنا يمكنك استكشاف واجهة TTS2Go البرمجية الكاملة لـ JavaScript، بما في ذلك:

• tts.getVoices() – عرض الأصوات المتاحة لمشروعك