جشنواره تخفیف‌های تابستانی به مدت یک هفته! کد تخفیف ۲۵% : SUMMER 

تبدیل متن به صدا و صدا به متن با جاوا اسکریپت

دوشنبه ۱۱ تیر ۹۷ توسط محمدسینا مرادی

در این آموزش قصد داریم تا با Web Speech API کار هایی را با هم انجام بدهیم. این یک رابط کاربری بسیار قدرتمند است که به شما اجازه می دهد گفتار انسانی را ضبط کرده و آن را به متن تبدیل کنید. ما همچنین برعکس این کار را نیز انجام می دهیم یعنی صدای شما را ضبط کنیم و آن را به متن تبدیل کنیم. خیلی جالب است نه؟!

همچنین می توانید دموی این پروژه جذاب را دانلود و یا دمو آن را مشاهده کنید.

بیایید با هم به درون آموزش پرش کنیم!

اپلیکیشن

برای نشان دادن توانایی های API مورد نظر قصد داریم که یک اپلیکیشن ساده یادداشت را طراحی کنیم که این 3 مورد را انجام می دهد و در آن لحاظ شده است:

  • یادداشت برداری با استفاده از تبدیل متن به صدا (text-to-speech) یا با استفاده از ورودی مرسوم کیبورد
  • ذخیره یادداشت ها در localStorage
  • نشان دادن همه یادداشت ها و گزینه ای برای گوش دادن به آنها با Speech Synthesis

تصویر بالا اپلیکیشن طراحی شده توسط ما در انتهای این مقاله است.

ما از هیچ وابستگی یا Dependency در این پروژه استفاده نخواهیم کرد و فقط از jQuery قدیمی برای انجام هر چه ساده تر عملیات DOM و Shoelace برای استایل های CSS استفاده خواهیم کرد.

Web Speech API در واقع به دو interface مستقل تقسیم شده است. ما برای فهمیدن و درک صدای انسان و تبدیل آن به متن که همان تبدیل صدا به متن (Speech -> Text) است SpeechRecognition را داریم و برای خواندن رشته ها که همان تبدیل متن به صدا (Text -> Speech) است SpeechSynthesis را داریم فعلا با همان اولی یعنی SpeechRecognition کار خود را شروع می کنیم.

Speech Recognition API به طور شگفت آوری برای خصوصیت مرورگر های رایگان دقیق عمل می کند. تقریبا تمام سخنانم را به درستی شناسایی کرد و می فهمید کدام کلمه ها را کنار یکدیگر ترکیب کند تا یک جمله را بسازد. همچنین اجازه می دهد تا کاراکتر های خاص مانند توقف کامل ، علامت سوال و خط های جدید را دیکته کنید.

اولین چیزی که نیاز داریم آن را انجام دهیم این است که چک کنیم آیا کاربر دسترسی به API را دارد یا خیر؟ و اگر در غیر این صورت است باید به او خطای مناسب را نشان دهیم. متاسفانه ، API تبدیل صدا به متن فقط و فقط در مرورگر های کروم (Chrome) و فایرفاکس (Firefox) پشتیبانی می شود پس با این حال بیشتر مردم این پیام خطا را دریافت می کنند.

try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition = new SpeechRecognition();
}
catch(e) {
  console.error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}

متغیر recognition به ما دسترسی به همه متد های API و ویژگی هایش را می دهد. آنجا گزینه های مختلفی موجود هستند که ما فقط recognition.continuous را بر روی true قرار داده ایم. این کار ، کاربران را قادر می ساز تا با مکث های طولانی بین کلمات و عبارات ، صحبت کنند.

قبل از اینکه بتوانیم از recognition استفاده کنیم ، ما همچنین نیاز داریم تا جفت رویداد handler را راه اندازی کنیم. اکثریت آنها به تغییرات در وضعیت recognition گوش می کنند.

recognition.onstart = function() { 
  instructions.text('Voice recognition activated. Try speaking into the microphone.');
}

recognition.onspeechend = function() {
  instructions.text('You were quiet for a while so voice recognition turned itself off.');
}

recognition.onerror = function(event) {
  if(event.error == 'no-speech') {
    instructions.text('No speech was detected. Try again.');  
  };
}

اگرچه رویداد مخصوص onresult بسیار سخت است اما هر زمان کاربر کلمه ای یا چند کلمه ای به طور سریع صحبت کرد به ما اجازه دسترسی به متن رونویسی شده آنچه گفته شد را می دهد.

