پخش صدا در HTML5
HTML5 برای پخش صدا، استانداردی را به وجود آورده است.
پخش صدا در وب
تا به حال، هرگز استانداردی برای پخش فایل های صوتی در صفحات وب وجود نداشته است.
امروزه، فایل های صوتی عموماً از طریق یک پلاگین مثل Flash نشان داده می شوند. هر چند همه مرورگرها، پلاگین های مشابهی ندارند.
HTML5 روش استانداردی را برای پخش فایل های صوتی با استفاده از عنصر <audio> فراهم کرده است.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <audio> را پشتیبانی می کنند.
توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <audio> را پشتیبانی نمی کنند.
عنصر <audio> چگونه کار می کند؟
برای پخش یک فایل صوتی در HTML5 تمام آن چیزی که نیاز دارید این چند خط کد زیر است:
مثال (پخص صدا در HTML5)
<source src="/horse.ogg" type="audio/ogg">
<source src="/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
ویژگی controls برای افزودن کنترل های play ،pause و صدا می باشد.
در صورتی که مرورگر از عنصر <audio> پشتیبانی نمی کند باید بین دو تگ <audio> و <audio/> جمله ای مناسب مانند زیر قرار داده شود:
تگ <audio> به شما اجازه می دهد که چند تگ <source> داشته باشید. تگ های <source> می تواند به فایل های صوتی مختلفی لینک شوند. مرورگر اولین فرمتی که قابلیت پخش آن را داشته باشد، برای کاربر پخش می کند.
مثال بالا از یک فایل Ogg استفاده کرده است و در مرورگرهای Firefox, Opera, Chrome کار می کند. برای اینکه فایل صوتی در IE و Safari و نسخه های قبلی Chrome نیز پخش شود، باید از فابل های MP3 استفاده کنید.
تمام خصوصیت های تگ <audio>
Autoplay: در صورت وجود فایل صوتی به محض آماده شدن پخش می شود. مقداری که می گیرد: autoplay
Controls: دکمه های مختلف مثل play و ... را اضافه می کند. مقداری که می گیرد: controls
Loop: در صورت اتمام فایل صوتی دوباره از اول شروع به پخش می کند. مقداری که می گیرد: loop
Preload: کاری می کند که صدا در هنگام لود شدن صفحه، آماده پخش شود. مقداری که می گیرد: perload
Src: آدرس فایلی است که باید پخش شود. مقداری که می گیرد: یک url
فرمت های صدا و پشتیبانی مرورگرها
در حال حاضر 3 فرمت تحت پشتیبانی عنصر <audio> قرار دارد.
- MP3
- Wav
- Ogg
Browser | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | NO | YES | YES |
Safari 5+ | YES | YES | NO |
Opera 10+ | NO | YES | YES |
MIME Types for Audio Formats
Format | MIME-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 19626