چگونه یک برنامه متن به صدا با جاوا اسکریپت بسازیم

این آموزش نحوه تبدیل متن به گفتار با استفاده از جاوا اسکریپت را پوشش می دهد WebSpeechAPI. این دارای یک رابط کاربری ساده است که در آن کاربر متن مورد نظر را اضافه می کند، سپس روی دکمه ای کلیک می کند تا گفتار مربوطه را ایجاد کند.

نسخه نمایشی متن به گفتار ما

در اینجا چیزی است که ما می خواهیم بسازیم. هر چیزی را که می خواهید در قسمت متنی تایپ کنید، زبانی را که آن را به آن نوشته اید انتخاب کنید و روی دکمه کلیک کنید تا نتیجه را بشنوید!

ساختار HTML

خوب، بیایید شروع به ساختن کنیم. ساختار HTML از عناصر زیر تشکیل خواهد شد:

• آ <textarea> برای اینکه متن تبدیل شود
• آ <select> عنصر در داخل عنصر select، گزینه های زبان را پر می کنیم.
• تولید کنند <button> که با کلیک کردن، محتوای متن ارائه شده را بیان می کند.

برای اینکه تمرکزمان روی عملکرد باشد، از Bootstrap برای ساخت رابط استفاده می کنیم. اطمینان حاصل کنید که پیوند CDN Bootstrap را به این صورت در هدر خود اضافه کرده اید:

1

 <link

2

  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

3

  rel="stylesheet"

4

  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"

5

  crossorigin="anonymous"

6

/>

ساختار HTML را اضافه کنید.

1

<div class="container">

2

  <div class="message alert alert-warning" role="alert">

3

  </div>

4

  <h1>Text to Voice Converter</h1>

5

  <form>

6

  <div class="form-group">

7

    <label for="text">Enter your text:</label>

8

    <textarea name="text" class="content form-control form-control-lg" rows="6"></textarea>

9

  </div>

10

  <div class="form-group">

11

    <label for="voices">Choose your language:</label>

12

    <select class="select-voices form-control form-control-lg" name="voices">

13

    </select>

14

  </div>

15

  <button type="button" class="convert btn btn-primary">🔊 Convert Text to Voice</button>

16

  </form>

17

</div>

یک ظاهر طراحی اضافی با CSS

بوت استرپ تقریباً تمام استایل ها را برای ما انجام می دهد. اما بیایید برخی از ویژگی های CSS سفارشی را به طراحی خود اضافه کنیم. اینها یک فونت سفارشی، یک ظرف، مقداری فاصله اضافی برای عناصر موجود در فرم و قانونی برای پنهان کردن پیام هشدار به ما می‌دهند.

1

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

2

3

body {

4

  font-family: "DM Mono", monospace;

5

}

6

.container {

7

  width: 100%;

8

  max-width: 600px;

9

  padding: 2rem 0;

10

}

11

.form-group {

12

  margin: 2rem 0;

13

}

14

label {

15

  margin-bottom: 1rem;

16

}

17

.message{

18

    display: none;

19

}

تنظیم کرده ایم display:none به مؤلفه هشدار به طوری که فقط در صورت وجود پیام های خطا برای نمایش ظاهر شود.

عملکرد جاوا اسکریپت

همانطور که در مقدمه توضیح دادم، می‌توانیم صداها را با استفاده از speechSynthesis.getVoices() روش؛ بیایید با گرفتن و ذخیره آنها در آرایه ای مانند این شروع کنیم.

1

const voices = (

2

  { name: "Google Deutsch", lang: "de-DE" },

3

  { name: "Google US English", lang: "en-US" },

4

  { name: "Google UK English Female", lang: "en-GB" },

5

  { name: "Google UK English Male", lang: "en-GB" },

6

  { name: "Google español", lang: "es-ES" },

7

  { name: "Google español de Estados Unidos", lang: "es-US" },

8

  { name: "Google français", lang: "fr-FR" },

9

  { name: "Google हिन्दी", lang: "hi-IN" },

10

  { name: "Google Bahasa Indonesia", lang: "id-ID" },

11

  { name: "Google italiano", lang: "it-IT" },

12

  { name: "Google 日本語", lang: "ja-JP" },

13

  { name: "Google 한국의", lang: "ko-KR" },

14

  { name: "Google Nederlands", lang: "nl-NL" },

15

  { name: "Google polski", lang: "pl-PL" },

16

  { name: "Google português do Brasil", lang: "pt-BR" },

17

  { name: "Google русский", lang: "ru-RU" },

18

  { name: "Google 普通话（中国大陆）", lang: "zh-CN" },

19

  { name: "Google 粤語（香港）", lang: "zh-HK" },

20

  { name: "Google 國語（臺灣）", lang: "zh-TW" }

21

);

عناصر مورد نیاز را شناسایی کنید

سپس، از Document Object Model (DOM) برای به دست آوردن عناصر هشدار، انتخاب و دکمه استفاده کنید.

1

const optionsContainer = document.querySelector(".select-voices");

2

const convertBtn = document.querySelector(".convert");

3

const messageContainer = document.querySelector(".message")

انتخاب صداها را ایجاد کنید

را optionsContainer نشان دهنده <select> عنصری برای لیست کشویی صداها که کاربر از میان آنها گزینه ای را انتخاب می کند.

ما می خواهیم آن را با صداهای آرایه صداها پر کنیم. یک تابع به نام ایجاد کنید addVoices().

1

function addVoices(){

2

  // populate options with the voices from array

3

4

}

در داخل تابع، از forEach() روش حلقه زدن از طریق آرایه صداها و برای هر شیء صوتی، تنظیم کنید option.value = voice.lang و option.text = voice.name، سپس گزینه را به عنصر select اضافه کنید.

1

function addVoices() {

2

  console.log(voices);

3

  voices.forEach((voice) => {

4

    let option = document.createElement("option");

5

    option.value = voice.lang;

6

    option.textContent = voice.name;

7

    optionsContainer.appendChild(option);

8

9

    if (voice.lang === "en-US") {

10

      option.selected = true;

11

    }

12

  });

13

}

ما باید استناد کنیم addVoices() تابع برای اعمال عملکرد، با این حال، برای مرورگر کروم، ما باید به آن گوش دهیم voiceschanged رویداد و سپس تماس بگیرید addVoices() تابع. بنابراین یک شرط اضافه می کنیم:

1

if (navigator.userAgent.indexOf("Chrome") !== -1) {

2

  speechSynthesis.addEventListener("voiceschanged", addVoices);

3

} else {

4

  addVoices();

5

}

را voiceschanged رویداد یک رویداد جاوا اسکریپت است که با تغییر لیست صداهای ترکیبی گفتار موجود انجام می شود. این رویداد زمانی اتفاق می افتد که لیست صداهای موجود آماده استفاده باشد.

دکمه شنونده رویداد

یک شنونده رویداد کلیکی را به دکمه تولید اضافه کنید.

1

convertBtn.addEventListener("click", function () {

2

//   display an alert message if content is empty

3

//   pass the arguments to convertToSpeech() 

4

});

در داخل تابع شنونده رویداد، می‌خواهیم هشداری را در صورت عدم ارائه محتوا نمایش دهیم، متن را از ناحیه متنی دریافت کنیم، زبان انتخاب شده را دریافت کنیم و مقادیر را به قسمت ارسال کنیم. convertToSpeech() تابع.

شنونده رویداد را به صورت زیر به روز کنید.

1

convertBtn.addEventListener("click", function () {

2

  convertText = document.querySelector(".content").value;

3

4

  if (convertText === "") {

5

  messageContainer.textContent = " Please provide some text";

6

  messageContainer.style.display = "block";

7

8

  setTimeout(() => {

9

    messageContainer.textContent = ""; 

10

    messageContainer.style.display = "none";

11

  }, 2000);

12

13

  return;

14

}

15

16

  const selectedLang =

17

    optionsContainer.options(optionsContainer.selectedIndex).value;

18

19

20

  convertToSpeech(convertText, selectedLang);

21

});

ایجاد کنید convertToSpeech() تابع و کد زیر را اضافه کنید.

1

function convertToSpeech(text, lang) {

2

  if (!("speechSynthesis" in window)) {

3

    messageContainer.textContent =

4

      " Your browser is not supported, try another browser";

5

      messageContainer.style.display ="block"

6

    return;

7

  }

8

  let utterance = new SpeechSynthesisUtterance();

9

  utterance.lang = lang;

10

  utterance.text = text;

11

12

  speechSynthesis.speak(utterance);

13

14

}

را covertToSpeech() تابع دو پارامتر را می گیرد، یعنی متنی که باید تبدیل شود و زبانی که متن باید به آن صحبت شود.

بیایید آن را تجزیه کنیم:

• ابتدا بررسی می کنیم که آیا مرورگر از سنتز گفتار پشتیبانی می کند یا خیر. اگر نشد، پیام را نمایش خواهیم داد “مرورگر شما پشتیبانی نمی شود؛ مرورگر دیگری را امتحان کنید”
• اگر از سنتز گفتار پشتیبانی شود، یک جدید ایجاد خواهیم کرد SpeechSynthesisUtterance نمونه و آن را به عبارت متغیر نسبت دهید.
• سپس متن را به درخواست گفتار با اعمال می کنیم utterance.text و زبان با utterance.lang.
• در نهایت، مرورگر متن را با استفاده از آن بیان می کند speechSynthesis.speak(utterance).

نتیجه

امیدوارم از این آموزش لذت برده باشید و چیز مفیدی یاد گرفته باشید! ما همه چیزهایی را که برای ایجاد برنامه‌های متن به صدا نیاز دارید با استفاده از قابلیت‌های آن پوشش دادیم WebSpeechApi. گنجاندن عملکرد متن به صدا در برنامه شما نیازهای مختلف کاربران را برآورده می کند و دسترسی کلی آن را بهبود می بخشد.

بیایید به خود یادآوری کنیم که چه چیزی خلق کرده ایم: