این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ audio در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ audio در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ audio در HTML
تگ audio که دیگه از اسمشم مشخصه چیه! تگی است که ما با استفاده از آن میتوانیم آهنگ ، صدا و بطور کلی یک رسانه ی صوتی را در یک صفحه ی وب قرار دهیم.
دوستان محترم بهتر است بدانید که تنها ۳ فرمت MP3 و WAV و Ogg در HTML5 پشتیبانی می شوند، لذا شما برای قرار دادن یک آهنگ و.. درون یک صفحه وب باید فایل شما یکی از ۳ فرمت MP3 و WAV و Ogg را داشته باشد در غیراینصورت فایل شما برای کاربر پخش نخواهد شد.
Free-Learn
پشتیبانی مرورگرها از تگ <audio> در HTML5
در جدول زیر میتوانید مشاهده نمایید که انواع مرورگرهای اینترنتی به ترتیب از فرمت های MP3 و WAV و Ogg پشتیبانی می کنند یا خیر.
| نام مرورگر | MP3 | Wav | Ogg |
|---|---|---|---|
| Edge | بله | بله | بله |
| Chrome | بله | بله | بله |
| Firefox | بله | بله | بله |
| Safari | بله | بله | خیر |
| Opera | بله | بله | بله |
طبق جدول بالا همانطور که مشاهده مینمایید تنها فرمتی که بدون مشکل توسط تمامی مرورگرها پشتیبانی می شود فرمت MP3 می باشد، لذا شماهم سعی کنید همیشه از فایل های صوتی با این فرمت استفاده نمایید.
Free-Learn
جدول نوع رسانه صوتی در HTML
| فرمت فایل | نوع رسانه |
| MP3 | audio/mpeg |
| WAV | audio/wav |
| Ogg | audio/ogg |
Free-Learn
مثال از تگ audio در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از صفت controls برای نمایش دکمه های پخش ، تنظیم صدا و..
|
1 2 3 4 5 6 7 |
<body> <audio controls> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
مثال شماره ۲ : پخش خودکار آهنگ
|
1 2 3 4 5 6 7 |
<body> <audio controls autoplay> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
مثال شماره ۳ : تکرار پخش آهنگ
|
1 2 3 4 5 6 7 |
<body> <audio controls loop> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
مثال شماره ۴ : غیرفعال کردن بارگذاری خودکار فایل صوتی همزمان با بارگذاری صفحه
|
1 2 3 4 5 6 7 |
<body> <audio controls preload="none"> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
مثال شماره ۵ : مخفی کردن پلیر در صفحه ( یعنی آهنگ خودکار خودش پلی میشه ولی خوده پلیر مخفیه )
|
1 2 3 4 5 6 7 |
<body> <audio autoplay> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ audio در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ audio در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| autoplay | autoplay | برای فعال کردن پخش خودکار |
| controls | controls | برای نمایش دکمه های پخش ( تنظیم صدا و.. ) |
| loop | loop | برای فعال کردن تکرار پخش |
| muted | muted | برای قطع صدای آهنگ |
| preload | auto metadata none |
مشخص میکند که آیا همزمان با بارگذاری صفحه فایل صوتی نیز بارگذاری شود یا خیر |
| src | URL | آدرس URL فایل صوتی را مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ audio از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- هر متنی که در بین تگ
audioقرار میگیرد ، اگر مرورگر از تگaudioپشتیبانی نکند آن متن برای کاربر به نمایش درخواهد آمد و کاربر میتواند دلیل پخش نشدن آهنگ،صدا را متوجه شود.
در برخی از مرورگرها ( مثلا موزیلا فایرفاکس و گوگل کروم ) ممکن است از پخش خودکار صدا جلوگیری کنند، اینجوری دیگه آهنگ خودکار پخش نمیشه، ولی خب شما میتونید خودتون تعیین کنید که آیا اجازه بده برای پخش خودکار یا خیر. (آموزش فعالسازی پخش خودکار در مرورگرها)
