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

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

يأتي كل متصفح حديث مزوّدًا بواجهة Web Speech API. يمكنك استدعاء window.speechSynthesis.speak() مع SpeechSynthesisUtterance لتسمع النص مقروءًا بصوت عالٍ دون أي خدمة خارجية. إنها مجانية، ولا تتطلب مفتاح API، وتعمل بالكامل من جهة العميل.

المشكلة في الجودة. فأصوات المتصفح تبدو آلية، وتختلف بين أنظمة التشغيل والمتصفحات، وخيارات الأصوات فيها محدودة. وقد يبدو النص نفسه مختلفًا تمامًا من جهاز إلى آخر.

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

في المقابل، توليد هذا الصوت يكلّف مالًا ويتطلب واجهة API، مما يطرح سؤالًا مهمًا: متى تولّده وكيف؟

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

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

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

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

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

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

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

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

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

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

ثبّت حزمة TTS2Go الخاصة بـ React في مجلد مشروعك:

npm install @tts2go/react

الحزمة خفيفة، إذ يقل حجمها عن 15 كيلوبايت بعد الضغط بـ gzip، ولا تعتمد على أي حزم نظيرة سوى React.

غلّف تطبيقك بـ TTS2GoProvider في جذر شجرة المكونات، ومرّر مفتاح API ومعرّف المشروع في الإعدادات.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

استخدم الـ hook ‏useTTS في أي مكوّن للحصول على أدوات التحكم في التشغيل والإيقاف المؤقت والإيقاف. ويمكنك أيضًا إضافة المكوّن الجاهز TTSButton لتحصل سريعًا على أيقونة مكبّر صوت.

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

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

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

اطّلع على توثيق React الكامل على tts2go.com/docs/react لمزيد من الأنماط المتقدمة والأمثلة.