تگ audio در HTML

در این مقاله به بررسی تگ audio در html می پردازیم. تگ معرفی شده در این بخش به بررسی صدا در وب سایت می پردازد.

نکات اصلی تگ audio :

• تگ audio در HTML محتوای صوتی را در صفحات وب جاسازی می کند.
• تگ بسته شدن  <audio> باید گنجانده شود.
• برای اطمینان از اینکه صدا برای اکثر بازدیدکنندگان کار می کند ، می توان چندین منبع از محتوای صدا در این تگ را فهرست کرد.

استفاده از تگ audio

<audio> محتوای صوتی را به صفحات وب اضافه می کند.

به یاد داشته باشید: تگ audio در HTML از فرمت های فایل زیر پشتیبانی می کند – mp3 ، wav و ogg

<audio controls>
<source src="bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3" type="audio/mpeg"">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

توجه: متن درون تگ های صوتی HTML فقط درصورتی قابل مشاهده خواهد بود که مرورگر از عنصر تگ صوتی پشتیبانی نکند.

ویژگی های تگ audio

autoplay

پخش خودکار مشخص می کند که آیا پس از بارگیری صفحه وب ، تگ صدا باید به طور خودکار پخش شود.

<audio controls autoplay>
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

controls

کنترل های صوتی HTML نشان می دهد که آیا پخش کننده صدا باید دکمه های کنترل داشته باشد (پخش ، مکث ، میزان صدا ، و غیره).

<audio controls>
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

loop

حلقه مشخص می کند که بعد از پایان صدا مجدداً audio شروع می شود یا خیر.

<audio controls loop>
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

muted

بی صدا کردن نشان می دهد که آیا بعد از بارگیری صدا باید بی صدا شود.

<audio controls muted>
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

preload

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

• هیچکدام مشخص نمی کند که صدا نباید از قبل بارگیری شود.
• متا دیتا مشخص می کند که فقط فرا داده (طول) بازیابی می شود.
• خودکار مشخص می کند که صدا قابل بارگیری است.

<audio controls preload="none">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

src

src منبع URL فایل صوتی را نشان می دهد.

<audio src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" controls>
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

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

تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

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