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