Урок 14. Как вставить аудио или музыку на сайт в html
1.
Как вставить аудио (музыку) на сайт в html
2.
Как установить фоновую музыку в html
Как вставить аудио (музыку) на сайт в html
Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:
1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
2. Далее нужно скачать файлы плеера.
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку
4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:
<script language="JavaScript" src="http://ваш_домен/audio/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="http://ваш_домен/audio/player.swf" id="audioplayer1" height="25" width="290">
<param name="movie" value="http://ваш_домен/audio/player.swf">
<param name="FlashVars" value="playerID=1&soundFile=http://ваш_домен/audio/название_аудио_файла.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
И всё готово! Можете посмотреть и работу примера.
Как установить фоновую музыку в html
Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.
Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.
Синтаксис довольно-таки прост:
<embed src="....mp3"></embed>
Закрывающий тег не требуется.
Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:
<embed src="music.mp3" width="70" height="45" align="left" hidden="False" autostart="False" loop="True">
Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз
Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true. |
Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
<bgsound src="Ваш трэк.mp3" loop="1"></bgsound>
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега <bgsound> :
src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.
Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку.
Вставка аудио и музыки в HTML5 — тег audio
audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.
| Для каждого браузера проигрыватель и панель управления может отличаться. Для некоторых браузеров, например FF, нужно загружать ogg-файл, для остальных mp3. |
Атрибуты тега audio
autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop
preload — загрузка аудио файла произойдёт вместе с загрузкой страницы
src — путь к аудио файлу (mp3 или ogg)
Пример кода с тегом audio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег audio</title>
</head>
<body>
<p>Аудио в HTML 5</p>
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis" controls="controls">
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href="audio/music.mp3">Скачайте музыку</a>.
</audio></body>
</html>
ogg" type="audio/ogg; codecs=vorbis" controls="controls">Теперь смотрим работу тега audio в Вашем браузере:
Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)
Как вставить музыку и свое видео на свой сайт
Есть несколько способов проигрывания видео на сайте.Для начала вы должны решить где будет находиться ваш видеофайл, у себя на сайте, или на бесплатных серверах Rutube,Youtube и подобных.У себя он занимает место на диске, а на серверах видеофайл и плеер находятся у них и вы зависите от сервиса.Также надо учесть в каком формате будет проигрываться ваш фильм. Рассмотрим пример,когда вы хотите чтобы фильм проигрывался на рабочем столе.
В текстовом редакторе пишем код
<html>
<head>
</head>
<body>
<img dynsrc=»?:/??/…/film.avi» width=100% height=100%>
</html>
и сохраняем в формате HTML к примеру video.html в удобном для вас месте. В теге <img dynsrc> указываем полный путь к нему,где ? имя диска, ??/…/ — папки в которых он находится.
Также укажите ширину-width и высоту-height изображения. Далее на рабочем столе жмем правую кнопку мыши,выбираем
свойства >> рабочий стол >> обзор,находим и открываем video.html. Чтобы закрыть видео и вернуть прежний вид зайдите в обзор и выберите тему.
Вставка Flash видео на страницу сайта в формате SWF.
Для того чтобы у вас проигрывалось Flash видео у вас должен быть установлен Flash проигрыватель. Скачать его с официального сайта можно отсюда.
Можно вставить видео SWF в страницу через контейнер <object> вот так:
<object type=application/x-shockwave-flash data=»адрес» width=400 height=300>
<param name=movie value=адрес></object>
Результат этого кода:
Пишем путь к файлу или копируем адрес файла и ставим в код вместо «адрес»:
<object type=application/x-shockwave-flash data=»адрес» width=400 height=300>
<param name=movie value=ссылка-на-файл></object>
Если Flash файл лежит в одной папке с файлом плеера то указывать путь не надо,просто укажите имя файла.
Можно изменить размер флеш-объекта,изменив ширину и высоту: width=400 — ширина 400 пикселей height=300 — высота 300 пикселей
А теперь другой код проигрывателя Flash фильмов и музыки через контейнер <embed>
Здесь можно управлять проигрыванием фильма через меню,при нажатии
правой кнопки мышки в область фильма.
<embed src=»2.swf»
quality=high
play=false
loop=true
quality=medium
scale=noborder
menu=true
name=»myflash»
type=»application/x-shockwave-flash»
pluginspage=»http://www.macromedia.com/go/getflashplayer»>
</embed>
Результат:Для проигрывания нажмите сперва левую,а затем правую кнопку мышки по проигрывателю,и в контекстном меню нажмите «Воспроизвести»
macromedia.com/go/getflashplayer»/>Изменяемые параметры проигрывателя
play=false //Автоматический запуск фильма, true-да false-нет//
loop=true //Проигрывание в бесконечном цикле, true-да false-нет//
quality=medium //Качество,от выше до ниже- best, high, medium, autohigh, autolow, low.//
swliveconnect=true //Разрешение передачи данных между JavaScript и Flash фильмом true-да false-нет//.
scale=noborder //Масштабирование,-//showall,-растягивание фильма под размер проигрывателя с сохранением пропорции//
 noborder,-//фильм полностью занимает заданный размер,выходящие за рамки части обрезаются.//
 noscale,-//запрет масштабирования фильма.//
 exactfit,-//Масштабирование фильма под размер проигрывателя без сохранения пропорций//
Вставка музыки на свой сайт
Для вставки в сайт музыки рассмотрим несколько способов.
Музыку с помощью двух первых проигрывателей воспроизводят все браузеры, кроме Opera.Первый — с помощью уже знакомого вам контейнера <embed> <embed src=»имя.wav» width=120></embed>
Второй способ более всего нелюбимый мной.Здесь музыка начинает играть как только открывается страница и заканчивается когда кончится мелодия или вы не покинете страницу.Никаких визуальных способов управления и кнопок управления здесь нет.
Управление проигрывателем можно только прописать в коде проигрывателя,как это показано ниже.Я отключил его ,чтобы музыка не мешала прослушиванию других проигрывателей.
<bgsound src=»имя.wav» balance=»-5000″ loop=»1″ volume=»-1000″></bgsound>
balance
Управляет балансом звука между правой и левой колонками.Значение ноль служит для баланса громкости, отрицательные числа от -10000 увеличивают громкость в левой колонке, а положительные до 10000 — в правой.
loop
Устанавливает, сколько раз проигрывать музыкальный файл.Установка в цифрах.
src
Путь к музыкальному файлу.
volume
Задает громкость звучания музыки. По умолчанию уровень звука устанавливается максимальным и зависит от текущих настроек оборудования и операционной системы. Поэтому громкость можно только уменьшать, присваивая параметру volume отрицательное значение. Чем это число больше, тем тише звучит музыка на веб-странице.
Далее рассмотрим проигрыватели для всех браузеров.
Следующие проигрыватели можно собрать самому с помощью сервиса Muzicons.com
| Muzicons.  com | Muzicons.com | Muzicons.com |
Посмотрите также другие способы вставки видео и музыки на ЭТОЙ СТРАНИЦЕ
В заключении скажу,что сейчас в Интернете есть достаточное количество сервисов по сборке проигрывателей на свой сайт.Вы их без труда найдете.Иногда это лучше и быстрее ,чем вы будете писать свой код,а потом проверять его в браузерах.
Фоновая музыка. Учебник html
Глава 13
.. или то чего лучше не делать.
Раскрывая все возможности HTML языка, в тринадцатой несчастливой главе, вынужден Вам рассказать о теге <bgsound> который позволяет внедрять в страницу сайта фоновую музыку. Другими словами когда пользователь зайдёт на Ваш сайт он услышит звучание музыки указанной с помощью вышеупомянутого тега, ну естественно если у него подключены колонки или наушники.
Итак, тег <bgsound> первое, что необходимо сказать об этом теге то, что он не входит в официальную спецификацию HTML, а является инициативой компании Microsoft для браузера Internet Explorer, так что большинство других браузеров игнорируют данный тег.
Для того чтобы вставить аудио файл в какую либо страницу сайта, в качестве фоновой музыки, нужно в теге <bgsound> с помощью атрибута src указать путь к аудио файлу
Вот так:
<bgsound src=»music.mid»> — закрывающий тег необязателен.
Ну и собственно вставить эту конструкцию в html документ, обычно тег <bgsound> располагают в «голове» документа между тегами <head> </head>.
Сам аудио файл должен быть в формате: WAV, AU или MIDI.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.
01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Фоновая музыка</title>
<bgsound src=»mammoth.mid»>
</head>
<body>
<table border=»0″ align=»center» cellspacing=»0″ cellpadding=»15″>
<tr>
<td valign=»top»><img src=»mammoth.jpg» align=»left» alt=»Ищу маму..»></td>
<td>
<h3>Песенка мамонтенка.</h3>
<pre>
По синему морю, к зелёной земле
Плыву я на белом своём корабле.
На белом своём корабле,
На белом своём корабле.
… … …
<b>Музыка: В. Шаинский </b>
<b>Слова: Д. Непомнящий</b>
</pre>
</td>
</tr>
</table>
</body>
</html>
смотреть пример
Музыка нааас сближала.
. тайною нааашей стала.. 🙂
К тегу <bgsound> могут быть применены следующие атрибуты:
- src — адрес звукового файла
- loop — число повторов звукового файла
- balance — стереобаланс
- volume — громкость
Теперь поподробнее:
src — адрес звукового файла.. ну думаю понятно указывает путь к аудио файлу, например такая запись:
<bgsound src=»music/mammoth.mid»> говорит, что рядом с документом есть папка music, а в ней лежит музыкальный файл mammoth.mid который следует воспроизвести в качестве фоновой музыки.
loop — данный атрибут указывает сколько раз подряд будет проигрываться аудио файл, значения 0 и 1 проигрывает файл один раз, любое целое положительное число проигрывает звуковой файл заданное число раз, а вот отрицательное значение -1 говорит браузеру о том что данный файл необходимо проигрывать бесконечно.
По умолчанию значение равно 1.
balance — стереобаланс между правой и левой колонками компьютера, возможный диапазон значений от -10000 до 10000. Так, например значение -10000 переведёт весь звук на лёвую колонку компьютера при этом из правой колонки будет доносится лишь тишина.. Значение по умолчанию равно 0 т.е. распределять звук равномерно между левой и правой колонками.
volume — громкость можно определить значениями в диапазоне от -10000 до 0, где ноль это максимальная громкость, а -10000 минимальная. Значение 0 стоит по умолчанию.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Фоновая музыка</title>
<bgsound src=»music/mammoth.mid» loop=»-1″ volume=»-800″ balance volume=»1500″>
</head>
<body>
<table border=»0″ align=»center» cellspacing=»0″ cellpadding=»15″>
<tr>
<td valign=»top»><img src=»mammoth.
jpg» align=»left» alt=»Ищу маму..»></td>
<td>
<h3>Песенка мамонтенка.</h3>
<pre>
По синему морю, к зелёной земле
Плыву я на белом своём корабле.
На белом своём корабле,
На белом своём корабле.
… … …
<b>Музыка: В. Шаинский </b>
<b>Слова: Д. Непомнящий</b>
</pre>
</td>
</tr>
</table>
</body>
</html>
смотреть пример
Вот собственно и всё.. а теперь внимательно читаем полезные советы..
Использование фоновой музыки, это не есть хорошо по нескольким причинам:
Во-первых, мало кому из пользователей нравится, когда против его воли из динамиков начинает доноситься то, что он не заказывал! К тому же лазая в Интернете, у него может играть собственная музыка открытая с помощью какого ни будь плеера, может быть ему не нравится именно Ваше музыкальное сопровождение и он предпочитает классику вместо тяжёлого рока, может быть вокруг все спят да и просто он хочет поработать в тишине.
.Во-вторых, пользователю не предоставляется возможности управлять данной музыкой, проще говоря, нет кнопок «Стоп» «Пауза» «Плей» и т.д.
В-третьих, музыкальные записи в форматах WAV, AU и MIDI, как правило, низкого качества, кому нравится слушать некачественную музыку?
В-четвёртых, несмотря на то, что указанные выше форматы, как правило, сравнительно небольшого объёма памяти — это всё же трафик, а любой лишний трафик это плохо.
Ну и в-пятых, как уже говорилось раннее тег <bgsound> это придумка для браузера Internet Explorer так что в большинстве других браузеров музыка играть не будет! Кроме того, так как данный тег не входит в спецификацию HTML, то документ с этим тегом будет не валидным.
Если уж Вам действительно так необходима музыка на сайте, то внедряйте её с помощью тегов <embed> и/или <object>.. о данных тегах я постараюсь Вам рассказать в пока что ещё ненаписанной главе «объекты».
.
Видео- и аудиоконтент — Изучите веб-разработку
- Предыдущий
- Обзор: мультимедиа и встраивание
- Следующий
Теперь, когда мы научились добавлять простые изображения на веб-страницу, следующим шагом будет добавление видео- и аудиоплееров в HTML-документы! В этой статье мы рассмотрим именно это с элементами и ; затем мы закончим просмотром того, как добавлять титры/субтитры к вашим видео.
| Предпосылки: | Базовая компьютерная грамотность, установлено базовое программное обеспечение, базовые знания работа с файлами, знакомство с основами HTML (как описано в Начало работы с HTML) и Изображения в HTML. |
|---|---|
| Цель: | Чтобы узнать, как встраивать видео- и аудиоконтент на веб-страницу и добавлять
титры/субтитры к видео. |
Первый приток онлайн-видео и аудио стал возможен благодаря проприетарным технологиям на основе плагинов, таким как Flash и Silverlight. У обоих были проблемы с безопасностью и доступностью, и теперь они устарели в пользу собственных HTML-решений и элементов и доступности API-интерфейсов JavaScript для управления ими. Мы не будем рассматривать здесь JavaScript — только основные основы, которые можно получить с помощью HTML.
Мы не будем учить вас создавать аудио- и видеофайлы — это требует совершенно другого набора навыков. Мы предоставили вам образцы аудио- и видеофайлов и пример кода для ваших собственных экспериментов, если вы не можете получить свой собственный.
Примечание: Прежде чем начать здесь, вы также должны знать, что существует довольно много OVP (поставщиков онлайн-видео), таких как YouTube, Dailymotion и Vimeo, и поставщиков онлайн-аудио, таких как Soundcloud.
Такие компании предлагают удобный и простой способ размещения и просмотра видео, так что вам не нужно беспокоиться об огромном потреблении полосы пропускания. OVP обычно даже предлагают готовый код для встраивания видео/аудио на ваши веб-страницы; если вы используете этот маршрут, вы можете избежать некоторых трудностей, которые мы обсуждаем в этой статье. Подробнее об этом виде услуг мы поговорим в следующей статье.