واجهة برمجة تطبيقات تركيب الكلام

تعد واجهة برمجة تطبيقات Speech Synthesis واجهة برمجة تطبيقات رائعة ، وهي رائعة لتجربة نوع جديد من الواجهات والسماح للمتصفح بالتحدث إليك

تعد واجهة برمجة تطبيقات Speech Synthesis أداة رائعة توفرها المتصفحات الحديثة.

تم تقديمه في عام 2014 ، وهو الآناعتمدت على نطاق واسعومتوفر في Chrome و Firefox و Safari و Edge. IE غير مدعوم.

Browser support for the Speech Synthesis API

إنه جزء من Web Speech API ، جنبًا إلى جنب معواجهة برمجة تطبيقات التعرف على الكلام، على الرغم من أن هذا مدعوم حاليًا فقط ، في الوضع التجريبي ، على Chrome.

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

ابدء

أبسط مثال على استخدامAPI تركيب الكلاميبقى في سطر واحد:

speechSynthesis.speak(new SpeechSynthesisUtterance('Hey'))

قم بنسخه ولصقه في وحدة تحكم المتصفح الخاص بك ، ويجب أن يتحدث جهاز الكمبيوتر الخاص بك!

API

يعرض API عدة كائنات لملفwindowموضوع.

SpeechSynthesisUtterance

SpeechSynthesisUtteranceيمثل طلب الكلام. في المثال أعلاه ، مررنا لها سلسلة. هذه هي الرسالة التي يجب على المتصفح قراءتها بصوت عالٍ.

بمجرد حصولك على كائن الكلام ، يمكنك إجراء بعض التعديلات لتحرير خصائص الكلام:

const utterance = new SpeechSynthesisUtterance('Hey')
  • utterance.rate: ضبط السرعة ، يقبل بين [0.1 - 10] ، افتراضيات على 1
  • utterance.pitch: ضبط الملعب ، يقبل بين [0 - 2] ، الافتراضي إلى 1
  • utterance.volume: يضبط الحجم ، ويقبل بين [0 - 1] ، ويفترض أن يكون 1
  • utterance.lang: اضبط اللغة (تستخدم القيم علامة لغة BCP 47 ، مثلen-USأوit-IT)
  • utterance.text: بدلاً من تعيينه في المنشئ ، يمكنك تمريره كخاصية. يمكن أن يكون النص بحد أقصى 32767 حرفًا
  • utterance.voice: يضبط الصوت (المزيد حول هذا أدناه)

مثال:

const utterance = new SpeechSynthesisUtterance('Hey')
utterance.pitch = 1.5
utterance.volume = 0.5
utterance.rate = 8
speechSynthesis.speak(utterance)

ضع صوتًا

يحتوي المتصفح على عدد مختلف من الأصوات المتاحة.

للاطلاع على القائمة ، استخدم هذا الرمز:

console.log(`Voices #: ${speechSynthesis.getVoices().length}`)

speechSynthesis.getVoices().forEach(voice => { console.log(voice.name, voice.lang) })

Voices in Firefox

هنا واحدة من المشاكل عبر المتصفح. يعمل الكود أعلاه في Firefox و Safari (وربما Edge لكنني لم أختبره) ، لكنلا يعمل في Chrome. يتطلب Chrome التعامل مع الأصوات بطريقة مختلفة ، ويتطلب رد اتصال يتم استدعاؤه عند تحميل الأصوات:

const voiceschanged = () => {
  console.log(`Voices #: ${speechSynthesis.getVoices().length}`)
  speechSynthesis.getVoices().forEach(voice => {
    console.log(voice.name, voice.lang)
  })
}
speechSynthesis.onvoiceschanged = voiceschanged

بعد استدعاء رد الاتصال ، يمكننا الوصول إلى القائمة باستخدامspeechSynthesis.getVoices().

أعتقد أن هذا يرجع إلى أن Chrome - إذا كان هناك اتصال بالشبكة - يتحقق من لغات إضافية من خوادم Google:

Chrome Languages

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

عبر تنفيذ المتصفح للحصول على اللغة

نظرًا لوجود هذا الاختلاف ، فنحن بحاجة إلى طريقة لاستخراجه لاستخدام واجهة برمجة التطبيقات. هذا المثال يقوم بهذا التجريد:

