تگ audio در html
تگ audio برای قرار دادن محتوای صوتی در یک صفحه است، تگ <audio> حاوی یک یا چند تگ <source> با فرمت‌های صوتی مختلف است که مرورگر اولین فرمتی را که پشتیبانی می کند در نظر می‌گیرد.
- نحوه استفاده از تگ <audio>
- attribute یا ویژگی‌های قابل استفاده در تگ‌های <audio>
- src
- controls
- autoplay
- muted
- loop
- preload
- Global Attributes
- Event Attributes
نحوه استفاده از تگ <audio>
↑متن بین بخش ابتدایی تگ <audio> و بخش پایانی یعنی </audio> فقط در مرورگرهایی نمایش داده می‌شود که از این تگ پشتیبانی نمی‌کنند. سه فرمت صوتی MP3، WAV و OGG در HTML پشتیبانی می‌شوند .
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio> | Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
attribute یا ویژگی‌های قابل استفاده در تگ‌های <audio>
↑تگ audio می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.
src
↑ویژگی src آدرس فایل صوتی را مشخص می کند. با توجه به اینکه فرمت‌هایی چون OGG در تمامی مرورگرها پشتیبانی نمی‌شود پیشنهاد می‌شود با از تگ source فرمت‌های مختلف را قرار داده تا فایل صوتی در تمامی مرورگرها پشتیبانی شود.
<audio src="horse.ogg" controls>
Your browser does not support the audio element.
</audio> controls
↑ویژگی controls در صورت وجود، مشخص می کند که کنترل های صوتی باید نمایش داده شوند. کنترل های صوتی باید شامل مواردی چون Play, Pause, Seeking و Volume باشند.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> autoplay
↑ویژگی autoplay برای پخش خودکار است و در صورت وجود، صدا به‌محض اینکه صفحه بارگذاری شود پخش خواهد شد. توجه داشته باشید برخی از مرورگرها ممکن است اجازه پخش خودکار را ندهند.
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> muted
↑ویژگی muted برای بی صدا کردن فایل صورتی در هنگام پخش است.
<audio controls muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio> loop
↑ویژگی loop به مانند replay عمل کرده و پس از پایان، فایل صوتی مجددا پخش خواهد شد.
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> preload
↑ویژگی preload یا پیش بارگذاری شرایطی را فراهم می‌سازد تا فایل صوتی قبل از پخش به صورت خودکار بارگذاری شود.
مقادیر:
none: در این حالت از preload شدن فایل صوتی جلوگیری می‌شود.- auto: در این حالت فایل صورتی به صورت خودکار پخش و preload می‌شود.
- metadata: در این حالت اطلاعاتی مانند نام، فرمت و طول فایل preload می‌شود.
<audio controls preload="none">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> Global Attributes
↑تگ <audio> از Global Attributes در HTML پشتیبانی می کند.
Event Attributes
↑تگ <audio> از Event Attributes in HTML در HTML پشتیبانی می کند.
ویژگی‌های ظاهری پیشفرض در تگ <audio>
↑اکثر مرورگرها تگ <audio> را با مقادیر پیش فرض زیر نمایش می دهند:
audio {
display: inline;
}آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین
پروژه محور - ارتباط مستقیم با مدرس