Результат в Google Chrome:
Способ 2.
Изображения, аудио, видео, Java приложения, ActiveX, PDF и Flash можно вставить в HTML-документ с помощью тега
.
Закрывающий тег обязателен.
Атрибуты OBJECT
data
–
указывает путь к файлу объекта;type
–
тип обекта (не является обязательным). Например:
type="application/x-shockwave-flash" или type="image/png"
и т.д.;
width
– ширина;height
–
высота
Также можно прописать текст между открывающими тегами
. Написанный текст будет отображаться в том случае, если браузер не поддерживает элемент object
.
Пример:
Тег OBJECT
Ваш браузер не поддерживает тег object
Результат данного примера в окне браузера, если он не поддерживает тег OBJECT
:
Способ 3.
Вставить аудио на веб-страницу можно и тегом
:
Атрибуты тега AUDIO
autoplay
- аудио воспроизводится автоматически сразу после загрузки веб-страницы;
controls
- панель управления к аудио плееру;
height
- высота аудио плеера;
loop
- повтор воспроизведение аудио сначала после его завершения;
src
- путь к аудио файлу
Пример:
ТЕГ AUDIO
Результат:
Вставить видеоролик на веб-страницу можно и тегом
:
Атрибуты тега VIDEO
autoplay
- видео воспроизводится автоматически сразу после загрузки веб-страницы;controls
- панель управления к видео плееру;height
- высота видео плеера;width
- ширина видео плеера;loop
- повтор воспроизведение видео сначала после его завершения;src
- путь к видео файлу;poster
- адрес картинки. Картинка будет отображаться пользователю, пока видео не доступно или не воспроизводится.
Описание
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src
или вложенный тег . Внутри контейнера
можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.
Табл. 1. Кодеки и браузеры
Кодек
Internet Explorer
Chrome
Opera
Safari
Firefox
ogg/vorbis
wav
mp3
AAC
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег
.
Синтаксис
Атрибуты
Звук начинает играть сразу после загрузки страницы.
Добавляет панель управления к аудиофайлу.
Повторяет воспроизведение звука с начала после его завершения.
Используется для загрузки файла вместе с загрузкой веб-страницы.
Указывает путь к воспроизводимому файлу.
Закрывающий тег
Обязателен.
HTML5
IE 8
IE 9+
Cr
Op
Sa
Fx
audio
Александр Клименков - Четырнадцать
Тег audio не поддерживается вашим браузером.
Скачайте музыку.
Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Воспроизведение аудиофайла
Браузеры
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
muzicons.com — не закачивает файлы с компа, вставка аудио по прямым ссылкам на файл или через встроенный поисковик, выглядит так: www.jetune.ru — в полной мере работает только для юзеров России. Чтоб выложить трек, надо на сайте найти (без регистрации) или закачать своего исполнителя (с регистрацией), кликнуть на конкретный трек и получить код плеера: prostopleer.com — загружай или ищи на сайте музыку и получай код плеера:
Некоторые файлообменники имеют аудиоплееры для mp3-файлов
Типичные представители сетевой фауны:
divshare.com Регистрируемся. Жмем «Upload new file», загружаем трек. Клик на «dashboard» (вверху), появится файл. На него правой кнопкой мыши, выбираем «share», копируем «Embed Playlist» и вставляем: box.net после закачки файла (по клику на shared
) выдаст ссылку на страницу для прослушивания и скачивания файла наподобие: 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
("прямая ссылка"), он будет играть вашу музыку:).
width
и height
определят размеры плеера.
Если назначить 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 вместо ВАШ_ФАЙЛ (в двух местах!):
Музыка на сайте - это скорее редкость, чем норма. Вставляя музыку на сайт, нужно понимать, что некоторых пользователей она может и вовсе оттолкнуть. В этой статье мы рассмотрим несколько вариантов вставки музыки на сайт, а также рассмотрим как сделать фоновую музыку.
Как вставить фоновую музыку на сайт
Вставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.
Есть два способа для вставки музыки в 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 можно использовать тег
Смысл использования тега вызывает сомнения, поскольку до сих пор у старых браузеров отсутствует поддержка html5 .
Синтаксис тег
Браузер не поддерживает audio
Следующие атрибуты можно использовать:
autoplay="значение"
- включить музыку сразу при загрузке страницы
controls="значение"
- отображать панель управления плеера в браузере
loop="значение"
- отвечает за цикличность
preload="значение"
- загружать музыку сразу с загрузкой страницы
Рассмотренные варианты на мой взгляд не являются идеальными решениями, поскольку все базируются на штатных проигрывателях. У каждого браузера будет свой штатный проигрыватель по умолчанию, а в каких-то он вообще может не работать. Поэтому лучше всего скачать плеер к себе на сайт и уже с него загружать музыку. У такого плеера будет функции остановки, настройки громкости и т.п. - весь необходимый набор для простого пользователя.
Для вставки
на Web-страницу аудиоролика
язык HTML 5 предусматривает парный тег . Интернет-адрес файла, в котором хранится этот аудиоролик
, указывают с помощью атрибута SRC этого тега:
Встретив тег , Web-обозреватель может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. (В последнем случае мы можем запустить воспроизведение из Web-сценария; о Web-сценариях разговор пойдет в части III.) Также он может вывести на Web-страницу элементы управления, с помощью которых посетитель запускает воспроизведение аудиофайла
, приостанавливает его, прокручивает вперед или назад и регулирует громкость. Все это настраивается с помощью различных атрибутов тега , которые мы скоро рассмотрим.
Тег создает блочный элемент Web-страницы. Так что мы не сможем вставить аудиоролик
на Web-страницу в качестве части абзаца. Зато, чтобы поместить
его в отдельный абзац, нам не придется совершать никаких дополнительных действий (в отличие от изображения).
По умолчанию Web-обозреватель не будет воспроизводить аудиоролик
. Чтобы он это сделал, в теге нужно указать особый атрибут AUTOPLAY. Это действительно особый атрибут: он не имеет значения - достаточно одного его присутствия в теге, чтобы он начал действовать (атрибут тега без значения):
Сейчас вы услышите звук!
По умолчанию аудиоролик
никак не отображается на Web-странице (что, впрочем, понятно - аудио нужно не смотреть, а слушать). Но если в теге поставить атрибут без значения CONTROLS, Web-обозреватель выведет в том месте Web-страницы, где проставлен тег , элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
Нажмите кнопку воспроизведения, чтобы услышать звук.
Атрибут без значенияAUTOBUFFER имеет смысл указывать в теге только в том случае, если там отсутствует атрибут AUTOPLAY. Если он указан, Web-обозреватель сразу после загрузки Web-страницы начнет загружать файл аудиоролика - это позволит исключить задержку файла перед началом его воспроизведения.
Чтобы проверить полученные знания в действии, нам понадобится аудиоролик поддерживаемого Web-обозревателем формата. Автор нашел у себя небольшой аудиоролик формата WAV-PCM и дал ему имя sound.wav. Вы можете использовать любой другой аудиоролик, но, разумеется, в HTML-коде листинга 4.2 придется указать имя файла, в котором он хранится.
. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.2.
Сохраним Web-страницу в файле с именем t_audio.htm. Поместим выбранный аудиофайл (у автора - sound.wav) в папку, где находятся все файлы нашего Web-сайта (и t_audio.htm в том числе). И сразу же откроем только что созданную Web-страницу в Web-обозревателе (рис. 4.2).
Мы увидим код примера и, ниже, результат его выполнения - симпатичные элементы для управления воспроизведением аудиоролика
. Мы можем нажать кнопку воспроизведения и прослушать его.
Вставка видеоролика
Для вставки
на Web-страницу видеоролика
предназначен парный тег . Интернетадрес видеофайла
указывается с помощью знакомого нам атрибута SRC этого тега:
Встретив этот тег, Web-обозреватель выведет в том месте Web-страницы, где он проставлен, панель просмотра содержимого видеоролика
. В зависимости от указанных нами в теге атрибутов, он может сразу загрузить и воспроизвести
аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. Также он может вывести на Web-страницу элементы управления воспроизведением видеоролика
.
Как и тег , тег создает блочный элемент Web-страницы и поддерживает атрибуты AUTOPLAY, CONTROLS и AUTOBUFFER:
Если воспроизведение видеоролика еще не запущено, в панели просмотра будет выведен первый его кадр или вообще ничего (конкретное поведение зависит от Web-обозревателя). Но мы можем указать графическое изображение, которое будет туда выведено в качестве заставки. Для этого служитатрибут POSTER тега ; его значение указывает интернет-адрес нужного графического файла:
Здесь мы указали для видеоролика изображение-заставку, которое будет выведено в панели просмотра перед началом его воспроизведения и которое хранится в файле filmposter.jpg.
Ну что, попрактикуемся? Сначала найдем видеофайл подходящего формата. Автор отыскал небольшой видеоролик формата OGG и дал ему имя film.ogg. Вы можете выбрать любой другой видеоролик, но, разумеется, в приводимом далее HTML-коде придется указать имя его файла.
НА ЗАМЕТКУ
Если вы не найдете видеоролика
подходящего формата, то можете сами создать его, перекодировав видеоролик, сохраненный в другом формате. Для этого подойдет утилита SUPER ©, которую можно найти по интернет-адресу http://www.erightsoft.com/ SUPER.html. Она поддерживает очень много мультимедийных форматов, в том числе и OGG.
Откроем Web-страницу index.htm и впишем в раздел тегов тег . Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.3.
Сохраним Web-страницу в файле с именем t_video.htm. Поместим выбранный видеофайл
(у автора - film.ogg) в папку, где находятся все файлы нашего Web-сайта (и t_video.htm в том числе). И откроем готовую Web-страницу t_video.htm в Web-обозревателе (рис. 4.3).
Ниже кода примера мы увидим результат его выполнения - панель просмотра и элементы для управления воспроизведением. Нажмем кнопку воспроизведения и посмотрим "кино". Отметим, что после начала воспроизведения элементы управления пропадут; чтобы получить к ним доступ, следует навести на панель просмотра
курсор мыши. Как только воспроизведение видеоролика закончится, эти элементы управления снова появятся на экране.
Дополнительные возможности тегов и
Но постойте! Раньше мы узнали, что набор поддерживаемых мультимедийных форматов у разных Web-обозревателей различается. И может случиться так, что аудио- или видеоролик, который мы поместили на Web-страницу, окажется какому-то Web-обозревателю не "по зубам". Как быть?
Специально для таких случаев HTML 5 предусматривает возможность указать в одном теге или сразу несколько мультимедийных файлов. Web-обозреватель сам выберет из них тот, формат которого он поддерживает.
Если мы собираемся указать сразу несколько мультимедийных файлов в одном теге или , то должны сделать две вещи.
1. Убрать из тега или указание на мультимедийный файл, т. е. атрибут SRC и его значение.
2. Поместить внутри тега или набор тегов , каждый из которых будет определять интернет-адрес одного мультимедийного файла.
Одинарный тег указывает как интернет-адрес мультимедийного файла, так и его тип MIME. Для этого предназначены атрибуты SRC и TYPE данного тега соответственно:
Данный тег определяет сразу два видеофайла, хранящих один и тот же фильм: один - формата OGG, другой - формата QuickTime. Web-обозреватель, поддерживающий формат OGG, загрузит и воспроизведет первый файл, а Web-обозреватель, поддерживающий QuickTime, - второй файл.
Отметим, что тип MIME видеофайла
(и, соответственно, атрибут TYPE тега ) можно опустить. Но тогда Web-обозревателю придется загрузить начало файла, чтобы выяснить, поддерживает ли он формат этого файла. А это лишняя и совершенно ненужная нагрузка на сеть. Так что тип MIME лучше указывать всегда.
А если Web-обозреватель вообще не поддерживает теги и ? В таком случае он их проигнорирует и ничего на Web-страницу не выведет. Однако мы можем указать текст замены, в котором описать возникшую проблему и предложить какой-либо путь ее решения (например, сменить Web-обозреватель). Такой текст замены ставят внутри тега или после всех тегов (если они есть), например, как в листинге 4.4.
Отметим, что мы не указали в тексте замены теги, создающие абзац. Теги и сами по себе - блочные элементы, так что в этом нет нужды.
Вот и все об интернет-мультимедиа и средствах HTML 5 для его поддержки.