پخش صدا در HTML
صداها در HTML به روش های مختلفی می توانند پخش شوند.
مشکلات و راه حل های پخش صدا در وب
اجرای صدا در HTML کار آسانی نیست!
باید ترفند های زیادی برای اینکه مطمئن شوید فایل صوتی شما در تمام مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) و تمامی سخت افزارها (PC, Mac , iPad, iPhone) اجرا شود به کار ببرید.
در این فصل مشکلات و راه حل هایی موجود به طور خلاصه بیان شده است.
پخش صدا با استفاده از Pluginها
Plugin یک برنامه کامپیوتری کوچک است که قابلیت های استاندارد مرورگرهای وب را گسترش می دهد. Pluginها برای اهداف مختلفی می توانند استفاده شوند. آنها می توانند برای پخش موزیک، نمایش نقشه، تأیید شناسه کاربری بانکی، کنترل ورودی ها کاربر و ... بکار روند.
Pluginها را می توان با استفاده از تگ های <object> یا <embed> به صفحات HTML اضافه نمود.
پخش صدا با استفاده از عنصر <embed>
هدف از تگ <embed> درج کردن عناصر multimedia در صفحات HTML است.
قطعه کد زیر یک فایل MP3 را در صفحه وب درج می کند.
مشکلات استفاده از عنصر <embed>
- تگ <embed> در HTML 4 شناخته شده نیست. صفحه شما دارای اعتبار نمی باشد.
- اگر مرورگر فرمت فایل شما را پشتیبانی نکند، audio پخش نخواهد شد.
- اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.
پخش صدا با استفاده از عنصر <object>
هدف از تگ <object> درج کردن عناصر multimedia در صفحات HTML است.
قطعه کد زیر یک فایل MP3 را در صفحه وب درج می کند.
مشکلات استفاده از عنصر <object>
- اگر مرورگر فرمت فایل شما را پشتیبانی نکند، audio پخش نخواهد شد.
- اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.
پخش صدا با استفاده از عنصر <audio>
عنصر <audio> یک عنصر در HTML 5 می باشد، برای HTML 4 شناخته شده نیست اما در همه مرورگرهای جدید کار می کند.
مثال (پخش صدا در HTML)
<source src="/horse.mp3" type="audio/mpeg" />
<source src="/horse.ogg" type="audio/ogg" />
Your browser does not support this audio
</audio>
مشکلات استفاده از عنصر <audio>
- فقط فرمت های Ogg و MP3 و Wav و Vorbis قابل پشتیبانی است و باید یک ویدئو را مانند مثال بالا به چند فرمت تبدیل کنید.
- عنصر <audio> در مرورگرهای قدیمی شناخته شده نیست.
- عنصر <audio> در HTML4 و XHTML معتبر نیست.
| مرورگر | Ogg Vorbis | MP3 | WAV |
|---|---|---|---|
| FireFox 4 beta | ✓ | ✓ | ✓ |
|
Safari 4 |
✓ | ✓ | -- |
|
Chrome 3 (beta) |
✓ | ✓ | -- |
|
Opera 10 (beta) |
✓ | -- | ✓ |
| IE 8 | -- | -- | -- |
بهترین راه حل برای پخش صدا در HTML
مثال (پخش صدا در HTML)
<source src="/horse.mp3" type="audio/mpeg" />
<source src="/horse.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="/horse.mp3" />
</audio>
مثال بالا از دو فرمت متفاوت استفاده می کند. در HTML 5 عنصر <audio> سعی می کند تا ویدئو را با یکی از فرمت های ogg یا mp3 پخش کند. اگر این روش جواب نداد، بخش ویدئو به عنصر <embed> واگذار می گردد. اگر این روش هم جواب نداد، خطایی نمایش داده می شود.
مشکلات
- باید ویدئو ها را به فرمت های زیادی تبدیل کنید.
- عنصر <audio> در HTML 4 و XHTML وجود ندارد.
- عنصر <embed> در HTML 4 و XHTML اعتبار ندارد.
نکته: استفاده از اعلان <DOCTYPE html!> در بالای صفحه، مشکل اعتبار را حل می کند.
Yahoo Media Player - آسانترین راه برای اضافه کردن Audio به سایت
ساده ترین راه برای اضافه کردن Audio به صفحات وب چیست؟ بطور قطع Yahoo Media Player که به صورت رایگان است، می تواند یک گزینه باشد.
Yahoo Media Player فایل های mp3 و دیگر فرمت ها را پخش می کند. شما می توانید آنرا به صفحه (یا بلاگ) خودتان با یک خط دستور اضافه کنید و به راحتی صفحه HTML خود را به یک پخش کننده موزیک حرفه ای تبدیل کنید.
مثال (پخش صدا در HTML)
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
استفاده از player یاهو رایگان است. برای استفاده از آن کد JavaScript زیر را در پایین صفحه وب خود درج کنید.
سپس به سادگی توسط تگ <a> به فایل های mp3 خود در HTML اتصال برقرار نمایید. کد JavaScript به صورت اتوماتیک برای هر آهنگ یک دکمه پخش ایجاد می کند. گرچه، هنگامی که روی دکمه کلیک می کنید، یک پخش کننده بزرگ پایین صفحه ظاهر می شود.
<a href="/song1.mp3">Play Song 1</a>
<a href="/song2.mp3">Play Song 2</a>
...
...
...
توجه داشته باشید که پخش کننده همیشه در پایین صفحه وجود دارد. کافیست روی آن کلیک کنید تا ظاهر شود.
استفاده از تگ <a>
اگر صفحه وبی دارای یک لینک به فایل مدیایی باشد، اکثر مرورگرها از یک "برنامه کمکی" برای پخش فایل استفاده می کنند.
قطعه کد زیر یک لینک به یک فایل MP3 را نشان می دهد. اگر کاربری روی این لیک کلیک کند، مرورگر از یک "برنامه کمکی" برای پخش استفاده می کند.
یک نکته در مورد صداهای Inline
هنگامی که صدایی در یک صفحه وب قرار داده می شود و یا بخشی از آن می شود، صدای Inline می نامند.
اگر قصد دارید از صداهای Inline در وب خود استفاده کنید، بدانید که بعضی از مردم صداهای Inline را مزاحم می دانند. همچنین توجه داشته باشید که بعضی کاربران گزینه صداهای Inline را در مرورگرشان خاموش کرده اند.
بهترین پیشنهاد ما به شما این است که تنها زمانی از صداهای Inline در صفحات وب استفاده کنید که کاربر انتظار دارد صدایی را بشنود. مثالی در این مورد صفحه ای است که کاربر با کلیک روی لینکی می خواهد مورد ضبط شده ای را بشنود.
تگ های Multimedia در HTML
| Tag | Description |
|---|---|
| <embed> | یک عنصر multimedia در صفحات HTML درج می کند |
| <object> | یک عنصر multimedia در صفحات HTML درج می کند |
| <param> |
یک پارامتر برای object تعریف می کند |
| <audio> |
صدا را در صفحات HTML درج می کند (تگ جدید در HTML5) |
| <video> |
یک ویدئو یا فیلم در صفحات HTML درج می کند. (تگ جدید در HTML5) |
| <source> |
در عناصر <video> و <audio> برای مشخص کردن منبع صدا یا فیلم استفاده می شود. (تگ جدید در HTML5) |
| <track> |
در عناصر <video> و <audio> برای مشخص کردن متن trackها استفاده می شود. (تگ جدید در HTML5) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 51651
دیدگاه‌ها
سلام، فرض کنید چند تا تگ audio داریم.
مشکلی که پیش میاد ، اینکه اگر شما یک موزیک را پلی کنید، اگر بعدی هم پلی کنید، هردو در حال پخش میمونه
سلام
<audio id="audio" controls>
</audio>
<audio id="audio1" controls>
</audio>
در ادامه با استفاده از کد Jquery زیر می توانید براحتی تمام تگ های Audio که در حالت اجرا هستند را متوقف کنید:
$("audio").each (function(){
$(this).bind("play",stopAll);
});
function stopAll(e){
var currentElementI d=$(e.currentTa rget).attr("id" );
$("audio").each (function(){
var $this=$(this);
var elementId=$this .attr("id");
if(elementId!=c urrentElementId ){
$this[0].pause( );
}
});
}
اموزشتون خیلی خوبه
ممنون
سلام
خیلی ممنون بایت آموزش ها