const getVoices = () => {
  return new Promise(resolve => {
    let voices = speechSynthesis.getVoices()
    if (voices.length) {
      resolve(voices)
      return
    }
    speechSynthesis.onvoiceschanged = () => {
      voices = speechSynthesis.getVoices()
      resolve(voices)
    }
  })
}

const printVoicesList = async () => { ;(await getVoices()).forEach(voice => { console.log(voice.name, voice.lang) }) }

printVoicesList()

انظر على خلل

استخدم لغة مخصصة

الصوت الافتراضي يتحدث باللغة الإنجليزية.

يمكنك استخدام أي لغة تريد ، عن طريق ضبط الكلامlangمنشأه:

let utterance = new SpeechSynthesisUtterance('Ciao')
utterance.lang = 'it-IT'
speechSynthesis.speak(utterance)

استخدم صوتًا آخر

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

const lang = 'it-IT'
const voiceIndex = 1

const speak = async text => { if (!speechSynthesis) { return } const message = new SpeechSynthesisUtterance(text) message.voice = await chooseVoice() speechSynthesis.speak(message) }

const getVoices = () => { return new Promise(resolve => { let voices = speechSynthesis.getVoices() if (voices.length) { resolve(voices) return } speechSynthesis.onvoiceschanged = () => { voices = speechSynthesis.getVoices() resolve(voices) } }) }

const chooseVoice = async () => { const voices = (await getVoices()).filter(voice => voice.lang == lang)

return new Promise(resolve => { resolve(voices[voiceIndex]) }) }

speak(‘Ciao’)

انظر على خلل

قيم اللغة

هذه بعض الأمثلة على اللغات التي يمكنك استخدامها:

  • العربية (السعودية) ➡️ar-SA
  • الصينية (الصين) ➡️zh-CN
  • الصينية (منطقة هونغ كونغ الإدارية الخاصة الصينية) ➡️zh-HK
  • الصينية (تايوان) ➡️zh-TW
  • التشيك (جمهورية التشيك) ➡️cs-CZ
  • الدنماركية (الدنمارك) ➡️da-DK
  • الهولندية (بلجيكا) ➡️nl-BE
  • الهولندية (هولندا) ➡️nl-NL
  • الإنجليزية (أستراليا) ➡️en-AU
  • الإنجليزية (أيرلندا) ➡️en-IE
  • الإنجليزية (جنوب إفريقيا) ➡️en-ZA
  • الإنجليزية (المملكة المتحدة) ➡️en-GB
  • الإنجليزية (الولايات المتحدة) ➡️en-US
  • الفنلندية (فنلندا) ➡️fi-FI
  • الفرنسية (كندا) ➡️fr-CA
  • الفرنسية (فرنسا) ➡️fr-FR
  • الألمانية (ألمانيا) ➡️de-DE
  • اليونانية (اليونان) ➡️el-GR
  • الهندية (الهند) ➡️hi-IN
  • المجرية (المجر) ➡️hu-HU
  • الإندونيسية (إندونيسيا) ➡️id-ID
  • الإيطالية (إيطاليا) ➡️it-IT
  • اليابانية (اليابان) ➡️ja-JP
  • الكورية (كوريا الجنوبية) ➡️ko-KR
  • النرويجية (النرويج) ➡️no-NO
  • البولندية (بولندا) ➡️pl-PL
  • البرتغالية (البرازيل) ➡️pt-BR
  • البرتغالية (البرتغال) ➡️pt-PT
  • الرومانية (رومانيا) ➡️ro-RO
  • الروسية (روسيا) ➡️ru-RU
  • السلوفاكية (سلوفاكيا) ➡️sk-SK
  • الأسبانية (المكسيك) ➡️es-MX
  • الاسبانية (اسبانيا) ➡️es-ES
  • السويدية (السويد) ➡️sv-SE
  • التايلاندية (تايلاند) ➡️th-TH
  • التركية (تركيا) ➡️tr-TR

متحرك

في نظام التشغيل iOS ، تعمل واجهة برمجة التطبيقات (API) ولكن يجب تشغيلها من خلال رد استدعاء إجراء المستخدم ، مثل الاستجابة لحدث النقر ، لتوفير تجربة أفضل للمستخدمين وتجنب الأصوات غير المتوقعة الصادرة من هاتفك.

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


المزيد من دروس المتصفح: