Как вставить музыкальный файл в html. Вставить музыку в видео онлайн. Как установить фоновую музыку в html
При работе с различными видеороликами ряд пользователей может столкнуться с необходимостью вставить музыку в имеющееся у них видео. Это может быть добавление звуковой дорожки к снятому пользователем видеоролику, или полная замена аудиотрека в каком-нибудь клипе, при этом пользователь не знает, как это сделать и какими инструментами воспользоваться. В этом материале я постараюсь помочь таким пользователям и расскажу, как вставить музыку в видео онлайн, какие онлайновые сервисы (и программы) для этого существуют и как с ними работать.
Как вставить музыку в видео онлайн – особенности работы со звуком
Прежде чем начать пояснять, как , следует сначала определиться с тем, что именно необходимо пользователю – добавление своей музыки к уже имеющейся на видео (с вариантами) или полная замена первоначального аудио трека своим . Среди онлайн-сервисов и программ, которые я опишу ниже, представлены и те и другие возможности, при этом пользователь должен определиться с тем, что именно ему нужно, и от этого отталкиваться в своих дальнейших действиях.
Ниже я представлю список из нескольких онлайн-сервисов, позволяющих вставить аудио в видео онлайн. Их функционал довольно прост и понятен, и не вызовет особых проблем даже у неопытного пользователя.
VideoToolbox - добавить аудио трек в видео
Простой и добротный (хоть и англоязычный) бесплатный ресурс VideoToolbox, позволяющий вставить музыку в видео онлайн, и поменять аудиодорожку видеоролика на свою. Чтобы воспользоваться возможностями данного сервиса сделайте следующее:
Stupeflix - заменить музыку в видео файле онлайн
Другим ресурсом, который поможет нам вставить музыку в видеоролик онлайн, является ресурс Stupeflix. Чтобы воспользоваться его возможностями выполните следующее:
LIFE.FILM вставить песню в клип без скачивания
Русскоязычный сервис, позволяющий вложить музыку в видео онлайн. Для работы с ним выполните следующее:
Программы для вставки музыки в видео
Вопрос о том, как вмонтировать музыку в видео онлайн, был бы не полон без упоминания о программах, позволяющим как добавить музыку к видео и имеющемуся там аудиоряд, так и способными заменить оригинальную аудиодорожку на вашу. Среди программ, позволяющим это сделать я бы отметил, к примеру, «ВидеоМастер» и «Machete».
ВидеоМастер
«Видеомастер» - это удобная программа чтобы добавить музыку в видео. Она представляет собой универсальный конвертер видеоформатов, с возможностью обрезки и соединения аудио, наложения различных эффектов, кадрирования видео и так далее. Чтобы воспользоваться возможностями данного продукта для вставки видео сделайте следующее:
Machete
Вторая программа, которую я хочу отметить, это Machete – условно бесплатный (требующий последующей платной активации) продукт, позволяющий вставить музыку в видео. Чтобы воспользоваться её функционалом выполните следующее:
Заключение
В этом материале мной был описаны сервисы, позволяющие вставить музыку в видео онлайн, также мною были поданы программы для добавления песен в видео. Если вы хотите быстро соединить аудио и видео онлайн, то упомянутые мной ресурсы и программы эффективно вам в этом помогут, стоит лишь воспользоваться описанными алгоритмами действий для реализации указанной задачи.
Некоторые файлообменники имеют аудиоплееры для mp3-файлов
Типичные представители сетевой фауны:
www.box.net/shared/zf1uk007vy
2. Учимся "ловить рыбу"
Поняв принцип, можно забыть о подобных сервисах, которые часто закрываются, удаляют файлы, меняют условия и т.д.
Код для вставки музыки в блог состоит из двух главных компонентов — флеш-плеер (файл *.swf в виде http://../player.swf
) и аудиофайл (в виде http://../song.mp3
) — остальное HTML, то бишь буковки.
Выглядит примерно так:
Я залил сюда флеш-плеер и получил:
http://сайт/wp-content/uploads/2009/06/webplayer.swf
затем загрузил трек:
http://сайт/wp-content/uploads/2009/06/08-caravan.mp3
Вставил эти ссылки в код выше:
Полный код безобразия:
Если в этот код вставите свой mp3 файл вида http://…./song.mp3
("прямая ссылка"), он будет играть вашу музыку:).
Если назначить height=16 , получим:
Чтоб исключить сбой кодировок, избегайте кириллицы и пробелов в названиях треков.
Переименовывайте файлы перед закачкой их на хостинг.
Примеры:
моя песня.mp3
(нельзя в плеер, будет глюк)
moya_pesnya.mp3
(можно юзать)
— навигация по трекам
1. Загружаем на хостинг аудиофайлы и составляем такой список треков:
2. Копируем образец кода плейлиста ОТСЮДА
(всё, что под чертой)
3. Открываем на компе программу Блокнот, вставляем туда этот код.
4. Вместо примера списка треков вставляем свой заготовленный список треков.
5. Жмем «Файл-Сохранить как». Называем файл playlist.xml и сохраняем.
(назвать можно как угодно, главное — на латинице и .xml )
6. Файл playlist.xml грузим на хостинг, ссылку на него ставим в код плеера там, где в плеере с одним треком стоит ссылка на mp3-файл: http://site/song.mp3
7. Вставляем полученный код плеера в блог.
Код копируем, ставим ссылку на свой mp3 вместо ВАШ_ФАЙЛ
и слушаем:
Cтавим ссылку на свой mp3 вместо ВАШ_ФАЙЛ (в двух местах!):
Мы уже говорили об использовании HTML5 и почему это актуально на сегодняшний день. Теперь остановимся более подробно на вопросе "Как вставить аудио на сайт с помощью HTML5".
Добавить музыку на сайт можно с помощью тега audio . Пример простейшей реализации этого тега:
Но опять же, как и в случае с видео, не всё так просто. Не все браузеры поддерживают нужные аудио-кодеки. Взглянем на таблицу:
Браузер | Google Chrome | Mozilla Firefox | Safari | Opera | Internet Explorer |
---|---|---|---|---|---|
mp3 | Есть | Нет | Есть | Нет | Есть |
wav | Есть | Есть | Есть | Есть | Нет |
AAC | Есть | Нет | Есть | Нет | Есть |
ogg/vorbis | Есть | Есть | Нет | Есть | Нет |
Как видно из таблицы, наиболее "универсальным" является формат.wav. Но, тем не менее, его не поддерживает Internet Explorer. Поэтому, рекомендуется конвертировать аудиофайл в несколько форматов и использовать несколько аудио-кодеков. Следующий пример иллюстрирует один из способов добавления аудио HTML на веб-страницу:
Внешний вид аудиоплеера будет зависеть от браузера, вот, например, вид аудиоплеера в браузере Firefox:
Атрибуты тега AUDIO
К основным атрибутам тега audio относятся:
- src - путь к аудиофайлу (может задаваться отдельно с помощью вложенного тега source );
- controls - отображается панель управления аудио (play, pause, volume и т.д.);
- autoplay - воспроизводит аудиофайл сразу после загрузки веб-страницы;
- loop - циклическое воспроизведение;
Вложенный тег source может иметь следующие атрибуты:
- src - путь к аудиофайлу;
- type - тип аудио-источника;
- media - тип устройства, на котором будет проигрываться аудиофайл (all - на всех устройствах, tv - телевизор и т.д.);
HTML5-аудио
предоставляет улучшенные возможности работы с аудио контентом. До недавнего времени единственным способом добавления звуковых файлов на веб-страницы было интегрирование фонового звука с помощью тега
Благодаря добавлению в спецификацию HTML5 нового элемента
Как добавить HTML5-аудио на веб-страницу
1. Элемент
Поддержка браузерами
IE: 9.0
Firefox: 3.5 базовая поддержка, 15.0 — полная
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44
HTML5-элемент
Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.
Рис. 1. Внешний вид аудио плеера в разных браузерахВ настоящий момент не существует аудио формата, который бы работал во всех браузерах, поэтому для обеспечения доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента
Атрибут | |
---|---|
autoplay | Автоматическое воспроизведение аудио файла сразу же после загрузки страницы. |
controls | Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (начинать и останавливать воспроизведение, переходить в другое место записи, регулировать громкость). |
loop | Циклическое воспроизведение аудио файла. |
muted | Выключает звук при воспроизведении аудио файла. |
preload | Атрибут, отвечающий за предварительную загрузку аудио контента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает аудио файл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть аудио файла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки аудио файла. |
src | Содержит абсолютный или относительный URL-адрес аудио файла. |
2. Аудио кодеки
Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:
MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.
AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.
Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.
3. Альтернативные медиа-ресурсы
Элемент
4. Добавление субтитров и заголовков
Элемент
Атрибут | Описание, принимаемое значение |
---|---|
default | Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент |
kind | Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для слепых пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео. |
label | Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию. |
src | Содержит абсолютный или относительный URL-адрес данных текстовой дорожки. |
srclang | Язык воспроизводимой дорожки. |
5. Стилизованный пример аудио плеера
С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.
Думаю, пришло время получить ответ на вопрос, как вставить флэш-ролики, видео и аудио файлы в HTML документ.
Покажу несколько способов, как вставить видео ролик или аудио файл
.
Способ 1.
Видео и аудио файл можно вставить в HTML-документ с помощью тега
Закрывающий тег не требуется.
Возможно, когда вы проверите пример, ваш браузер может потребовать подключения к специальному плагину:
Вид плеера зависит от подключенного плагина и атрибутов тега
Например, вот Google Chrome:
Или в Internet Explorer:
Атрибуты EMBED
height - высота плеера (в пикселях). Пример:
Swf" height="100">
width - ширина плеера (в пикселях). Пример:
Swf" width="200">
src - адрес флэш-ролика, видео или аудио файла. Пример:
type - указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) содержимого элемента.
pluginspage - адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.
autostart - если параметр стоит «0», то это значит, что после загрузки веб-страницы, плеер будет остановлен. Если указать параметр «1 », тогда после загрузки веб-страницы, плеер будет автоматически воспроизведен (работает в браузере IE). Пример:
title - вывод всплывающей подсказки при наведении курсора мышки на аудио или видео плеер. (Работает в браузере IE).
Пример: