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

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

اپلیکیشن

برای نمایش قدرت این API ما می خواهیم یک اپلیکیشن ساده یادداشت صوتی بسازیم که 3 کار انجام میده :

• یادداشت ها رو با استفاده از ورودی صوتی یا ورودی کیبورد دریافت میکنه.
• یادداشت رو در حافظه محلی ذخیره میکنه.
• تمام یادداشت ها رو نشون میده و امکان گوش دادن به اون ها رو توسط speech Synthesis فراهم می کنه.

ما از هیچ وابستگی اضافی استفاده نمیکنیم فقط JQuery برای DOM ساده تر و Shoelace برای استایل های CSS. ما میخواهیم اون ها رو بصورت مستیم توسط CDN وارد کنیم, برای این پروژه نیازی به استفاده از NPM نیست.

HTML و CSS رو بصورت استاندارد استفاده می کنیم و مستقیما سراغ کدهای جاوا اسکریپت می رویم. سورس کد و دموی پروژه در انتهای مقاله موجود است.

صدا به متن

ابزار Web Speech API بصورت کامل به دو رابط مجزا تقسیم شده. ما SpeechRecognition رو برای درک صدای انسان و تبدیل اون به متن (صدا به متن) و SpeechSynthesis برای خواندن رشته ها توسط کامپیوتر (متن به صدا) استفاده می کنیم. با اولی شروع می کنیم.

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

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

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.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 ضبط می کنیم, اون رو در یک متغیر جهانی ذخیره کرده و در 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);

}

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

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();

});

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

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

  recognition.start();

});

متن به صدا

Speech Synthesys بسیار سادست. تمام چیزی که ما نیاز داریم متد ()speak است. این یک arg میگیره که یک نمونه از کلاس SpeechSynthesisUtterance هست.

این هم کد جاوا اسکریپتی که برای خواندن یک رشته نیاز است :

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);

}

سورس کد - دموی پروژه - منبع