نحوه درج آهنگ صوتی در html. ما صدا را از اینترنت در فایل ها ذخیره می کنیم. اضافه کردن زیرنویس و عنوان

این سوال اغلب مطرح می شود، بنابراین تصمیم گرفتم مقاله جداگانه ای را در درس ها به آن اختصاص دهم. از آنجایی که HTML یک فناوری جهانی برای پخش صدا برای همه مرورگرها ندارد، برای حل این مشکل پیشنهاد می کنم فایل پخش کننده صوتی را همانطور که در اکثر سایت ها انجام می شود دانلود کنید. ما همه چیز را مرحله به مرحله انجام می دهیم:

1. در میزبانی که سایت شما در آن قرار دارد، در پوشه اصلی (پوشه ای که فایل ایندکس در آن قرار دارد)، پوشه صوتی را ایجاد کنید. در آینده تمام فایل های صوتی را در آن قرار خواهید داد.

3. حالا انتخاب کنید فایل های لازم، در فرمت mp3 بهتر است. یک پوشه صوتی در ریشه سایت ایجاد کنید و آنها را آپلود کنید.

4. تنها چیزی که باقی می ماند این است که کد اتصال پخش کننده را وارد کنید. برای هر سایتی مناسب است در جای مناسب فقط باید مسیر فایل پخش کننده و فایل صوتی را به ترتیب جایگزین کلمات your_domain و audio_file name نشان دهید:

و همه چیز آماده است! همچنین می توانید به نمونه کار نگاه کنید.

نحوه تنظیم موسیقی پس زمینه در html من استفاده می کنم قابلیت های HTMLو مرورگر، همچنین می توانید موسیقی پس زمینه را در صفحه قرار دهید. شما به یک فایل صوتی با فرمت مورد نظر نیاز دارید: WAV، AU، MIDI یا MP3. می توانید از هر فایلی با پسوند مشخص شده به عنوان مثال استفاده کنید.

اولین راه تگ embed است. عنصر embed برای بارگذاری و نمایش اشیایی (به عنوان مثال، فایل های ویدئویی، فیلم های فلش، برخی فایل های صوتی و غیره) استفاده می شود که مرورگر در ابتدا آنها را درک نمی کند.

نحو بسیار ساده است:

برچسب بسته شدن لازم نیست.

حال بیایید به مثالی از یک رکورد با ویژگی ها و در زیر با رمزگشایی آنها نگاه کنیم:

تعبیه ویژگی های برچسب برای پخش صدا در html
عرض - عرض پانل به پیکسل (یا درصد)
ارتفاع - ارتفاع پانل بر حسب پیکسل (یا درصد)
تراز - موقعیت پانل نسبت به متن، مقادیر ممکن چپ، راست، مرکز است
پنهان - به شما امکان می دهد پانل را پنهان کنید، مقادیر مشخصه: true - پانل پنهان است، نادرست است - پانل قابل مشاهده است (مقدار پیش فرض)
autostart - true - پخش کننده به طور خودکار هنگام بارگیری صفحه شروع می شود، false - منتظر می ماند تا دکمه پخش فشرده شود
حلقه - حلقه، درست - آهنگ به صورت دایره ای پخش می شود و اگر نادرست باشد - فقط یک بار

راه دوم بسیار قدیمی، اما کاربردی) ملودی را به همان پوشه (دایرکتوری) که فایل شما در آن قرار دارد اضافه کنید و در قسمت بدنه کد زیر را بنویسید:

در نتیجه پس از بارگذاری صفحه، ملودی که در تگ bgsound مشخص کرده اید به صدا در می آید. حالا بیایید نگاهی بهتر به ویژگی های تگ بیندازیم:

src - مسیر فایل صوتی شما
حلقه - چند بار برای تکرار ملودی (اگر -1، سپس بی پایان تکرار می شود)
تعادل - مقدار تعادل استریو (از -10000 تا 10000)
حجم - حجم پخش ملودی، که در آن 0 حداکثر، و -10000 حداقل است.

با این حال، هیچ راهی برای کنترل پخش کننده به هیچ وجه وجود نخواهد داشت - هر بار که صفحه به روز می شود، آهنگ دوباره پخش می شود.

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

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

ویژگی های تگ صوتی

پخش خودکار - فایل بلافاصله پس از بارگیری صفحه پخش می شود (شبیه به موسیقی پس زمینه bgsound)
کنترل ها - صفحه کنترل پخش کننده را در مرورگر نمایش دهید
حلقه - فایل را پس از پایان دوباره پخش می کند
پیش بارگذاری - فایل صوتی همراه با بارگذاری صفحه بارگذاری می شود
src - مسیر فایل صوتی (mp3 یا ogg)

کد مثال با برچسب صوتی

برچسب صوتی

صدا در HTML 5

تگ صوتی توسط مرورگر شما پشتیبانی نمی شود.
دانلود موزیک.

شرح

تنظیمات صوتی را در یک صفحه وب اضافه می کند، پخش می کند و مدیریت می کند. مسیر فایل از طریق ویژگی src یا یک برچسب فرعی مشخص می شود. می توانید متنی را در داخل ظرف بنویسید که در مرورگرهایی که با این تگ کار نمی کنند نمایش داده می شود.

