Результат в 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
- адрес картинки. Картинка будет отображаться пользователю, пока видео не доступно или не воспроизводится.
Теги, атрибуты и значения
- определяет фоновый HTML звук, музыку на сайте
. Располагается в секторе .
- определяет url звукового файла в формате Wav или Mp3.
loop="" - определяет количество проигрываний.
volume="-1000" - регулирует громкость звука. В данном случае обозначенная величина будет вычтена из текущего уровня громкости, установленного
на компьютере пользователя.
balance="0" - регулирует баланс звучания.
Внимание!
Описанный выше метод внедрения фонового звука в HTML
-страницу приемлем только для браузеров Internet Explorer и Opera ранних выпусков. Для современных браузеров он не подходит ⇒ музыка и звук на странице сайта не воспроизводятся!
Поэтому смотрим ниже
, где подробно рассмотрен кроссбраузерный способ вставки звука и музыки на сайт для всех браузеров (Opera, Firefox, Internet Explorer, Chrome).
Звук в HTML или музыка на сайте для всех браузеров
Фоновый HTML звук
для Opera, Firefox, Internet Explorer, Chrome:
Размещается код в секторе
.
Aтрибуты и значения
autostart="" - определят будет ли музыка проигрываться автоматически
при открытии интернет-станицы или нет. Возможны значения: true - да или false - нет.
loop="" - определяет будут ли повторяться проигрывания. Возможны значения: true - да или false - нет.
hidden="" - определяет будет ли скрыта панель управления плейера или нет.
Возможны значения: true - да или false - нет. Если не будет, то указываются размеры панели:
width="" height="" .
С
овет напрашивается сам собой! Используйте фоновый HTML звук или музыку на своем сайте
только в случае, когда это действительно оправдано!
Мы уже говорили об использовании HTML5 и почему это актуально на сегодняшний день. Теперь остановимся более подробно на вопросе "Как вставить аудио на сайт с помощью HTML5".
Добавить музыку на сайт можно с помощью тега audio
. Пример простейшей реализации этого тега:
Но опять же, как и в случае с видео, не всё так просто. Не все браузеры поддерживают нужные аудио-кодеки. Взглянем на таблицу:
Браузер
Google Chrome
Mozilla Firefox
Safari
Opera
Internet Explorer
mp3
Есть
Нет
Есть
Нет
Есть
wav
Есть
Есть
Есть
Есть
Нет
AAC
Есть
Нет
Есть
Нет
Есть
ogg/vorbis
Есть
Есть
Нет
Есть
Нет
Как видно из таблицы, наиболее "универсальным" является формат.wav. Но, тем не менее, его не поддерживает Internet Explorer. Поэтому, рекомендуется конвертировать аудиофайл в несколько форматов и использовать несколько аудио-кодеков. Следующий пример иллюстрирует один из способов добавления аудио HTML на веб-страницу:
Ваш браузер не поддерживает тег audio.
Внешний вид аудиоплеера будет зависеть от браузера, вот, например, вид аудиоплеера в браузере Firefox:
Атрибуты тега AUDIO
К основным атрибутам тега audio
относятся:
src
- путь к аудиофайлу (может задаваться отдельно с помощью вложенного тега source
);
controls
- отображается панель управления аудио (play, pause, volume и т.д.);
autoplay
- воспроизводит аудиофайл сразу после загрузки веб-страницы;
loop
- циклическое воспроизведение;
Вложенный тег source
может иметь следующие атрибуты:
src
- путь к аудиофайлу;
type
- тип аудио-источника;
media
- тип устройства, на котором будет проигрываться аудиофайл (all - на всех устройствах, tv - телевизор и т.д.);
Описание
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут 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. Воспроизведение аудиофайла
Браузеры
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Зачем нужна музыка на сайте?
Довольно интересный вопрос, воспроизведение музыкальных или голосовых файлов на сайте, или встроенный плеер помогает посетителям сайта расслабиться, вызывает положительные эмоции и настроивает на нужный лад, так сказать облегчает взаимодействие с сайтом. Но данные эффекты работают только в том случае, когда музыка на сайте подобрана правильно и громкость звука не превышает допустимые пределы, иначе все ваши старания окажутся напрасными и вызовут отрицательные эмоции у посетителей сайта.
Как вставить аудио (музыку) на сайт в html?
Нам часто задают такой вопрос, музыка на сайте является актуальным и креативным элементом, а способов её воспроизведения много и их не так сложно внедрить. Начнем с того, что каждый пользователь Глобальной Сети использует какой либо браузер для выхода в Интернет, а общей и универсальной технологии воспроизведения звуковых и музыкальных файлов нет, каждый браузер работает по своим собственным алгоритмам и они несколько отличаются друг от друга, поэтому при воспроизведении музыки с помощью внедрения в HTML код страницы могут возникать проблемы. Но как Вы знаете, все проблемы решаемы!
Вставить музыку на сайт HTML, JavaScript, jQuery, AJAX способы:
1 способ.
Создание аудио проигрывателя музыки на сайте или плеера
Технология проста, создается файл проигрывателя, чтобы он не нагружал сайт или сервер выбираем технологию которую будем использовать: JavaScript, jQuery, AJAX
. На основе выбранной технологии разрабатываем скрипт для нашего сайта и вставляем на сайт. Скрипт создается в зависимости от того, что Вам нужно: автоматическое воспроизведение фоновой музыки на сайте или управляемый посетителем плеер. Далее создаем папку в корне сайта для музыки и загружаем в нее аудио файлы.
Или как альтернативный сопсоб можно создать плеер по флеш-технологии (Flash), такой плеер будет смотреться более эффектно. Правда выйдет дороже и тяжелее для сайта (повысит время загрузки страниц сайта).
2 способ.
Установка музыки на сайт с помощью HTML
Используя возможности HTML и браузера можно вставить на сайт плеер или фоновую музыку. Технология так же проста: создается HTML5 код с тегом "audio" и этот код прописывается в сайт, а когда пользователь заходит на сайт он видит минимизированный плеер, посетитель нажимает кнопку плэй или автоматически начинает играть фоновая музыка. Вид плеера будет зависеть от браузера с которого зашел посетитель, но функциональность останется стандартной: кнопки Play, Stop, Next, Prev, Volume. Выглядит плеер с HTML кодом вот так:
Cам код для вставки выглядит так:
Как вы могли заметить команда "controls autoplay" включает автопроигрывание музыки как только посетитель заходит на сайт.
Альтернативный вариант HTML кода это тег "bgsound", это вообще не использовать визуальный плеер, при посещении сайта начнет играть музыка на сайте, но регулировать громкость, поставить на паузу и т.д. пользователь не сможет. Настройка громкости воспроизведения звукового файла настраивается в самом коде.
Форматы звуковых файлов для проигрывания музыки на сайте могут быть: WAV, AU, MIDI, MP3, OGG (расширения). Музыкальные файлы загружаются на сайт, либо используются ссылки на те сайты, где располагается звуковой файл, главное, чтобы он находился в открытом доступе.