نحوه اضافه کردن صدا به صفحه وب HTML5

HTML5 آسان است برای اضافه کردن صدا و موسیقی به صفحات وب خود را با عنصر. در حقیقت، سخت ترین کاری که باید انجام دهید، ایجاد منابع متعددی است که لازم است مطمئن شوید که فایل های صوتی خود را در وسیع ترین مرورگرها پخش می کنید.

مزیت استفاده از HTML5 این است که شما می توانید با استفاده از چند تگ صدا را جاسازی کنید. مرورگرها پس از آن، صدا را بازی می کنند درست مثل اینکه وقتی یک عنصر IMG را استفاده می کنید یک تصویر را نشان می دهد.

نحوه اضافه کردن صدا به صفحه وب HTML5

شما یک ویرایشگر HTML ، یک فایل صوتی (ترجیحا در فرمت MP3) و یک مبدل فایل صوتی خواهید داشت.

  1. اول، شما نیاز به یک فایل صوتی دارید بهتر است فایل را به عنوان MP3 ( .mp3 ) ضبط کنید زیرا این کیفیت با کیفیت بالا است و اکثر مرورگرها (Android 2.3+، Chrome 6+، IE 9+، iOS 3+ و Safari 5+) پشتیبانی می شوند.
  2. فایل خود را به فرمت Vorbis ( .ogg ) تبدیل کنید تا در فایرفاکس 3.6+ و اپرا 10.5+ پشتیبانی کنید. شما می توانید یک مبدل مانند یک موجود در Vorbis.com استفاده کنید. شما همچنین می توانید MP3 خود را به یک فرمت فایل WAV ( .wav ) تبدیل کنید تا پشتیبانی فایرفاکس و اپرا را دریافت کنید. من توصیه میکنم فایل خود را در تمام سه نوع قرار دهید، فقط برای امنیت، اما بیشتر شما نیاز دارید MP3 و یک نوع دیگر است.
  3. همه فایل های صوتی را به سرور وب خود آپلود کنید و توجه داشته باشید که دایرکتوری که آنها را در آن ذخیره کرده اید. ایده خوبی است که آنها را در یک زیر شاخه فقط برای فایل های صوتی قرار دهید، مانند بسیاری از طراحان، تصاویر را در یک دایرکتوری عکس ذخیره می کنند.
  4. عنصر AUDIO را به فایل HTML خود اضافه کنید، جایی که می خواهید کنترل های فایل صدا نمایش داده شود. <کنترل های صوتی>
  5. عناصر SOURCE را برای هر فایل صوتی که داخل عنصر AUDIO آپلود می کنید قرار دهید:
  1. هر HTML داخل عنصر AUDIO به عنوان یک جایگزین برای مرورگرهایی که از عنصر AUDIO پشتیبانی نمی کنند استفاده می شود. بنابراین برخی از HTML ها را اضافه کنید. ساده ترین راه این است که HTML را اضافه کنید تا فایل را دانلود کنید، اما می توانید از روش HTML Embedding 4.01 برای پخش صدا نیز استفاده کنید. در اینجا یک جایگزین ساده است:

    مرورگر شما پخش صوتی را پشتیبانی نمی کند، فایل را دانلود کنید:

    1. MP3
    2. Vorbis ، WAV
  2. آخرین چیزی که باید انجام دهید این است که عنصر AUDIO خود را نزدیک کنید:
  3. هنگامی که شما انجام می شود، HTML شما باید مانند این باشد: <کنترل های صوتی>
    1. مرورگر شما پخش صوتی را پشتیبانی نمی کند، فایل را دانلود کنید:

    2. MP3
    3. Vorbis
    4. WAV

نکات اضافی

  1. حتما از doctype HTML5 () استفاده کنید تا HTML شما معتبر باشد
  2. ویژگی های موجود برای عنصر را مرور کنید تا ببینید چه گزینه های دیگری می توانید به عنصر خود اضافه کنید.
  3. توجه داشته باشید که ما HTML را تنظیم می کنیم تا کنترل ها را به طور پیش فرض وارد کرده و پخش خودکار را خاموش کنیم. البته می توانید آن را تغییر دهید، اما به یاد داشته باشید که بسیاری از افراد صدا را به طور خودکار شروع می کنند / نمی توانند کنترل کنند که در بهترین حالت آزار دهنده باشند و اغلب وقتی این اتفاق می افتد صفحه را ترک کنند.