Articulate.js یک پلاگین jQuery می باشد که این قابلیت را به ما می دهد که با یک خط کد ، لینک هایی بسازیم که با کلیک بر روی آن ها ، مرورگر قسمت های مهم سایت را برایمان بخواند.

این پلاگین در سایت های خبری خیلی می تواند کاربردی باشد ، به گونه ای که کاربر شاید نخواهد کل نوشته ها را بخواند . با این قابلیت می تواند با فشردن یک دکمه بخش های مهم خبر را بشنود.

یکی از نقاط قوت Articulate.js این است که چون از JavaScript استفاده می کند به افزونه اضافه ای در مرورگر خود نیاز نخواهید داشت.

رابط Speech Synthesis

Articulate.js از رابط text-to-speech برای این کار استفاده میکند. این رابط زیرمجموعه Web Speech API می باشد که در اکثر مرورگرها مانند Chrome ، Edge ، Firefox ، Safari و غیره پشتیبانی می شود.

دو شی  از رابط Speech Synthesis مرورگر را قادر می سازد تا کلمات را بخواند : SpeechSynthesis و SpeechSynthesisUtterance

قدم اول این است که نمونه ای از SpeechSynthesisUtterance بسازیم و متنی که می خواهیم خوانده شود را به آن بدهیم. این قابلیت وجود دارد که property هایی مانند سرعت خواندن ، زیر و بم بودن صدا ، بلندی صدا و لحجه صدا ، را اضافه کرد.

برای شروع خواندن هم باید نمونه ای که در قسمت قبل را ساختیم را به عنوان پارامتر به متود ()SpeechSynthesis.speak بدهیم. قابلیت های توقف ، ادامه دادن و لغو کردن ، همه از متودهای شی SpeechSynthesis هستند. نسخه نمایشی مایکروسافت به شما این قابلیت را می دهد تا با این امکانات کار کنید.

شروع کار با Articulate.js

برای شروع کدزنی با Articulate.js ابتدا باید فایل jQuery را در پروژه خود include کنید . سپس فایل Articulate.js ( که در صفحه GitHub آن موجود است) را در پروژه خود شامل کنید. کدهای Articulate.js بسیار مختصر و قابل فهم هستند مثلا تکه کد زیر تگ article را برای شما می خواند :

$('article').articulate('speak');

و یا تکه کد زیر تگ های h1 ، h2 و p را برای شما می خواند :

$('h1, h2, p').articulate('speak');

متود های اساسی Articulate.js به صورت زیر می باشد :

قسمتی از صفحه را که مد نظر ما می باشد ، را  می خواند :

$(selector).articulate('speak');

اگر بخواهیم متوقف کنیم :

$().articulate('pause');

بخواهیم بعد از متوقف کردن آن را ادامه دهیم :

$().articulate('resume');

به صورت کامل خواندن را لغو کنیم :

$().articulate('stop');

در قسمت زیر هم مثالی از CodePen می بینید :

[iframe src=”//codepen.io/adamcoti/embed/zoybvQ?height=345&theme-id=1&slug-hash=zoybvQ&default-tab=html%2Cresult&user=adamcoti&embed-version=2&pen-title=Articulate%3A%20Basic%20Functions” width=”100%” height=”345″ scrolling=”no”]

شما می توانید در یک لحظه تنها یک نمونه از SpeechSynthesisUtterance در صفحه خود فعال داشته باشید. به همین دلیل برای متوقف کردن ، ادامه دادن یا لغو کردن، به selector نیازی نخواهید داشت . هم چنین مرورگر زمانی که هیچ متنی برای خواندن نداشته باشد ، متود stop را اجرا می کند.

برای تنظیم کردن سرعت ، زیر و بم و بلندی صدا می توانید از دستورهای زیر استفاده کنید :

//Rate of the speaking sound :

$().articulate('rate',num);

//Default = 1.1

//Range = [0.1 – ۱۰]



//Pitch of the speaking voice

$().articulate('pitch',num);

//Default = 1.0

//Range = [0 - 2]



//Volume of the speaking voice

$().articulate('volume',num);

//Default = 1.0

//Range = [0 - 1]

در قسمت زیر هم مثالی از CodePen  برای این عملیات ها می بینید :

[iframe src=”//codepen.io/adamcoti/embed/GNPPrY?height=345&theme-id=1&slug-hash=GNPPrY&default-tab=html%2Cresult&user=adamcoti&embed-version=2&pen-title=Articulate%20%3A%20Voice%20Parameters” width=”100%” height=”345″ scrolling=”no”]

بعد از استفاده از Articulate.js احتمالا متوجه این موضوع خواهید شد که در مرورگرهای مختلف صدایی که می شنوید فرق خواهد داشت. برای مثال در iPhone صدا با سرعت نسبتا بیشتری از کامپیوترهای شخصی پخش می شود. علاوه بر آن ، بسته به نوع سیستم عامل و سخت افزار ، ممکن است مرورگر ها صداهای مختلفی داشته باشند.

کلام آخر…

ایده Articulate.js از آن جایی بوجود آمد که کاربر می تواند با فشردن یک دکمه از شنیدن خبرها لذت ببرد مخصوصا زمانی که کاربر از خیره شدن به صفحه نمایش و خواندن مطالب بیزار است.

Articulate.js در حال حاضر از زبان های زیادی مانند فارسی پشتیبانی نمی کند ولی فایل های آن به صورت متن باز روی صفحه ی GitHub آن موجود است. اگر علاقه مند هستید می توانید روی این پروژه کار کرده و زبان فارسی را به آن اضافه کنید.