لیست کدک های پشتیبانی شده توسط مرورگرها محدود است و در جدول آورده شده است. 1.

جدول 1. کدک ها و مرورگرها

کدک	اینترنت اکسپلورر	کروم	اپرا	سافاری	فایرفاکس
ogg/vorbis
موج
mp3
A.A.C.

برای پخش جهانی در مرورگرهای مشخص شده، صدا با استفاده از کدک های مختلف کدگذاری می شود و فایل ها به طور همزمان از طریق برچسب اضافه می شوند.

ویژگی های نحوی صدا بلافاصله پس از بارگیری صفحه شروع به پخش می کند. یک کنترل پنل به فایل صوتی اضافه می کند. صدا را از ابتدا پس از پایان آن تکرار می کند. برای دانلود یک فایل همراه با بارگذاری یک صفحه وب استفاده می شود. مسیر فایل در حال پخش را مشخص می کند. برچسب بسته شدن

ضروری.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

سمعی

الکساندر کلیمنکوف - چهارده

تگ صوتی توسط مرورگر شما پشتیبانی نمی شود. دانلود موزیک.

نتیجه مثال در مرورگر اپرادر شکل نشان داده شده است. 1.

برنج. 1. یک فایل صوتی را پخش کنید

مرورگرها

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

زبان HTML
درج صدا و تصویر

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

نحو:

مقداری

ویژگی های برچسب:

پخش خودکار - صدا بلافاصله پس از بارگیری صفحه شروع به پخش می کند.

کنترل ها - یک کنترل پنل به فایل صوتی اضافه می کند.

حلقه - پخش صدا را از ابتدا پس از پایان آن تکرار می کند.

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

src

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

مثال:

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

نحو:

چندین عنصر را می توان با آنها مرتبط کرد فایل های مختلف. مرورگر از اولین فرمتی که راه اندازی می کند استفاده می کند.

ویژگی های برچسب:

پخش خودکار - پس از بارگیری صفحه، ویدیو به طور خودکار شروع به پخش می کند.

کنترل ها - یک کنترل پنل به ویدیو اضافه می کند.

حلقه - پخش ویدیو را از ابتدا پس از پایان آن تکرار می کند.

ارتفاع - ارتفاع منطقه را برای پخش ویدیو تنظیم می کند.

عرض - عرض منطقه را برای پخش ویدیو تنظیم می کند.

پیش بارگذاری - برای بارگذاری ویدیو همراه با بارگذاری صفحه وب استفاده می شود.

src - مسیر فایل در حال پخش را مشخص می کند.

تگ بسته شدن الزامی است.
همچنین می توانید متن توضیحی را در داخل ظرف بنویسید که در مرورگرهایی که با این تگ کار نمی کنند نمایش داده می شود.
ویژگی کنترل ها کنترل های ویدئویی مانند پخش، مکث و صدا را اضافه می کند.
ایده خوبی است که همیشه ویژگی های عرض و ارتفاع را در نظر بگیرید.
اگر ارتفاع و عرض تنظیم نشده باشد، مرورگر اندازه ویدیو را نمی داند. اثر این خواهد بود که صفحه در حین بارگیری ویدیو بازخوانی (یا سوسو زدن) می شود.

مثال:

برچسب ویدیو توسط مرورگر شما پشتیبانی نمی شود.

نتیجه مثال در مرورگر:

سلام خدمت خوانندگان عزیز وبلاگ جای تعجب نیست که سایت های رسانه ای اخیراً به طور فزاینده ای محبوب شده اند. در چنین سایت هایی بسیار جالب است، به عنوان مثال می توانید چند ویدیو تماشا کنید یا به موسیقی عالی گوش دهید. اما این بار به موسیقی گوش می دهیم، یعنی یاد می گیریم که چگونه فایل های صوتی را با استفاده از HTML5 وارد وب سایت خود کنیم.

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

پشتیبانی از مرورگر نسخه ی نمایشی

همه مرورگرهایی که از این برچسب پشتیبانی می کنند عبارتند از IE9+، Chrome، Opera، Safari و Firefox. اما یک نکته ظریف دیگر وجود دارد: همه مرورگرها از همه فرمت های صوتی پشتیبانی نمی کنند.

به عنوان مثال: IE9+ فقط از فایل های mp3 پشتیبانی می کند، اما از wav و ogg پشتیبانی نمی کند.

کروم بعد از نسخه 6 تقریباً از همه فرمت ها پشتیبانی می کند.

Opera 10+ از mp3 پشتیبانی نمی کند، صادقانه بگویم، به نظر من این عیب بسیار بزرگ آن است، مانند فرمت محبوبو از آن پشتیبانی نمی کند. اما با wav و ogg عالی کار می کند.

با مرورگر فایرفاکسهمان داستان اپرا. برای این او یک منهای بزرگ و چاق دارد.

سافاری از همه فرمت های صوتی به جز ogg پشتیبانی می کند.

