Вставка звука в html страницу. Вставить музыку в видео онлайн. Атрибуты тега VIDEO
Некоторые файлообменники имеют аудиоплееры для 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 вместо ВАШ_ФАЙЛ (в двух местах!):
Как наложить музыку на видео? Воспользуйтесь Видеоредактором от Movavi и этой простой инструкцией.
Установите Видеоредактор Movavi
Скачайте редактор видео на русском языке с нашего сайта. По завершении загрузки запустите установочный файл программы и следуйте инструкциям по установке.
Добавьте в программу видео и аудио
Запустите нашу программу для наложения музыки на видео и выберите Новый проект . Нажмите кнопку Добавить файлы и выберите видео, к которому вы хотите добавить звуковую дорожку, и аудиофайл, который будет использоваться в качестве саундтрека. Загруженные вами файлы будут автоматически добавлены на соответствующие дорожки монтажного стола: видео – на Видеотрек , аудио – на Аудиотрек .
Отрегулируйте длительность звука
Когда вы будете соединять музыку и видео, вы можете столкнуться с тем, что у добавленных видео- и аудиофайла разная длительность. Здесь возможны два варианта.
- Аудиофайл длиннее, чем видео . Кликните на аудио, переместите бегунок в конец видеофайла на монтажном столе и нажмите на иконку с Ножницами . Затем щелкните по ненужному звуковому фрагменту и нажмите Delete на клавиатуре, чтобы удалить фрагмент.
- Видео длиннее, чем музыка . Добавьте на звуковую дорожку несколько копий выбранного аудиофайла (щелкните по файлу правой кнопкой мыши и выберите Копировать , а затем Вставить ). Обрежьте лишнее.
Помните, что в Видеоредакторе Movavi вы можете вставить в видео сразу несколько звуковых дорожек. Например, одну дорожку можно использовать для фоновой музыки, а другую – для звуковых спецэффектов.
Сохраните результат
Наложение звука на видео оказалось довольно простым делом. Теперь осталось записать все в один видеофайл. Нажмите кнопку Сохранить и выберите одну из опций экспорта из вкладок в левой части окна. Программа предложит сохранить видео в папку Movavi Library. При желании вы можете поменять папку. Укажите видеоформат или модель мобильного устройства и нажмите кнопку Старт . Когда процесс сохранения завершится, вы найдете готовый видеофайл в выбранной папке. Теперь вы знаете, как наложить звук на видео!
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 тег
Синтаксис для вставки фоновой музыки
У тега
- loop="значение" - количество повторений музыки (если -1, то повторяется бесконечно)
- balance="значение" - стереобаланс (от -10000 до 10000)
- volume="значение" - громкость (0 максимум, -10000 минимум)
Музыка будет играть автоматически при загрузке страницы.
Например
Вариант 2. Через тег
Синтаксис для вставки объекта с музыкойУ тега
- width="значение" - ширина (в пикселях или процентах)
- height="значение" - высота (в пикселях или процентах)
- align="значение" - выравнивание (left - слева, right - справа, center - по центру)
- hidden="значение" - видимость панели (true - скрыть, false - показывать), по умолчанию панель видна
- autostart="значение" - проигрывать музыку при загрузке (true - да, false - нет)
- loop="значение" - значение true - проигрывать по кругу, false - один раз
Например
У каждого браузера штатный проигрыватель будет выглядеть по разному, поэтому рассматривать каждый из них в отдельности мы не будем.
В html5 можно использовать тег
Смысл использования тега
Синтаксис тегСледующие атрибуты можно использовать:
- autoplay="значение" - включить музыку сразу при загрузке страницы
- controls="значение" - отображать панель управления плеера в браузере
- loop="значение" - отвечает за цикличность
- preload="значение" - загружать музыку сразу с загрузкой страницы
Рассмотренные варианты на мой взгляд не являются идеальными решениями, поскольку все базируются на штатных проигрывателях. У каждого браузера будет свой штатный проигрыватель по умолчанию, а в каких-то он вообще может не работать. Поэтому лучше всего скачать плеер к себе на сайт и уже с него загружать музыку. У такого плеера будет функции остановки, настройки громкости и т.п. - весь необходимый набор для простого пользователя.
