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

منح تطبيق Vue صوتًا يفتح آفاقًا جديدة لإمكانية الوصول والتفاعل وتجربة المستخدم. فسواء كنت تبني موقع محتوى، أو منصة تعليم إلكتروني، أو لوحة تحكم تقرأ التنبيهات بصوت عالٍ، يتيح تحويل النص إلى كلام (TTS) للمستخدمين استهلاك محتواك دون الحاجة إلى استخدام أيديهم.

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

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

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

• تعمل بالكامل من جهة العميل – لا حاجة إلى واجهة خلفية أو استدعاءات API.
• مجانية تمامًا – لا فوترة حسب الاستخدام.
• دمج فوري – بأقل قدر من JavaScript.

العيب الرئيسي هو الجودة. فأصوات المتصفح كثيرًا ما تبدو آلية، وتختلف اختلافًا كبيرًا بين أنظمة التشغيل والمتصفحات، وخيارات الأصوات فيها محدودة. وقد يبدو النص نفسه مختلفًا تمامًا على Chrome مقارنة بـ Safari، أو على Windows مقارنة بـ macOS.

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

• عشرات اللغات
• مئات الأصوات الفريدة
• تحكمًا أكبر في الأسلوب والإيقاع والعاطفة

في المقابل، توليد هذا الصوت يكلّف مالًا ويتطلب استدعاء API. وهذا يطرح سؤالًا محوريًا: كيف تتحكم في توقيت توليد الصوت ومن يدفع ثمنه؟

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

المزايا:

• التشغيل فوري.
• جودة الصوت متسقة لكل مستمع.

العيوب:

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

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

الاستراتيجية الأكثر كفاءة هي توليد الصوت فقط عندما يطلبه المستخدم.

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

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

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

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

عندما ينقر أول شخص على زر TTS في محتوى ما:

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

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

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

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

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

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

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

النتيجة:

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

أضف حزمة TTS2Go الخاصة بـ Vue إلى مشروعك:

npm install @tts2go/vue

الحزمة خفيفة وتعمل مع Vue 3 وComposition API مباشرةً دون إعداد إضافي.

ثبّت TTS2GoPlugin عند إنشاء تطبيق Vue. يوفّر ذلك عميل TTS2Go لكل مكوّن عبر آلية حقن الاعتماديات في Vue.

import { createApp } from "vue";

import { TTS2GoPlugin } from "@tts2go/vue";

import App from "./App.vue";

const app = createApp(App);

app.use(TTS2GoPlugin, {

apiKey: "your-api-key",

projectId: "your-project-id",

});

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

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

const VOICE_ID = "your-voice-id";

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

const { status, play, stop, pause } = useTTS(text, VOICE_ID);

{{ text }}

{{ status.value === "playing" ? "Stop" : "Play" }}

السلوك:

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

من هنا يمكنك استكشاف ميزات TTS2Go الأكثر تقدمًا لـ Vue:

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

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

• tts2go.com/docs/vue