افزودن فایل صوتی به سایت

برای افزودن یک فایل صوتی به سایت خود، باید یک لینک مستقیم به فایل بین تگ ها قرار دهید. پیوند با استفاده از برچسب نشان داده شده است. این چیزی است که کد تمام شده به نظر می رسد:

مرورگر شما صدا را پشتیبانی نمی کند

همانطور که می بینید، 3 فایل به طور همزمان در اینجا اضافه شده است، بنابراین اگر برخی از مرورگرها mp3 را پشتیبانی نمی کند، به طور خودکار فرمت مورد نظر خود را پخش می کند و غیره.

و اگر مرورگر به هیچ وجه از تگ پشتیبانی نمی کند، این پیغام "مرورگر شما صدا را پشتیبانی نمی کند" ظاهر می شود.

دوستان اینم یه نمونه کار ما یک پخش کننده ساده توسط خود مرورگر نصب می شود.

نسخه ی نمایشی

دوستان عزیز همین. اگر سوال یا مشکلی دارید در نظرات بپرسید. به زودی میبینمت.

چرا به موسیقی در سایت نیاز دارید؟

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

چگونه می توان صدا (موسیقی) را در وب سایت در html قرار داد؟

اغلب از ما این سوال پرسیده می شود؛ موسیقی در یک وب سایت یک عنصر مرتبط و خلاقانه است و راه های زیادی برای پخش آن وجود دارد و اجرای آنها چندان دشوار نیست. بیایید با این واقعیت شروع کنیم که هر کاربر شبکه جهانیاز هر مرورگری برای دسترسی به اینترنت استفاده می کند، اما فناوری کلی و جهانی برای پخش فایل های صوتی و موسیقی وجود ندارد، هر مرورگر بر اساس الگوریتم های خود کار می کند و تا حدودی با یکدیگر متفاوت هستند، بنابراین ممکن است هنگام پخش موسیقی با تعبیه آن مشکلاتی پیش بیاید. در کد HTML صفحه . اما همانطور که می دانید، همه مشکلات قابل حل است!

درج موسیقی در وب سایت HTML، جاوا اسکریپت، جی کوئری، روش های AJAX: روش 1. ایجاد یک پخش کننده موسیقی صوتی در وب سایت یا پخش کننده

فناوری ساده است، یک فایل پخش کننده ایجاد می شود تا سایت یا سرور را بارگیری نکند؛ ما فناوری مورد استفاده خود را انتخاب می کنیم: JavaScript، jQuery، AJAX. بر اساس فناوری انتخاب شده، یک اسکریپت برای سایت خود ایجاد کرده و آن را در سایت قرار می دهیم. اسکریپت بسته به آنچه شما نیاز دارید ایجاد می شود: پخش خودکار موسیقی پس زمینه در سایت یا پخش کننده ای که توسط بازدید کننده کنترل می شود. در مرحله بعد یک پوشه در ریشه سایت برای موسیقی ایجاد کنید و فایل های صوتی را در آن آپلود کنید.

یا به عنوان یک روش جایگزین، می توانید با استفاده از فناوری Flash یک پخش کننده ایجاد کنید؛ چنین پخش کننده ای چشمگیرتر به نظر می رسد. حقیقت برای سایت گرانتر و سخت تر خواهد بود (زمان بارگذاری صفحات سایت را افزایش می دهد).

روش 2.

نصب موسیقی در وب سایت با استفاده از HTML

با استفاده از قابلیت های HTML و مرورگر می توانید یک پخش کننده یا موسیقی پس زمینه را در سایت قرار دهید. این فناوری به همین سادگی است: کد HTML5 با تگ "audio" ایجاد می‌شود و این کد در سایت نوشته می‌شود و وقتی کاربر از سایت بازدید می‌کند، یک پخش‌کننده کوچک‌شده را می‌بیند، بازدیدکننده دکمه پخش یا موسیقی پس‌زمینه را به‌طور خودکار فشار می‌دهد. شروع به بازی می کند ظاهر پخش کننده به مرورگری که بازدیدکننده از آن آمده است بستگی دارد، اما عملکرد استاندارد باقی می ماند: دکمه های Play، Stop، Next، Prev، Volume. پخش کننده با کد HTML به شکل زیر است:

کد جاسازی به صورت زیر است:

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

یک نسخه جایگزین کد HTML تگ "bgsound" است، این تگ به هیچ وجه از پخش کننده بصری استفاده نمی کند؛ زمانی که از سایت بازدید می کنید، موسیقی در سایت شروع به پخش می کند، اما می توانید صدا، مکث و غیره را تنظیم کنید. کاربر قادر نخواهد بود. تنظیم حجم پخش فایل صوتی در خود کد پیکربندی شده است.

فرمت های فایل صوتی برای پخش موسیقی در سایت می تواند به صورت: WAV، AU، MIDI، MP3، OGG (پسوندها) باشد. فایل‌های موسیقی در سایت آپلود می‌شوند یا پیوندها به آن سایت‌هایی استفاده می‌شوند که در آن فایل صوتی، نکته اصلی این است که در حوزه عمومی است.