Мова HTML
Вставка звуку та відео

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

Синтаксис:

Декілька

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

autoplay- звук починає грати одразу після завантаження сторінки;

controls- додає панель управління до аудіофайлу;

loop- повторює відтворення звуку з початку його завершення;

preload- використовується для завантаження файлу разом із завантаженням веб-сторінки;

src

Закриває тег обов'язковий.
Всередині контейнера

Приклад:

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

Синтаксис:

Декілька елементів можна зв'язати із різними файлами. Браузер буде використовувати перший формат, що запускається.

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

autoplay- Відео починає відтворюватися автоматично після завантаження сторінки;

controls- Додає панель управління до відеоролика;

loop- повторює відтворення відео з початку після завершення;

height- задає висоту області відтворення відеоролика;

width- задає ширину області відтворення відеоролика;

preload- використовується для завантаження відео разом із завантаженням веб-сторінки;

src- Вказує шлях до файлу, що відтворюється.

Закриває тег обов'язковий.
Всередині контейнера

Приклад:

Ми вже говорили про використання HTML5 і чому це актуально сьогодні. Тепер зупинимося докладніше на питанні "Як вставити аудіо на сайт за допомогою HTML5".

Додати музику на сайт можна за допомогою тега audio. Приклад найпростішої реалізації цього тега:

Але знову ж таки, як і у випадку з відео, не все так просто. Не всі браузери підтримують необхідні аудіо-кодеки. Погляньмо на таблицю:

Як видно з таблиці, найбільш "універсальним" є формат wav. Проте його не підтримує Internet Explorer. Тому рекомендується конвертувати аудіофайл у кілька форматів та використовувати кілька аудіо-кодеків. Наступний приклад ілюструє один із способів додавання аудіо HTML на веб-сторінку:

Зовнішній вигляд аудіоплеєра залежатиме від браузера, ось, наприклад, вид аудіоплеєра у браузері Firefox:

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

До основних атрибутів тега audioвідносяться:

• src- шлях до аудіофайлу (може задаватися окремо за допомогою вкладеного тега source);
• controls- відображається панель керування аудіо (play, pause, volume тощо);
• autoplay- відтворює аудіофайл одразу після завантаження веб-сторінки;
• loop- циклічне відтворення;

Вкладений тег sourceможе мати такі атрибути:

• src- шлях до аудіофайлу;
• type- тип аудіо-джерела;
• media- тип пристрою, на якому програватиметься аудіофайл (all - на всіх пристроях, tv - телевізор і т.д.);

Проте найчастіше інтернет-контент унікальний, наприклад, включає не тільки музику, а й коментарі виконавців, інтерв'ю, всілякі байки про створення і т.п.

Для завантаження потокового контенту з Мережі створено дуже багато утиліт - одні з них - універсальні, інші - «заточені» під певні послуги. Якісь програми отримують доступ до вихідних аудіо- та відеофайлів і просто побайтово зчитують їх з Інтернету, а деякі вміють докачувати, завантажувати файли в кілька потоків, працювати з групами файлів і т. п. Опис потоку може представляти собою xml-файл у форматі ASX (для Windows Media Player) або зберігатися у файлах формату RealAudio (розширення.ra і.rm - для аудіо, .rv - для відео) та ін. спеціальним - rtsp, mms, rtp, і навіть у вигляді пірингових технологій, застосовуваних, наприклад, у такому популярному сервісі інтернет-телебачення, як SopCast. Звичайно, щоб відтворити ці формати, необхідний відповідний клієнт - скажімо, плеєри Windows Media Player, медіапрогравач VLC та ін. Останній, до речі, вміє не лише програвати потоковий контент, а й зберігати його на локальних дисках. Саме ним ми й скористаємося, адже більшість ресурсів йому цілком по зубах.

Отже, щоб записати, зокрема, програму онлайнового радіо або подкаст, необхідно спочатку отримати посилання потоковий контент, а потім ввести її в VLC-плеєрі. Якщо на веб-сайті для відтворення аудіо використовується Windows Media Player, дістатися до посилання буде просто. Потрібно клацнути правою кнопкою на вбудованому на сторінці сайту програвачі та вибрати пункт "Властивості". У полі «Розміщення» слід знайти адресу та скопіювати її в буфер обміну. Якщо ж на сайті застосовується Flash-плеєр або програвач, розроблений на базі HTML5, то, цілком імовірно, доведеться поритися у вихідному коді сторінки або звернутися до спеціальних утиліт для видирання посилань.

Наступна дія – конвертування потокового аудіо. Мабуть, не скажеш, що ця операція у VLC – проста і очевидна. Швидше, навпаки, вона громіздка та плутана. Командою меню Медіа Відкрити URL потоковий контент можна записати у файл. За замовчуванням VLC налаштований на відтворення посилання, і, щоб зберегти його у файл, потрібно в діалоговому вікні змінити режим на «Конвертувати». Діалог при цьому зміниться - в новому вікні вказується кінцевий файл і вибирається профіль (тобто формат, в якому буде збережено запис). Після натискання кнопки «Почати» плеєр починає копіювати потокове аудіо у файл. Робить він це зовсім непомітно і в принципі здатний писати як завгодно довго - цей процес доведеться контролювати самостійно. Слід враховувати, що під час зупинення та продовження процесу конвертування результуючий файл обнулюється. Отже потрібно перейменовувати раніше збережені файли.

Цілком очевидно, що кожного разу повторювати таку операцію дуже клопітко. Особливо якщо потрібно писати різні потоки у різний час. Плеєр VLC надає найпростіший засіб завантаження за розкладом, який отримав назву «Конфігуратор VLC». У ньому вказується, як і куди писати (ці параметри налаштовують як і, як описувалося вище) і як довго. Скажімо, якщо потрібно щодня записувати програму інтернет-радіо, варто задати в діалозі опції «Повтор» та «Інтервал між повторами». Тепер програма після запуску самостійно конвертуватиме потоковий контент.

До речі, VLC допоможе і при перетворенні потоків, наприклад файлів формату ASF на більш звичний і розуміється кишеньковими плеєрами MP3. Цю операцію можна робити або вручну, щоразу конвертуючи локальний файл, або автоматично за допомогою нескладного скрипта на Powershell, що входить, як відомо, до складу Windows 7 і доступного в попередніх версіях даної операційної системи. Скрипту передаються кілька параметрів - шлях до файлів, маска файлів та опціонально-результуюча папка, куди складуються файли (якщо вона не вказана, файли записуються у вихідний каталог). Усередині циклу викликається програма VLC, якою пересилаються параметри: що кодувати, куди записувати і параметри кодування. Після закінчення кодування VLC вивантажується з оперативної пам'яті. Переконатися в цьому дозволяє остання конструкція, що очікує, доки процес вивантажиться з пам'яті. Ввести такий скрипт можна в будь-якому текстовому редакторі – блокноті або спеціальному «візуальному» редакторі Powershell ISE. Якщо зберегти його у файлі, наприклад convert.ps1, він запускається конструкцією виду:

. convert.ps1 c:  files  music *.asf.

На завершення варто відзначити ще кілька особливостей скрипту. В операційній системі Windows автоматично не прописуються шляхи до програм, так що в скрипті необхідно також вказати шлях до vlc.exe: в 64-розрядній версії - C:  'Program Files (x86) '  VideoLAN  VLC  (зверніть увагу в лапки) і в 32-розрядній - C:  'Program Files'  VideoLAN  VLC  . Крім того, вам слід переконатися, що до запуску скрипта ви залишили програму VLC, інакше метод waitforexit () буде працювати нескінченно довго (через те, що програма, що викликається в скрипті, завершить роботу, але її копія залишиться). Звичайно, у скрипті можна обробляти ще й ідентифікатори процесів, але така можливість лише ускладнить його. Щоб вирішити цю проблему, слід просто додати на початок скрипту примусове завершення всіх запущених VLC: ps vlc* | % ($_.kill()). Ще одна особливість пов'язана із системою безпеки Windows 7, яка вимагає, щоб усі скрипти були підписані. Обійти таке обмеження допоможе команда Set-ExecutionPolicy RemoteSigned, запускати яку потрібно Powershell від імені адміністратора.

Скрипт convert.ps1 на Powershell для конвертування потокового контенту в MP3

param ($inputpath, $wildcard, $outputpath = $inputpath)

