Вставка аудіо. Вставити музику в відео онлайн Як вставити аудіо в html

Дане питання зустрічається дуже часто, тому я вирішив ще в уроках присвятити йому окрему статтю. Оскільки для програвання аудіо універсальної технології для всіх браузерів у HTML немає, то для вирішення цієї проблеми пропоную завантажити файл аудіо програвача, як і робиться на більшості сайтів. Робимо все по кроках:

1. На хостингу, де і розташовується Ваш сайт, в кореневому каталозі (папці, де індексний файл), соpдайте папку audio. У неї в подальшому будете поміщати все аудіо файли.

3. Тепер виберіть потрібні файли, краще в форматі mp3. створіть папку audio в корені сайту та закачайте їх.

4. Залишається тільки вставити код підключення плеєра. Він підійде для будь-якого сайту У потрібному місці слід тільки вказати шлях до файлу плеєра і аудіо файлу, відповідно замінивши слова ваш_домен і названіе_аудіо_файла:

І все готово! Можете подивитися і роботу прикладу.

Як встановити фонову музику в html

Використовую можливості HTML і браузера, можна також вставити на сторінку фонову музику. Вам знадобиться аудіо файл потрібного формату: WAV, AU, MIDI або MP3. Можете як приклад використовувати будь-який файл з вказаним розширенням.

перший спосіб - це тег embed. Елемент embed використовується для завантаження і відображення об'єктів (наприклад, відеофайлів, флеш-роликів, деяких звукових файлів і т.д.), які початково браузер не розуміє.

Синтаксис досить-таки простий:

Закриває тег не потрібно.

Тепер дивимося приклад записи з атрибутами, а нижче з їх розшифровкою:

Атрибути тега embed для програвання аудіо в html
width - ширина панелі в пікселях (або відсотках)
height - висота панелі в пікселях (або відсотках)
align - розташування панелі щодо тексту, можливі значення left, right, center
hidden - дозволяє приховати панель, значення атрибута: true - панель прихована, false - панель видима (значення за замовчуванням)
autostart - значення true - програвач стартує автоматично при завантаженні сторінки, false - чекає натискання на кнопку відтворення
loop - цикл, true - трек програватися по колу, а при значенні false - тільки один раз

Другий спосіб. Дуже старий, але теж практичний) Додайте мелодію в ту ж папку (директорію), де лежить Ваш файл, а в body пропишіть наступний код:

В результаті після завантаження сторінки буде звучати зазначена Вами в тезі bgsound мелодія. Тепер розглянемо краще атрибути тега :

src - шлях до Вашого аудіофайлу
loop - скільки разів мелодію повторити (якщо -1, то повторюється нескінченно)
balance - значення стереобаланса (від -10000 до 10000)
volume - гучність програвання мелодії, де 0 максимум, а -10000 мінімум.

Однак не буде можливості будь-яким чином контролювати програвач - при кожному оновленні сторінки трек буде програватися заново.

Після опису методу вставки фонової музики хочу Вас від цього відрадити, так як більшість користувачів в момент відвідування різних сайтів вже, як правило, слухають музику. Тому попутне музичний супровід може його тільки змусити закрити вкладку з сайтом.

Вставка аудіо та музики в HTML5 - тег audio

audio - парний тег, який визначає фоновий звук, музику або інший аудіо потік на сайті.

Атрибути тега audio

autoplay- файл програється відразу при завантаженні сторінки (аналогічно фонової музики bgsound)
controls - відобразити панель управління плеєра в браузері
loop - програє файл заново після його закінчення
preload - завантаження аудіо файлу відбудеться разом із завантаженням сторінки
src - шлях до аудіо файлу (mp3 або ogg)

Приклад коду з тегом audio

Аудіо в HTML 5

Музика на сайті - це скоріше виняток, ніж норма. Вставляючи музику на сайт, потрібно розуміти, що деяких користувачів вона може і зовсім відштовхнути. У цій статті ми розглянемо кілька варіантів вставки музики на сайт, а також розглянемо як зробити фонову музику.

Як вставити фонову музику на сайт

Вставка фонової музики на сайт найнебезпечніший варіант в плані втрати відвідувачів. Тому що фонова музика мало того, що не можна ніяк вимкнути, так до того ж і гучність її ніяк не регулюється (все залежить від поточної гучності на комп'ютері). Так що треба сто разів подумати, перш ніж вставляти фонову музику.

Є два способи для вставки музики в html

Варіант 1. Через html тег

Синтаксис для вставки фонової музики

У тега є кілька атрибутів:

• loop \u003d "значення" - кількість повторень музики (якщо -1, то повторюється нескінченно)
• balance \u003d "значення" - стереобаланс (від -10000 до 10000)
• volume \u003d "значення" - гучність (0 максимум, -10000 мінімум)

Музика буде грати автоматично при завантаженні сторінки.

наприклад

Варіант 2. Через тег

Синтаксис для вставки об'єкта з музикою

У тега можливе використання наступних атрибутів:

• width \u003d "значення" - ширина (в пікселях або відсотках)
• height \u003d "значення" - висота (в пікселях або відсотках)
• align \u003d "значення" - вирівнювання (left - зліва, right - праворуч, center - по центру)
• hidden \u003d "значення" - видимість панелі (true - приховати, false - показувати), за замовчуванням панель видно
• autostart \u003d "значення" - програвати музику при завантаженні (true - так, false - ні)
• loop \u003d "значення" - значення true - програвати по колу, false - один раз

наприклад

У кожного браузера штатний програвач буде виглядати по різному, тому розглядати кожен з них окремо ми не будемо.

У html5 можна використовувати тег

Сенс використання тега

синтаксис тег

Наступні атрибути можна використовувати:

• autoplay \u003d "значення" - включити музику відразу при завантаженні сторінки
• controls \u003d "значення" - відображати панель управління плеєра в браузері
• loop \u003d "значення" - відповідає за циклічність
• preload \u003d "значення" - завантажувати музику відразу із завантаженням сторінки

Розглянуті варіанти на мій погляд не є ідеальним рішенням, оскільки всі базуються на штатних програвачах. У кожного браузера буде свій штатний програвач за замовчуванням, а в якихось він взагалі може не працювати. Тому краще всього скачати плеєр до себе на сайт і вже з нього завантажувати музику. У такого плеєра буде функції зупинки, настройки гучності і т.п. - весь необхідний набір для простого користувача.

Теги, атрибути і значення

• - визначає фоновий HTML звук, музику на сайті. Розташовується в секторі .
• - визначає url звукового файлу в форматі Wav або Mp3.
• loop \u003d "" - визначає кількість програвань.
• volume \u003d "- 1000" - регулює гучність звуку. В даному випадку позначена величина буде вирахувана з поточного рівня гучності, встановленого на комп'ютері користувача.
• balance \u003d "0" - регулює баланс звучання.

Увага! Описаний вище метод впровадження фонового звуку в HTML-Сторінка прийнятний тільки для браузерів Internet Explorer і Opera ранніх випусків. Для сучасних браузерів він не підходить ⇒ музика і звук на сторінці сайту не відтворюються! Тому дивимося нижче, Де докладно розглянуто кросбраузерності спосіб вставки звуку і музики на сайт для всіх браузерів (Opera, Firefox, Internet Explorer, Chrome).

Звук в HTML або музика на сайті для всіх браузерів

Фоновий HTML звук для Opera, Firefox, Internet Explorer, Chrome:

Розміщується код в секторі

.

Aтрібути і значення

• autostart \u003d "" - визначать чи музика програватися автоматично при відкритті інтернет-станиці чи ні. Можливі значення: true - так чи false - ні.
• loop \u003d "" - визначає чи будуть повторюватися програвання. Можливі значення: true - так чи false - ні.
• hidden \u003d "" - визначає чи буде прихована панель управління плеєра чи ні. Можливі значення: true - так чи false - ні. Якщо не буде, то вказуються розміри панелі: width \u003d "" height \u003d "".

З овет напрошується сам собою! використовуйте фоновий HTML звук або музику на своєму сайті тільки в разі, коли це дійсно виправдано!

опис

Додає, відтворює і управляє настройками аудіозаписи на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений тег. всередині контейнера

Список підтримуваних браузерами кодеків обмежений і приведений в табл. 1.

Табл. 1. Кодеки і браузери

кодек	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg / vorbis
wav
mp3
AAC

Для універсального відтворення в зазначених браузерах аудіо кодують за допомогою різних кодеків і додають файли одночасно через тег .

синтаксис

атрибути

Звук починає грати відразу після завантаження сторінки. Додає панель управління до аудіофайлу. Повторює відтворення звуку з початку після його завершення. Використовується для завантаження файлу разом із завантаженням веб-сторінки. Вказує шлях до воспроизводимому файлу.

закриває тег

Обов'язковий.

HTML5 IE 8 IE 9 + Cr Op Sa Fx

Олександр Клименко - Чотирнадцять

Результат прикладу в браузері Opera показаний на рис. 1.

Мал. 1. Відтворення аудіофайлу

браузери

Управління відтворенням аудіо різниться між браузерами за своїм виглядом, але основні елементи збігаються. Це кнопка відтворення / паузи, довжина треку, що минув і сумарний час звучання, а також рівень гучності.

Вітаю, Друзі! У цьому відео ми продовжимо розмову про вставці об'єктів в HTML-документ.

Після того, як скрипт підключений, ми повинні дописати ще один скрипт, щоб підключити саму оболонку плеєра і вказати параметри плеєра:

Цей скрипт також необхідно прописати до закриває тега . Варто відзначити, що тут ми вказали ширину, гучність, які будуть автоматично встановлені при відтворенні і інші параметри, які ми можемо змінювати на свій розсуд.

Після того, як скрипти підключені, нам залишилося додати музичну композицію на сторінку, щоб вона була доступна для прослуховування. Для цього ми скористаємося тегами абзацу, всередині яких ми можемо залишити інформацію, яка буде відображена, якщо плеєр не з'явиться. Підключимо ще один скрипт із зазначенням ID плеєра і шляхом до файлу з музикою. Виглядати це буде приблизно так:

музика

Тут також варто звернути увагу на ID, який використаний для відображення плеєра. Слід врахувати, що якщо ми хочемо додати більше однієї композиції на сторінку нам необхідно прописувати новий ID для кожного файлу. Наприклад, щоб додати ще один файл ми трохи змінимо ID, приблизно так:

музика

Ну, ось в принципі і все. Тепер ми знаємо, як додати аудіо в HTML-документ. Звичайно, існують і інші способи. Але я вважаю в нашому випадку цього варіанту цілком достатньо.

Відео урок: Як вставити аудіо в HTML-документ?

HTML-довідник і інші матеріали можна і потрібно завантажити!