پخش کننده صوتی HTML5

در پخش کننده صوتی HTML5 می توان عناصر صوتی را که امکان پخش صدا را دارند به وب سایت ها اضافه کرد.

مقدمه پخش کننده موسیقی HTML5

در HTML4 و نسخه های قبلی ، عناصر صوتی بومی پشتیبانی نمی شدند. این بدان معنی است که شما باید یک پلاگین ویژه (مثلاً Adobe Flash یا Apple Quicktime) را تعبیه کنید تا بتوانید صدا را در وب سایت خود پخش کنید. در آن زمان مسئله چندان مهمی نبود، به هر حال استفاده از محتوای پویا بسیار کم به دلیل کندی اینترنت امکان پذیر بود.

HTML5 تگ های جدیدی را برای جاسازی فایل های چندرسانه ای به طور مستقیم در صفحه وب شما معرفی کرد. یکی از آن ها <audio> بود که به شما امکان می دهد یک پخش کننده موسیقی HTML5 با کنترل های صوتی را مستقیماً در صفحه وب جاسازی کنید.

نحو برای صوتی HTML5

برای قرار دادن یک پخش کننده صوتی HTML5 در وب سایت خود ، باید از یک جفت تگ <audio> استفاده کنید. توجه داشته باشید که برخی از عناصر تو در تو نیز وجود دارد:

<audio controls>
  <source src="audio-tag-example.mp3" type="audio/mpeg">
  <source src="audio-tag-sample.wav" type="audio/wav">
  <source src="audio-tag-demo.ogg" type="audio/ogg">
  Audio tag is not supported in this browser.
</audio>

درج تگ <source> ضروری است، با استفاده از آن ها ، منابع عناصر صوتی را مشخص می کنید.

می توانید چندین منبع را در قالب های مختلف تعریف کنید تا مطمئن شوید مرورگر کاربر شما حداقل از یکی از آن ها پشتیبانی می کند. در حالیکه تگ <audio> از سه قالب (MP3 ، Wav و Ogg) پشتیبانی می کند ، پشتیبانی از مرورگر برای آن ها متفاوت است.

توجه: <source> یک عنصر خالی را نشان می دهد – هیچ محتوا ندارد ، فقط ویژگی دارد.

سفارشی کردن پخش کننده صوتی HTML5

با افزودن یک یا چند ویژگی تگ ، می توانید نحوه مشاهده و عملکرد پخش کننده خود را اصلاح کنید.

کنترل های صوتی HTML5

پخش کننده صوتی غیر قابل کنترل HTML5 به معنای تجربه کاربری وحشتناک است. برای تهیه دکمه های پخش کننده به کاربر خود (همچنین کنترل های صوتی HTML5 نیز نامیده می شود) ، باید ویژگی کنترل ها را در تگ بازشو <audio> قرار دهید:

<audio controls>
  <source src="audio-tag-example.mp3" type="audio/mpeg">
  Audio tag is not supported in this browser.
</audio>

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

سایر صفات

در حالی که سایر ویژگی ها کمتر مورد استفاده قرار می گیرند ، اما خوب است که در صورت نیاز به تنظیم نوع رفتار خاص برای پخش کننده صوتی HTML5 خود ، با آن ها آشنا باشید.

نکات مهم پخش کننده صوتی HTML5

• متن موجود بین تگ های <audio> را محتوای برگشتی می نامند. اگر نتواند صدا را پخش کند ، مرورگر آن را نمایش می دهد. در اینجا می توانید پیامی به کاربر یا پیوند مستقیم به پرونده اضافه کنید.
• به جای قرار دادن تگ<source> ، می توانید از ویژگی src برای تعریف منبع صوتی استفاده کنید. با این حال ، اجازه اضافه کردن چندین منبع را نمی دهد.
•  <audio> یک عنصر درون خطی است – با این حال ، همیشه برای طراحی مناسب نیست. می توانید با استفاده از CSS آن را مسدود کنید.

پشتیبانی مرورگرها

از اکثر مرورگرها مانند : chrome، ie ، Firefox ، Safari، Opera، Edge پشتیبانی می کند.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.