ls -path $inputpath  $wildcard | % (

write-host $outputfile

vlc -i dummy $_.fullname ¨:sout=#transcode (acodec=mp3,ab=128,channels=2):standard (access=file,mux=asf,dst=$outputfile)¨ vlc://quit

Вилучення аудіо з FLV-роликів

Інший приклад спільного застосування VLC та Powershell – це вилучення аудіо з Flash-відеороликів формату FLV. Подібні відеокліпи зберігаються на спеціалізованих порталах, таких, наприклад, як відомий YouTube. Звичайно, Google та інші власники відеохостингів всіляко перешкоджають завантаженню контенту, але завжди знайдуться способи обійти захист і отримати ролик, що сподобався.

Втім, завдання, що обговорюється тут, полягає в наступному: як із завантаженого будь-яким відомим способом FLV-файлу витягти аудіо, щоб, наприклад, слухати його в кишеньковому плеєрі. Подібна операція цілком під силу VLC, причому і в GUI, і з командного рядка. До речі, в першому випадку необхідно зробити практично той же набір дій, що й раніше: вибрати в меню команду «Медіа - Конвертувати / Зберегти», вказати вихідний і результуючий файли, а також параметри конвертування, тобто відповідний кодек.

Для ручного перетворення за допомогою Powershell потрібно, як і минулого разу, сконструювати невеликий скрипт (назвемо його flv2mp.ps1), якому пересилаються імена вихідної та результуючої папок (за замовчуванням – така сама, як і вихідна). Вся його хитрість полягає в переданих параметрах: оскільки відео не потрібно, варто використовувати параметр dummy, в блоці standard визначити параметри файлу, а щоб скрипт не докучав спливаючих вікон, просто блокувати їх опцією –dummy-quiet –sout.

param ($inputpath, $outputpath = $inputpath)

ls -path $inputpath  *.flv | % (

$outputfile = join-path $outputpath ($_.name.replace ($_.extension, ‘.mp3’))

write-host $outputfile

vlc $filename -I dummy --dummy-quiet --sout ¨#transcode (acodec=mp3,vcodec=dummy):standard (access=file,mux=raw,dst='$outputfile')¨ vlc://quit

ps vlc | % ($_.waitforexit())

Навіщо потрібна музика на сайті?

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

Як вставити аудіо (музику) на сайт у html?

Нам часто ставлять таке питання, музика на сайті є актуальним та креативним елементом, а способів її відтворення багато та їх не так складно впровадити. Почнемо з того, що кожен користувач Глобальної Мережі використовує якийсь браузер для виходу в Інтернет, а загальної та універсальної технології відтворення звукових та музичних файлів немає, кожен браузер працює за своїми власними алгоритмами і вони дещо відрізняються один від одного, тому при відтворенні музики з За допомогою впровадження в HTML код сторінки можуть виникати проблеми. Але як Ви знаєте, всі проблеми можна вирішити!

Вставити музику на сайт HTML, JavaScript, jQuery, AJAX способи:

Створення аудіо програвача музики на сайті або програвачі

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

Або як альтернативний спосіб можна створити плеєр з флеш-технології (Flash), такий плеєр буде виглядати ефектніше. Правда вийде дорожче та важче для сайту (підвищить час завантаження сторінок сайту).

2 спосіб.

Встановлення музики на сайт за допомогою HTML

Використовуючи можливості HTML та браузера, можна вставити на сайт плеєр або фонову музику. Технологія така ж проста: створюється HTML5 код з тегом "audio" і цей код прописується в сайт, а коли користувач заходить на сайт він бачить мінімізований плеєр, відвідувач натискає кнопку плей або починає грати фонова музика. Вигляд плеєра залежатиме від браузера, з якого зайшов відвідувач, але функціональність залишиться стандартною: кнопки Play, Stop, Next, Prev, Volume. Виглядає плеєр із HTML кодом ось так:

Сам код для вставки виглядає так:

Як ви могли помітити команда "controls autoplay" включає автопрогравання музики, як тільки відвідувач заходить на сайт.

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

Формати звукових файлів для відтворення музики на сайті можуть бути: WAV, AU, MIDI, MP3, OGG (розширення). Музичні файли завантажуються на сайт, або використовуються посилання на ті сайти, де міститься звуковий файл, головне, щоб він знаходився у відкритому доступі.

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

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

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

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

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

Перший спосіб- це тег 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

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

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

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

Аудіо в HTML 5