کانال تلگرام

آشنایی و تسلط بر عنصر audio در HTML

تاریخ : ۱۵ شهریور ۱۳۹۸
نویسنده : امیر حسین نصر
دسته بندی ها : html , آموزشی

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

audio

از سال ۲۰۱۹، تگ <audio> به طور گسترده ای در بین مرورگرهای مدرن پشتیبانی می شود. البته اینترنت اکسپلورر ۸ و نسخه های قبلی آن از این عنصر پشتیبانی نمی کنند. از <audio> می توان برای پخش فایلهای صوتی در قالبهای زیر استفاده کرد:

  • mp3 : توسط همه مرورگرهای مدرن پشتیبانی می شود.
  • wav : توسط Internet Explorer پشتیبانی نمی شود.
  • ogg : توسط Internet Explorer و Safari پشتیبانی نمی شود.

audio-in-html

استفاده از <audio> برای وارد کردن یک عنصر صوتی در وب سایت خود

در اینجا ابتدایی ترین حالت استفاده از تگ <audio> در HTML را به شما نشان میدهیم. در این مثال یک فایل mp3 را از وب سرور خود بارگیری کرده و سپس آن را پخش می کنیم. به ویژگی و یا مشخصه autoplay که برای پخش خودکار فایلهای صوتی استفاده می شود توجه کنید. البته گفته می شود که باید از پخش خودکار صداها در صفحات وب باید اجتناب شود زیرا این مورد برای بازدیدکنندگانی که هیچ راهی برای جلوگیری از پخش صدا ندارند ، بسیار آزار دهنده است.

<audio src="sound.mp3" autoplay></audio>

پخش دوباره فایل صوتی بعد از اتمام

اگر می خواهید یک فایل صوتی بارها و بارها پخش شود ، می توانید مشخصه loop را به عنصر صوتی خود اضافه کنید.

<audio src="sound.mp3" autoplay loop></audio>

نمایش کنترل های پخش در مرورگر

به جای پخش خودکار صدا، مرورگر می تواند کنترل هایی مانند میزان صدا ، پخش / مکث و غیره را برای کاربران فعال کند. در صورت کاربران شما تصمیم میگیرند که با فایل صوتی چه کاری انجام دهند. این کار به راحتی و با افزودن مشخصه controls به تگ مربوطه قابل انجام است.

<audio src="sound.mp3" controls></audio>

چندین فرمت برای فایل

تگ <audio> به شما این امکان را می دهد که فرمت های مختلفی از یک فایل صوتی را مشخص کنید. این مورد به خصوص برای وقتی که می خواهید فایلی را با فرمت ogg پخش کنید مفید است، زیرا این نوع فایل توسط اینترنت اکسپلورر و سافاری پشتیبانی نمی شود.

<audio controls>
  <source src="sound.ogg">
  <source src="sound.mp3">
</audio>

انواع MIME را مشخص کنید

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

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
</audio>

آگاه کردن کاربران وقتی از مرورگر های قدیمی برای این عنصر استفاده میکنند

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

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
  Your browser does not support the audio!
</audio>

فایل های بافر

هنگام پخش فایلهای بزرگ، بهتر است که فایل ها را بافر کنید تا یک تجربه پخش خوب را به بازدید کنندگان ارائه دهید. برای این کار می توانید از مشخصه preload استفاده کنید. این مشخصه سه مقدار را می پذیرد:

  • none (اگر نمی خواهید فایل بافر شود)
  • auto (اگر می خواهید مرورگر فایل را بافر کند)
  • metadata (برای بافر متا دیتا زمانی که صفحه بارگذاری میشود)
<audio controls>
  <source src="sound.mp3" preload="auto" >
</audio>

کنترل تگ <audio> با استفاده از جاوا اسکریپت

کنترل یک پخش کننده صوتی HTML با JavaScript بسیار ساده است. مثال زیر نشان می دهد که چگونه می توانید با استفاده از HTML و JavaScript یک پخش کننده صوتی ابتدایی را با کنترل های اساسی (پخش ، مکث ، زیاد کردن صدا ، کم کردن صدا) ساخت.

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pause</button>
	<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
	<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div> 

استایل دهی عنصر Audio با استفاده از CSS

با توجه به اینکه عنصر audio یک عنصر جدید است، گزینه های استایل دهی آن در CSS محدود است. خصوصیاتی از CSS که برای این عنصر قابل استفاده هستند عبارتند از:

  • width
  • box-shadow
  • border-radius
  • transform
audio { 
  width: 600px; 
  box-shadow: 5px 5px 20px rgba(0,0, 0, 0.4);
  border-radius: 90px;
  transform: scale(1.05);
}

اگر به دنبال ایجاد پخش کننده صوتی HTML مورد نظر هستید ، بهترین گزینه این است که مشخصه control را کنار گذاشته و کنترل ها را با استفاده از JavaScript پیاده سازی کنید.

پخش کننده صوتی پیشرفته با استفاده از MediaElement.js

همانطور که در بالا نشان داده شد ، گزینه های ظاهری CSS برای <audio> بسیار محدود هستند. خوشبختانه ، یک فریمورک شگفت انگیز رسانه ای  متن باز به نام MediaElement.js به شما امکان را می دهد تا کنترل بیشتری بر روی عناصر صوتی خود داشته باشید.  html-tags-audio

شکل بالا نشان می دهد که چگونه MediaElement.js به توسعه دهندگان اجازه می دهد تا به راحتی ظاهر دلخواه خود را به پخش کننده های صوتی HTML خود اعمال کنند. شما می توانید مثالی واقعی از این مورد را در اینجا مشاهده کنید. اگر به دنبال ساخت پخش کننده های صوتی دلخواه (یا ویدیویی) هستید ، قطعاً MediaElement.js ابزاری برای در نظر گرفتن است.

سوالات متداول

تگ صوتی در HTML چیست؟

تگ صوتی یعنی <audio> در HTML5 معرفی شده است و با استفاده از آن میتوانید یک عنصر صوتی را در صفحه HTML نشان دهید. از این تگ برای جاسازی فایل های صوتی در یک صفحه وب استفاده می شود.

از کدام تگ های HTML می توان در <audio> استفاده کرد؟

هیچ تگ HTML دیگری به جز source ، برای مشخص کردن مسیر یک فایل صوتی ، در <audio>  استفاده نمیشود. میتوان از متنی در این عنصر نیز استفاده کرد تا در صورت عدم پشتیبانی مرورگر به کاربر نشان داده شود.

#عنصر audio
۰ نظر

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید