آموزش تگ audio در HTML

آموزش تگ audio در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ audio در HTML به صورت کامل آشنا بشید.
تگ audio در HTML
تگ audio
که دیگه از اسمش کاملا مشخصه چیه! تگی ست که ما با بکار بردن آن میتوانیم آهنگ ، صدا و بطور کلی یک رسانه و فایل صوتی را در یک صفحه ی وب قرار دهیم.
دوستان و همراهان گرامی بهتر است این مورد را بدانید که فقط سه فرمت MP3 و WAV و Ogg در HTML5 پشتیبانی می شوند، در نتیجه شما برای قرار دادن یک آهنگ ، فایل صوتی و … داخل صفحه یک وبسایت واجب است فایل شما یکی از سه فرمت MP3 و WAV و Ogg را داشته باشد در غیر این صورت فایل شما برای کاربر پخش نمی شود.
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
پشتیبانی مرورگرها از تگ <audio> در HTML5
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی به ترتیب از فرمت های MP3 و WAV و Ogg پشتیبانی می کنند یا خیر.
اگر به جدول بالا توجه کنید همانطور که مشاهده مینمایید فقط فرمت MP3 است که بدون مشکل توسط تمامی مرورگرها پشتیبانی می شود، در نتیجه شماهم تلاش کنید همیشه از فایل های صوتی با این فرمت استفاده کنید.
جدول نوع رسانه صوتی در HTML
مثال از تگ audio در HTML
در ادامه ی آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره یک : استفاده از صفت controls برای نمایش دکمه های پخش ، استوپ ، تنظیم صدا و …
<body> <audio controls> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body>
مثال شماره دو : پخش اوتوماتیک آهنگ
<body> <audio controls autoplay> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body>
اما مثال شماره سه : تکرار پخش آهنگ
<body> <audio controls loop> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body>
در مثال شماره چهار : غیرفعال کردن بارگذاری اوتوماتیک فایل صوتی همزمان با بارگذاری صفحه
<body> <audio controls preload="none"> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body>
و مثال شماره پنج : مخفی یا هاید کردن پلیر در صفحه ی وب ( یعنی آهنگ اوتوماتیک خودش پخش میشه ولی خوده پلیر مخفی است )
<body> <audio autoplay> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body>
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ audio
در HTML پشتیبانی میکنند یا خیر.
جدول صفات تگ audio در HTML
در جدول زیر میتوانید مشاهده کنید که چه صفات و چه مقادیری را میتوان در این تگ استفاده کرد.
پشتیبانی از صفات و رویدادهای عمومی
تگ audio
قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی را در HTML دارد.
نکات و توضیحات
- هر متنی را که در بین تگ
audio
بنویسید ، اگر مرورگر از تگaudio
پشتیبانی نکند آن متن برای کاربر نشان داده می شود و کاربر میتواند دلیل پخش نشدن آهنگ یا صدا را متوجه شود.
در برخی از مرورگرها یا جستجوگرها ( مثلا موزیلا فایرفاکس و گوگل کروم ) ممکن است از پخش اوتوماتیک صدا جلوگیری کنند. این طوری دیگه آهنگ به صورت خودکار پخش نمیشه، اما شما میتونید خودتون مشخص کنید که آیا اجازه ی پخش خودکار رو بده یا نه.
توصیه ما به شما دوست عزیزم این است که با شرکت در دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید تا بتوانید علاوه بر طراحی سایت برای خودتان و حتی دیگران و درآمد زایی برای خود درک بهتر و بیشتری راجع به این مطالب پیدا کنید.
ما سعی کردیم در این دوره از مثال های کوچک و کاربردی استفاده شود تا مطالب به صورت کامل برای شما عزیزان قابل فهم باشه این دوره درواقع سطح پیشرفته تر و کامل تر برای دوره html & css میباشد.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید