آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

vocalizer : تلفظ صحیح اسمتون رو به کاربران نشان دهید!

0 336 ۳۰ دی ۹۵

vocalizer

در این مطلب میخام ابزار Javascript ساده ای رو بهتون معرفی کنم و نحوه کار با اون رو به شما آموزش بدم. این ابزار که vocalizer نام داره میتونه نحوه صحیح تلفظ شدن کلمات مورد نظر شما رو به زیبایی به کاربران نمایش بده و کاربران با کمک این ابزار بهتر میتونن کلمه مورد نظر شما رو تلفظ کنن. تا حالا خیلی پیش اومده که بخاید نام وسیله یا فرد یا شئ پیچیده و خاصی رو درون سایتتون بزارید. در این مواقع کاربران ممکنه اون نام رو با هر روش و تلفظی بخونن و برداشت کنن و شاید اون چیزی که شما مد نظرتون هست رو برداشت نکنن. نحوه کار این ابزار به این صورت هست که بعد از کلمه مورد نظر شما یک علامت بلندگو قرار میده و زمانی که کاربران بر روی اون کلیک میکنن، تلفظ مربوط به اون پخش میشه و کاربران اون رو میفهمن.

همونطور که دیدید درون دمو یک متن نمونه قرار داده شده و به زبان انگلیسی بیان شده که اسم من محمد هست. بعد از کلمه Mohammad یک علامت بلندگو بصورت زیر قرار داده شده:vocalizer 2

زمانی که بر روی این آیکون یا کلمه Mohammad هاور میکنید، این آیکون تغییر رنگ میده و زمانی که بر روی اونا کلیک میکنید، یک صوت و صدا پخش میشه و تلفظ این کلمه رو به ما نشون میده. شما میتونین از این ایده در خیلی از سایتا استفاده کنید. مثلا میتونین در سایتهای خبری و آموزش زبانهای خارجه هم از این ابزار استفاده کنید. کار کردن با این ابزار خیلی راحت هست. در ابتدا باید یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین:

همونطور که میبینید فایل vocalizer.min.js رو در آخر به صفحه اضافه کردیم. این فایل بصورت اتوماتیک و با استفاده از Javascript، فایل vocalizer.min.css که مربوط به استایل دادن هست رو بعد از خودش لود میکنه و شما لازم نیست که بصورت جداگانه آن را درون صفحه لود کنید. همه فایلهای مورد استفاده رو میتونین از لینک دانلود موجود در آخر همین آموزش دانلود کنید. حالا یک p رو بصورت اضافه میکنیم و استایل مربوط به اون رو هم درون تگ style اضافه میکنیم:

خب حالا فرض کنید که میخایم برای کلمه Mohammad تلفظ مربوط به خودش رو قرار بدیم. برای اینکار باید اون رو درون یک span قرار داده و کلاس vocalizer رو به اون نسبت بدیم و ویژگی data-source اون رو هم برابر با auto قرار بدیم. بصورت زیر:

حالا اگه کدها رو در خروجی ببینید و بر روی کلمه Mohammad کلیک کنید، تلفظ مربوط به اون پخش میشه. ممکنه با خودتون فکر کنید که این ابزار چطور کار میکنه و صدا رو از کجا میاره. زمانی که شما ویژگی data-source رو برابر با auto قرار میدید، این ابزار در پس زمینه به سایت nameshouts متصل میشه و تلفظ مربوط به کلمه مورد نظر شما رو مورد جستجو قرار میده و یکی از بهترین نتایج رو دریافت و پخش میکنه. برای مثال اگر وارد سایت nameshouts شده و اسم خودمون رو جستجو کنیم بصورت زیر خواهد بود:vocalizer 3

همونطور که دیدید تلفظ کلمه Mohammad با 4 زبان عریی، بنگالی، اسپانیایی و اردویی قرار داده شده و با کلیک بر روی علامت بلندگو، پخش خواهند شد. اگر دقت کنید خواهید فهمید که ابزار vocalizer تلفظ مربوط به عربی رو دریافت کرده و پخش کرده. پس اگر مقدار رو برابر با auto قرار بدین، این اتفاق خواهد افتاد. اما اگر این تلفظها، همون تلفظی نبودن که شما دنبالشون بودید و یا اینکه اصلا برای کلمه مورد نظر شما تلفظی در سایت nameshouts نباشه، مجبورید که خودتون تلفظ مربوط به اون کلمه رو ضبط کرده و بصورت یک فایل mp3 در بیاورید و بعد آدرس اون فایل رو درون ویژگی data-source قرار بدین. برای مثال کد زیر رو در نظر بگیرید:

میبینید که درون این ویژگی آدرس فایل mohammad_ar.mp3 رو قرار دادیم و با اینکار زمانی که بر روی کلمه Mohammad کلیک کنیم، این فایل صوتی اجرا و پخش خواهد شد.

بهمین راحتی.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram