کاربر گرامی ، تمام فایلهای سایتپ رایگان میباشند اما جهت دانلود نیاز به عضویت دارید . عضویت  |  راهنما

Search...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...SearchSearch...Search

آموزش افزودن صدا با تگ audio در html5 | افزودن آهنگ mp3 موسیقی به وب سایت

این مورد را ارزیابی کنید
(0 رای‌ها)
منتشرشده در آموزش html

پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش اعلام نوع داکیومنت در HTML5 معرفی DOCTYPE

شروع آموزش : 

اجازه بدهید در شروع یک سرگرمی داشته باشیم. قرار است در مورد مرورگری صحبت کنیم که فایل صدا را در حالت طبیعی خود پشتیبانی می کند، درست همانطور که برچسب <img> از 0111 پشتیبانی می شود. HTML5 قرار است به صدای پالگین (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 در کنار هم خوب است.

با استفاده از :

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>

به تصویر زیر توجه فرمائید تا توضیحات بیشتر در سطر های دیگر ارائه شود 

ویژگی 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>

 

پایان این بخش از آموزش

برای مطالعه بیشتر مباحث دیگر  این آموزش بر روی لینک روبرو کلیک نمائید : فهرست آموزش رایگان html5 سطح ساده تا پیشرفته

خواندن 196 دفعه
محسن محمد

با نگاهی گذرا به وب سایت های مشابه سایتپ , پی به تفاوت محصولات منتشر شده در سایتپ و این سایت ها خواهید برد .

ما در سایت ایران تمام سعیمان بر این است که محصولاتی را در اختیار شما عزیزان قرار دهیم که صحت کارکرد آنها بررسی شده و قابل استفاده باشند . در اکثر وب سایت های مشابه سایت ایران این دو مورد نادیده گرفته شده و کاربر پس از دانلود محصول مورد نظرش امکان استفاده از آنرا ندارد. به عبارت ساده تر وب سایت های مذکور فقط منتشر کننده هستند و از درستی آنها اطمینان حاصل نمیکنند .

ما این اطمینان خاطر را به شما میدهیم که محصولاتی را از سایت ایران دانلود خواهید کرد که قبل از انتشار , بطور کامل بررسی شده اند و قابل استفاده میباشند.

www.mohssen.ir | این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

مقالات آموزشی سایتپ

Search...SearchSearch...SearchSearch...SearchSearch...Search
  • مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr
    مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr سلام به جوملا دوستان عزیز، در حال پیاده سازی یک وب سایت چند زبانه بودیم که با یک مشکل عجیب مواجه شدیم. ما زمانی که سیستم جوملا را چند زبانه کردیم ، برای ایجاد خصوصیت های LTR و RTL که بتوانیم به هر کدام از زبان ها یک STYLE مختلف…
    آموزش جوملا خواندن 106 بار
  • آموزش اجرا و نمایش متن در بوم نقاشی html5
    آموزش اجرا و نمایش متن در بوم نقاشی html5 پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش طراحی تصویر در بوم نقاشی html5 شروع آموزش : کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle ،Strokestyle ،Font ،TextBaseline و در انتها filltext و stroketext. <div> <canvas id="c6" width="600" height="200" style="border:solid 1px…
    آموزش html خواندن 35 بار
  • رفع خطای Notice و Strict Standards و Deprecated در جوملا
    رفع خطای Notice و Strict Standards و Deprecated در جوملا در این مقاله آموزش جوملا با سه نوع خطای php از جمله Notice و Strict Standards و Deprecated که در جوملا ممکن است با آن روبرو شوید به صورت کامل آشنا خواهید شد و روش حل این موارد را می آموزید. روزانه تعداد زیادی از سوالات کاربران مربوط به خطاهای…
    آموزش جوملا خواندن 54 بار
  • گواهینامه امنیت SSL چیست و هر آنچه درباره پروتکل https باید بدانید
    گواهینامه امنیت SSL چیست و هر آنچه درباره پروتکل https باید بدانید مقاله پیش رو یک مقاله جامع و کاربردی است که نیاز شما را درباره امنیت خدمات دهنده و خدمات گیرنده , یا به عبارت ساده تر , امنیت اطلاعات ردو بدل شده بین کاربر و سرور وب سایت برطرف میکند . این مقاله از وب سایت های مختلف جمع آوری…
    آموزش هاست خواندن 130 بار
نمایش تمام مقالات سایتپ - کلیک نمائید

آموزش رایگان html5