زمانی که ما بعضی چیز ها را با onresult handler می گیریم در واقع آن را در یک متغیر جهانی ذخیره و در یک textarea نمایش می دهیم:

recognition.onresult = function(event) {

  // event is a SpeechRecognitionEvent object.
  // It holds all the lines we have captured so far. 
  // We only need the current one.
  var current = event.resultIndex;

  // Get a transcript of what was said.
  var transcript = event.results[current][0].transcript;

  // Add the current transcript to the contents of our Note.
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

کد بالا کمی ساده شده است. یک خطای بسیار عجیب و غریب در دستگاه های Android وجود دارد که باعث می شود همه چیز دو بار تکرار شود. هنوز هیچ راه حل رسمی وجود ندارد اما ما توانستیم بدون هیچ گونه عوارضی به طور آشکار مشکل را حل کنیم. با در زهن داشتن آن باگ کد به شکل زیر در می آید:

var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);

if(!mobileRepeatBug) {
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

هنگامی که همه چیز را راه اندازی کردیم می توانیم از ویژگی تشخیص صدای مرورگر استفاده کنیم. برای شروع این کار به طور ساده ای متد start() را صدا بزنید:

$('#start-record-btn').on('click', function(e) {
  recognition.start();
});

این کار باعث می شود کاربران مجوزی را دریافت نمایند. اگر مجوز داده شود میکروفون دستگاه فعال خواهد شد.

اکثر API هایی که نیاز به اجازه کاربر دارند بر روی میزبان های غیر امن کار نمی کنند. اطمینان حاصل کنید که برنامه های وب خود را از طریق HTTPS اجرا می کنید.

مرورگر برای یک لحظه گوش می دهد و هر عبارت یا کلمه معروف را رونویسی می کند. API بعد از چند ثانیه سکوت یا هنگامی که دستی متوقف می شود، گوش کردن به صحبت های کاربر را به صورت خودکار متوقف می کند.

$('#pause-record-btn').on('click', function(e) {
  recognition.stop();
});

با استفاده از این کد ، قسمت تبدیل صدا به متن ما کامل است ، حالا بیایید برعکس آن را امتحان کنیم.

تبدیل متن به صدا (Text to Speech)

Speech Synthesys واقعا بسیار آسان است. API از طریق speechSynthesis در دسترس است و چند روش برای پخش، مکث و دیگر موارد مرتبط با صدا وجود دارد. همچنین دارای چند گزینه جالب است که زمین ، سرعت و حتی صدای خواننده را تغییر می دهد.

در اینجا کل کد مربوط به خواندن رشته ها را مشاهده می کنید:

function readOutLoud(message) {
  var speech = new SpeechSynthesisUtterance();

  // Set the text and voice attributes.
  speech.text = message;
  speech.volume = 1;
  speech.rate = 1;
  speech.pitch = 1;

  window.speechSynthesis.speak(speech);
}

زمانی که این تابع فراخوانی می شود ، رشته با صدای ربات خوانده می شود و ربات بهترین کار انسان را بر عهده می گیرد.

نتیجه

در زمانی که دستیار های صدا از هرچیزی محبوب تر هستند ، این API مانند دستیاران صدا یک میانبر سریع برای ایجاد ربات هایی را می دهد که زبان انسان را درک و با آن صحبت می کنند.

اضافه کردن کنترل صدا به اپلیکیشن های شما همچنین می تواند یک فرم عالی از افزایش قابلیت دسترسی باشد. کاربران مبتلا به اختلال بینایی می توانند از رابط کاربری صدا به متن و متن به صدا بهره مند شوند.

speech synthesis و speech recognition بسیار خوب کار می کنند و با لهجه های مختلف سازگاری دارند اما متاسفانه ، آنها پشتیبانی محدودی در مرورگر ها دارند که کاربرد هایشان را محدود می سازد. اگر شما نیاز به پشتیبانی های بیشتری در مرورگر ها دارید از این API ها نیز دیدن فرمایید:

همچنین به شما پیشنهاد می کنم فایل و سورس کد این پروژه را از این لینک دریافت نمایید.


کلیدواژه: تبدیل متن به صدا تبدیل صدا به متن جاوا اسکریپت تبدیل گفتار به متن تبدیل متن به گفتار

منابع: tutorialzine.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.