تطوير الويبتحويل النص إلى كلام

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

تعرّف على كيفية إضافة تحويل للنص إلى كلام عالي الجودة وفعّال من حيث التكلفة إلى تطبيق Svelte باستخدام TTS2Go، بالجمع بين نطق المتصفح كبديل احتياطي والصوت المولَّد بالذكاء الاصطناعي.

Anthony Morris·
إضافة تحويل النص إلى كلام إلى Svelte

بُني Svelte على البساطة والأداء، وإضافة ميزة تحويل النص إلى كلام (TTS) إلى تطبيق Svelte يمكن أن تكون بالسهولة نفسها.

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

كيف يعمل تركيب الكلام في المتصفح

تتضمن المتصفحات الحديثة واجهة Web Speech API التي تتيح لك استدعاء window.speechSynthesis.speak() مع SpeechSynthesisUtterance لقراءة النص بصوت عالٍ.

أبرز خصائصها:

  • بلا اعتماديات: كل شيء يعمل داخل المتصفح.
  • بلا مفاتيح API أو استدعاءات للخادم: لا حاجة إلى أي تكامل مع الواجهة الخلفية.
  • بلا تكلفة: تستخدم أصوات النظام المدمجة.

لكن هناك مقايضات:

  • جودة آلية وغير متسقة: كثيرًا ما تبدو الأصوات اصطناعية.
  • تعتمد على المنصة: تختلف الأصوات بين Chrome وFirefox، وبين macOS وWindows.
  • خيارات أصوات محدودة: لغات وأنماط أقل مقارنة بتقنيات TTS الحديثة بالذكاء الاصطناعي.

صعود الكلام المولَّد بالذكاء الاصطناعي

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

المقايضات:

  • المزايا:
  • صوت طبيعي عالي الجودة
  • تغطية واسعة للغات والأصوات
  • صوت متسق عبر الأجهزة والمتصفحات
  • العيوب:
  • التكلفة: تدفع مقابل كل حرف أو كل ثانية من الصوت المولَّد.
  • استدعاءات API: تتطلب تكاملًا من جهة الخادم أو تكاملًا موثّقًا من جهة العميل.

وهذا يطرح سؤالًا تصميميًا: كيف توازن بين جودة الصوت وتكاليف التوليد، وتتحكم في توقيت إنشاء الصوت؟

توليد الصوت مسبقًا

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

آلية العمل:

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

المزايا:

  • تشغيل فوري لكل زائر
  • صوت متسق وعالي الجودة
  • سلوك بسيط وقت التشغيل (مجرد تشغيل ملف)

العيوب:

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

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

التوليد الكسول عند الطلب

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

آلية العمل:

  • عندما يطلب المستخدم صوتًا لمحتوى ما، تستدعي واجهة API لتحويل النص إلى كلام.
  • يُخزَّن الصوت المولَّد أو يُحفظ مؤقتًا.
  • تعيد الطلبات اللاحقة استخدام الصوت المخزَّن مؤقتًا.

المزايا:

  • فعالية أكبر بكثير من حيث التكلفة: تدفع فقط مقابل المحتوى الذي يستمع إليه المستخدمون فعلًا.
  • يدعم بطبيعته المحتوى الديناميكي والمحتوى الذي ينشئه المستخدمون.
  • يقلل التوليد المهدَر لمحتوى لا يُستخدم.

التحديات:

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

كيف يحل TTS2Go هذه المشكلة

يجمع TTS2Go بين نطق المتصفح وتحويل النص إلى كلام بالذكاء الاصطناعي ليوازن بين الجودة والتكلفة والبساطة.

الأفكار الرئيسية:

  1. مفتاح آمن من جهة العميل
  • تضيف الـ SDK الخاصة بـ TTS2Go إلى موقعك باستخدام مفتاح API للواجهة الأمامية.

الخطوة 1: تثبيت الـ SDK

ثبّت حزمة TTS2Go الخاصة بـ Svelte:


npm install @tts2go/svelte

تعمل الحزمة مع Svelte 5 وتندمج بسلاسة مع نموذج التفاعلية في Svelte.

الخطوة 2: إنشاء العميل

أنشئ عميل TTS2Go باستخدام بيانات اعتماد مشروعك. في Svelte، يمكنك إنشاء العميل مباشرة داخل مكوّن أو في وحدة مشتركة.



import { createTTS2GoClient } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});
  • apiKey: مفتاح TTS2Go العام الآمن للاستخدام في الواجهة الأمامية.
  • projectId: يحدد مشروع TTS2Go المستخدَم للتوليد والموافقات والتحليلات.

الخطوة 3: إضافة تحويل النص إلى كلام في Svelte

استخدم createTTS للحصول على store تفاعلي يتضمن أدوات التحكم في التشغيل والحالة.



import { createTTS2GoClient, createTTS } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

const VOICE_ID = "your-voice-id";

const text = "Hello from TTS2Go in Svelte!";

const tts = createTTS(client, text, VOICE_ID);

let status = $state("idle");

const unsubscribe = tts.status.subscribe((s) => (status = s));

function handleClick() {

if (status === "playing" || status === "fallback") {

tts.stop();

} else {

tts.play();

}

ما التالي؟

من هنا يمكنك:

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

للاطلاع على توثيق Svelte الكامل والأمثلة المتقدمة، تفضّل بزيارة:

  • https://tts2go.com/docs/svelte
العودة إلى جميع المقالات