ایجاد رابط کاربری کنترل شدنی با صوت

در چند سال اخیر APIهای بسیار زیادی به دنیای وب پا گذاشته‌اند. این APIها کارهایی را انجام می‌دهند که برای سال‌ها در اپلیکیشن‌های موبایل وجود داشتند. یکی از APIهای نسبتا جدید Speech Recognition API است. همانطور که ممکن است حدس زده باشید این API برای تشخیص صوت و تبدیل آن به متن استفاده می‌شود. 

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

یک پیش‌بینی نیز وجود دارد که براین باور است تا ۱۰ سال آینده رابط‌های مبتنی بر اسکرین کم کم جای خود را به رابط‌های صوتی می‌دهند. ممکن است عجیب به نظر برسد اما از آنجایی که مردم بیشتر و بیشتر با تکنولوژی‌های تشخیص صوتی آشنایی پیدا می‌کنند و با آن سازگار می‌شوند، چندان پیش‌بینی دور از انتظاری نخواهد بود. 

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

۱. شروع پروژه

برای شروع کار در یک فولدر جدید برای پروژه، فایلی با نام speech.html را ایجاد کنید.

۲. افزودن محتوا

ابتدا نیاز است که یکسری پیام‌های اولیه را در وبسایت به نمایش بگذاریم. بنابراین یک div را ایجاد کرده و اطلاعات زیر را در آن قرار دهید:

• یک پیغام ساده برای نمایش اینکه پیغام‌تان را اینجا وارد کنید.
• یک متن مخفی برای نمایش عدم پشتیبانی از Speech API.

<div id="wrapper">
      <span id="unsupported" class="support hidden">Speech API Not Supported</span>
      <h2>Your Message:</h2>
</div>

۳. انتخاب نتیجه

زمانی که از Speech API استفاده می‌کنیم دو راه برای نمایش محتوای گفته شده را داریم. یک اینکه متن را زمانی نمایش دهیم که کاربر به صورت کامل صحبت‌های‌ش را انجام داده و دو اینکه به صورت بلادرنگ همراه با صحبت‌های کاربر، متن تولید شده را نمایش دهیم. بنابراین ما به دو radio button نیاز داریم.

<div id="typeOfInput">
      <span>Results:</span>
      <label>
          <input type=radio name=recognition-type value=final> Final speech</label>
      <label>
      <input type=radio name=recognition-type value=interim checked> As you speak</label>
</div>

۴. نمایش متن

حال نیاز است تا متنی که کاربر آن را از طریق رابط صوتی بیان کرده، به نمایش گذاشته شود. برای اینکار نیاز است تا یک textarea را ایجاد کنیم. همچنین برای پاک کردن اطلاعات داخل آن یک دکمه با برچسب Clear Text نیز قرار خواهیم داد.

<textarea id="transcription" readonly>
</textarea>
<br/>
<button id="clear-all" class="button">Clear Text</button>

۵. مرحله نهایی طراحی

حال همانطور که در تصویر بالا مشاهده می‌کنید قصد افزودن یک دکمه جدید برای ضبط کردن صدا را داریم. می‌توانید برای ظاهر آن از یکسری کلاس CSS استفاده کنید. 

<div class="button-wrapper">
    <div id="speechButton" class="start"></div>
  </div>
  <div id="log">Click to start speaking</div>
</div>

همانطور که ممکن است متوجه شده باشید تا اینجای کار ما هیچگونه امکانات تعاملی را به وبسایت اضافه نکردیم. بنابراین از این مرحله به بعد قرار است سراغ استفاده کردن از جاوااسکریپت برویم.

۶. جاوااسکریپت

قبل از بستن تگ body تگ script را قرار دهید. در این مطلب قرار است تمام کدهای جاوااسکریپت را به صورت Internal قرار دهیم. دو خط اول این اسکریپت قرار است المان‌هایی که در قسمت HTML قرار دادیم را از طریق id دریافت کند. متغیر transcription قرار است نتیجه گفته‌های داخل متن را ذخیره کند و log قرار است شیوه کار کاربر با دکمه ضبط صدا را نمایش دهد. 

<script>

var transcription = document.getElementById('transcription');

var log = document.getElementById('log');

</script>

۷. متغیرهای بیشتر

با استفاده از متغیرهای بیشتری که در زیر آن‌ها را قرار خواهیم داد، رابط کاربری ما کنترل‌پذیرتر می‌شود. دکمه speechButton قرار است تبدیل به یک حالت toggle شود، به این معنا که دو حالت فعال/غیرفعال خواهد داشت. این حالت را می‌توان از طریق یک متغیر true/false پیاده‌سازی کرد. همچنین دکمه clear را خواهیم داشت که برای پاک کردن کل متون قرار گرفته در textarea استفاده می‌شود.

