شخصی سازی پخش کننده صوتی با Js

اگه به Sound Cloud سر زده باشید که بعید میدونم تا الان این سایت رو ندیده باشید حتما Player جذابش نظر شما رو هم جلب کرده و اگه یکم حس کنجکاوی بیشتری داشته باشید دوست داشتین که بدونید چه‌جوری میشه یه Player خیلی ساده و تا حدی مشابه باهاش رو پیاده سازی کنید. منم چند وقت واسم سوال بود و خیلی ذهنم رو درگیر کرده بود که چه جوری میتونیم یه Player مشابه باهاش بنویسم. واسه همین شروع کردم به گشتن و گشتن تا اینکه یه سری منابع جالب پیدا کردم که بهمون کمک میکنه تا بتونیم یکم عمیق‌تر با Audio Playerهای تحت وب کار کنیم.

کتابخانه JsMediaTags

این کتابخونه‌ای هست که تقریبا من خیلی دنبالش گشتم تا پیداش کنم و یه امکان خیلیی خیلییی خوب برای Player فراهم میکنه و اونم اینه که میتونه Meta-Tag هایی که روی فایل صوتی مثل نام هنرمند، عنوان، نام آلبوم، پوستر،... قرار گرفته رو بخونه و به صورت یه خروجی JSON در اختیارتون قرار بده تا ازش استفاده کنید اینجوری خیلی راحت شما میتونید فارغ از اینکه کاربر شما از مشخصات فایل صوتی اطلاعی داره یا نه پخش کننده‌ای داشته باشید که خودش به صورت خودکار این اطلاعات رو از داخل فایل استخراج میکنه برای مثال من برای پیاده سازی یکی از طرح‌هایی که تو Dribbble دیده بودم از این کتابخونه استفاده کردم تا طرح رو به یک کد پویا تبدیل کنم.

ماژول Audio در JS

این ماژول که خودش به وسیله تقریبا 99 درصد مروگرها پشتیبانی میشه به شما این امکان رو میده تا به وسیله کدهای جاوا اسکریپت یک کامپوننت AudioPlayer رو به صفحه وب اضافه کنید و با توابع مختلفی که داره اونو مدیریت کنید برای مثال یک Controller مجزا مثل تصویر بالا براش طراحی کنید و به طور کلی یک ظاهر خیلی جذاب‌تر براش بسازید. یک امکان خیلی خوبی که این ماژول به برنامه‌نویسان میده اینه که خیلی راحت میتونن AudioPlayer رو به صفحه اضافه کنن و لازم نیست برای کار کردن باهاش مثل VideoPlayer، تگ مربوطه رو با جاوا اسکریپت به اصلاح Select کنن.

ولی اگه داخل صفحه خودتون هم یک تگ Audio داشته باشید بازم با Select کردنش به وسیله جاوا اسکریپت خیلی راحت میتونید به این ماژول دسترسی پیدا کنید و کل پخش کننده رو مدیریت کنید. پس از این بابت لازم نیست نگرانی داشته باشید.

ماژول Canvas

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

حالا بریم سراغ یکم کد زدن و ببینیم دقیقا برای اینکه یک پخش کننده صوتی شخصی سازی شده داشته باشیم باید چیکار کنیم:

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

تو کد بالا بعد از اینکه اومدیم Player رو انتخاب کردیم (البته شما میتونید با همون Js بسازید و ادامه بدید) فایل صوتی رو که برای پخش بهش دادیم به کتابخونه پاس میدیم و اونم بعد از پردازش مورد نظر یه Object بهمون میده که تقریبا تمام اطلاعات مورد نظرما داخلش هست و میتونیم ازش استفاده کنیم فقط تنها چالشی که داره نمایش Cover فایل هست که به صورت Base64 داخل Object قرار گرفته و البته به صورت تیکه تیکه شده که خب اینم خیلی راحت با یه Loop کوچیک میتونید بهم بچسبونید و ازش هرجایی که لازمه استفاده کنید.

حالا بریم سراغ ساختن یک تگ Audio با استفاده از Js که یه نمونه خیلی ساده اش رو میتونید تو عکس زیر ببینید :

توی قطعه کد بالا ما اومدیم یه نگ Audio درست کردیم و به وسیله JQuery اونو به یکی از تگ‌های داخل صفحه اضافه کردیم حالا به وسیله Object که برای Audio داریم خیلی راحت میتونیم تمام بخش‌ها مثل صدا، پخش، توقف، عوض کردن src یا هرکاری دیگه‌ای که میخوایم رو باهاش انجام بدیم. برای اینکه بهتر متوجه بشید که چیکارهایی میتونید با این Object انجام بدید هم میتونید لینکی که در بالا معرفی کرده بودم رو مطالعه کنید و هم میتونید به Console کردنش ببینید چه پارامترهایی داخلش هست و شما به گه مواردی دسترسی دارین.

در بخش آخر هم باید بریم سراغ Canvas‌ و به وسیله فایل صوتی که داریم یک سری Waveforms تولید کنیم و موزیک پلیر خودمون رو آماده استفاده کنیم. خب حالا برای شروع به کد زیر دقت کنید:‌

تو کد بالا بعد از اینکه ما Canvas‌خودمون رو Select‌ کردیم و تنظیمات اولیه اون رو انجام دادیم یه تابع frameLooper رو استفاده میکنیم که این تابع هر ۶۰ms یکبار اجرا میشه و وظیفه اینو داره که Canvas‌رو به روز نگهداره و به اصطلاح در هر ثانیه Wave‌ مربوط به اون ثانیه رو نمایش بده علاوه بر اون شما میتونید با تغییر پارامترهای بالا نتیجه نهایی رو به دلخواه خودتون تغییر بدید.

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

مطالب پیشنهادی: