وب مستران گرامی ، حالتون چطوره؟ امیدوارم سلامت باشید. و از اموزشهای ما تا به اینجا رضایت داشته باشین.اجازه بدهید در شروع یک سرگرمی داشته باشیم. قرار است در مورد مرورگری صحبت کنیم که فایل صدا را در حالت طبیعی خود پشتیبانی می کند، درست همانطور که برچسب<img> از ۱۹۹۴ پشتیبانی می شود. HTML 5 قرار است به صدای پلاگین(plug-in) مانند مدیاپلیر، سیلورلایت، اپل کویک تایم، و Adobe Flash بد نام خاتمه دهد.
اگر در بالا کنترل اجرا کننده ی صدا نمی بینید، احتمالا مرورگر شما برچسب صدا را پشتیبانی نمی کند.
در بالا یک گالری از پخش کننده های صدا را، توسط مرورگرهای مهم می بینید. همانطور که می بینید اندازه کنترل پخش کننده ها با یکدیگر متفاوت هستند. پخش کننده ی IE9 در مقایسه با پخش کننده ی safari بسیار بزرگ می باشد. این مسئله برای طراح وب می تواند یک مشکل بزرگ باشد.
اگر برای ویندوز از safari استفاده می کنید، اما بدون Quick Time، برنامه ی Safari شما قرار نیست از برچسب مدیا (هم در حالت صوتی و هم در حالت تصویری) پشتیبانی کند. تصور می کنم که برنامه ی Safari برای اجرای فایل های مدیا، به کدک Quick Time اتکا دارد.
چگونه؟
برای اینکه صفحه ی وب شما موسیقی اجرا کند، کد html شما می تواند به سادگی زیر باشد:
<audio src=”vincent.mp3″ controls></audio>
متاسفانه محبوب ترین فرمت صدا MPEG3 (mp3) یک استاندارد باز نیست، بلکه یک اختلال عمومی است، و این بدین معنا که مرورگرها برای رمزگشایی آن باید مقداری پول پرداخت کنند و این ممکن است از لحاظ اقتصادی برای شرکت ها و سازمان های کوچکتر عملی نباشد. همانطور که در جدول زیر مشاهده می کنند تنها سران بزرگ ثروت کافی برای رمزگشایی MP3 را دارند. Opera و firefox تنها فرمت vorbis (ogg) را پشتیبانی می کنند که یک استاندارد باز می باشد.
از طرف دیگر Vorbis توسط Safari و IE9 پشتیبانی نمی شود، در حالیکه همیشه داشتن ogg و MP3 در کنار هم خوب است.
Browser
.mp3
.wav
.ogg
Mozzila Firefox 3.6
✓
✓
Opera 10.63
✓
✓
Google Chrome 8.0
✓
✓
✓
Apple Safari 5.0.3 (with QuickTime)
✓
✓
Microsoft IE 9 Beta
✓
✓
با استفاده از
and Audio() Support Tester” href=”http://www.happyworm.com/jquery/jplayer/HTML5.Audio.Support/”>HTML5 <audio>and Audio() Support Tester
امتحان کنید که مرورگر شما تا چه حد صدا را پشتیبانی می کند.
آنچه که می توانید انجام دهید در زیر ارائه شده است:
<audio controls>
<source src=”vincent.mp3″ type=”audio/mpeg” />
<source src=”vincent.ogg” type=”audio/ogg” />
</audio>
ارائه کردن یا نکردن نوع MIME (type=”audio/mpeg”)برای مرورگر انتخابی می باشد. مدرنترین مرورگرها به اندازه ی کافی هوشمند هستند تا نوع محتوا را از طریق خود آن مشخص کنند. به هرحال کمک کننده بودن برای مرور گر همیشه خوب است، چرا که باعث می شود مرورگر شما سریعتر و بهتر کار کند.
ویژگی های <audio>
ویژگی
مقدار
Description
controls
*Boolean attribute
شما برای ظاهر شدن اجرا کننده ی داخلی به این ویژگی احتیاج دارید. در غیر اینصورت باید از DOM برای کنترل عنصر صدا برای اجرای موسیقی خود هستید.
autoplay
*Boolean attribute
اگر این ویژگی وجود داشته باشد، مرورگر فقط آواز یا صحبتتان را بدون پرسیدن اجازه از ویزیتور شما پخش خواهد کرد.
loop
*Boolean attribute
موسیقی خود را تکرار کنید.
src
url
URL فایل صدای شما
preload
none | metadata | auto
این ویژگی قبلا با نام autobuffer معروف بود و یک ویژگی Boolean مانند کنترل ها بود.
متادیتا- فقط متادیتای مربوط به فایل صدا را بافر می کند.
Auto- فایل صدا را قبل از اجرا بافر می کند.
ویژگی Boolean ویژگی می باشد که یا در برچسب نمایش داده می شود یا نه. ویژگی Boolean فقط نام خود را دارد و دارای مقدار نیست. شما می توانید آن را از این طریق نیز به کار ببرید، هر مقداری که شما به ویژگی Boolean اختصاص دادید، فقط یک معنا دارد –TRUE.
<audio src=”vincent.mp3″ controls=”true” loop=”true” autoplay=”true”></audio>
این ترکیب کاملا غیرضروری است
<audio src=”vincent.mp3″ controls loop autoplay></audio>
و این آن چیزی است که شما لازم دارید.
HTML 5 در واقع تکاملی از وب می باشد، نه انقلابی که فقط گذشته را نابود می کند. به هرحال اجازه دهید کمی به جلوتر برویم.
برای پشتیبانی مرورگری که اصلا نمی داند <audio> چیست، از قبیل IE8 وپایین تر، با استفاده از برچسب <object> باید اجازه دهیم در همان روزهای قدیمی خود باقی بمانند.
<audio controls>
<source src=”vincent.mp3″ type=”audio/mpeg” />
<source src=”vincent.ogg” type=”audio/ogg” />
<object type=”application/x-shockwave-flash” data=”media/OriginalMusicPlayer.swf” width=”225″ height=”86″>
<param name=”movie” value=”media/OriginalMusicPlayer.swf” />
<param name=”FlashVars” value=”mediaPath=vincent.mp3″ />
</object>
</audio>
من در مثال بالا از یک اجرا کننده ی flash mp3 از PremiumBeat.com استفاده می کنم.
اگر مرورگر شما از HTML5 پشتیبانی نمی کند اما شما فلش پلاگین را دارید، احتمالا چیزی را از دست نداده اید.
اگر HTML5 نه مرورگر و نه فلش را پشتیبانی می کند، ممکن است به یوزر اجازه بدهید فایل صدا را دانلود کند و در گرفتن یک اجرا کننده برای اجرای آن، برای آن ها آرزوی خوش شانسی کنید.
<audio controls>
<source src=”vincent.mp3″ type=”audio/mpeg” />
<source src=”vincent.ogg” type=”audio/ogg” />
<object type=”application/x-shockwave-flash” data=”media/OriginalMusicPlayer.swf” width=”225″ height=”86″>
<param name=”movie” value=”media/OriginalMusicPlayer.swf” />
<param name=”FlashVars” value=”mediaPath=vincent.mp3″ />
</object>
<a href=”vincent.mp3″>Download this lovely song and wish you all the best!</a>
</audio>
به جای استفاده از مرورگر اجرای صدای استاندارد، با استفاده از خلاقیت خود می توانید برنامه ی خود را بنویسید.
<audio id=”player” src=”vincent.mp3″></audio>
<div>
<button onclick=”document.getElementById(‘player’).play()”>Play</button>
<button onclick=”document.getElementById(‘player’).pause()”>Pause</button>
<button onclick=”document.getElementById(‘player’).volume += 0.1″>Vol+ </button>
<button onclick=”document.getElementById(‘player’).volume -= 0.1″>Vol- </button>
</div>