var start = document.getElementById('speechButton');
var clear = document.getElementById('clear-all');
var speaking = false;

۸. پشتیبانی

اولین کاری که کدهای ما قرار است انجام دهند بررسی پشتیبانی مرورگر کاربر از Speech APIهاست. پس نیاز است که از یک شرط استفاده کنیم، در صورت درست بودن شرط قصد داریم تا پیغام hidden شده قدم‌های اول این مطلب را به نمایش بگذاریم و همچنین دکمه ضبط صدا را پنهان نماییم.

window.SpeechRecognition = window.SpeechRecognition ||
window.webkitSpeechRecognition ||
null;
if (window.SpeechRecognition === null) {
document.getElementById('unsupported').classList.remove('hidden');
start.classList.add('hidden');
} else {

۹. شروع به تشخیص صدا

فرایند تشخیص را باید در بلوک else دستور قبلی قرار دهیم. همچنین باید در نظر گرفت که فرایند تشخیص صدا را براساس رادیو باتن‌های قرار داده شده در صفحه انجام دهیم. به صورت پیشفرض حالتی که در آن به همزمان با صحبت کردن خروجی متنی نیز نمایش داده شود روی دکمه‌ها قرار گرفته و به همین دلیل باید از recognizer.continuous استفاده کنیم.

var recognizer = new window.

SpeechRecognition();

recognizer.continuous = true;

recognizer.onresult = function(event) {

transcription.textContent = '';

for (var i = event.resultIndex; i < event.

results.length; i++) {

در کدهای بالا تابع onresult نتیجه فرایند تشخیص صدا را مدیریت می‌کند. این نتیجه قرار است به متن‌های transcription اضافه شود.

۱۰. کدام حالت خروجی؟

حال نیاز است از طریق یک دستور شرطی دو حالت قرارگیری متن در داخل تکست-باکس را بررسی نماییم.

if (event.results[i].isFinal) {

transcription.textContent = event.results[i][0].transcript;

} else {

transcription.textContent += event.results[i][0].transcript;

}

}

};

۱۱. مدیریت خطاها

با هر API یکسری خطاها جدید نیز وجود خواهد داشت که نیاز به مدیریت کردن‌شان داریم. این موارد را قرار است از طریق div مربوط به log نمایش دهیم. برای اینکار به صورت زیر عمل کنید:

recognizer.onerror = function(event) {

log.innerHTML = 'Recognition error: ' + 

event.message + '<br />' + log.innerHTML;

};

۱۲. شروع به حرف زدن!

Event listener زمانی که کاربر روی دکمه کلیک می‌کند شروع به کار کرده و دکمه مربوطه نیز استایلی دیگر به خود می‌گیرد که نشان می‌دهد کاربر در حال حرف زدن است. 

start.addEventListener('click', function() {

if (!speaking) {

speaking = true;

start.classList.toggle('stop');

recognizer.interimResults = document.

querySelector('input[name="recogniti

on-type"][value="interim"]').checked;

۱۳. پیام‌ها

حال قصد داریم تا با استفاده از یک دستور try/catch  فرایند speech recognition را شروع کرده و به کاربر بگوییم که چه زمانی در حال صحبت کردن است. برای انجام چنین کاری نیاز است که یکسری پیام مناسب را چاپ کنیم:

try {

recognizer.start();

log.innerHTML = 'Start speaking now

<br/>Click to stop';

} catch (ex) {

log.innerHTML = 'Recognition error:

<br/>' + ex.message;

}

۱۴. متوقف کردن

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

} else {

recognizer.stop();

start.classList.toggle('stop');

log.innerHTML = 'Recognition stopped

<br/>Click to speak';

speaking = false;

}

});

۱۵. پاک کردن متن

حال نیاز است که با کلیک روی دکمه Clear Text متن داخل textbox پاک شود. برای اینکار به شکل زیر عمل کنید:

clear.addEventListener('click', function() {transcription.textContent = '';
});
}

در پایان

در این مطلب سعی کردیم تا با ارائه یک آموزش کد-محور به شما شیوه استفاده از APIهای مربوط به تشخیص صدا را توضیح دهیم. همچنین در ابتدای مقاله اهمیت بالای این موضوع را بررسی کردیم. اگر دنبال خواندن مطالب بیشتری در این رابطه هستید لینک‌های زیر را به شما پیشنهاد می‌کنم.

• طراحی وبسایت‌های موبایل برای جستجوی صوتی
• تبدیل صدا به متن با جاوا اسکریپت
• آینده صدا : صنعت‌هایی که برای همیشه تغییر می‌کنند
• معرفی Howler.js، یک کتابخانه صدای JavaScript

منبع