Урок 14. Как вставить аудио или музыку на сайт в html
1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html
Как вставить аудио (музыку) на сайт в html
Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:
1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
2. Далее нужно скачать файлы плеера.
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.
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 — ждет нажатия на кнопку воспроизведение
| Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true. |
Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
<bgsound src="Ваш трэк.mp3" loop="1"></bgsound>
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.
Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку. Поэтому попутное музыкальное сопровождение может его только заставить закрыть вкладку с сайтом.
Вставка аудио и музыки в HTML5 — тег audio
audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.
| Для каждого браузера проигрыватель и панель управления может отличаться. Для некоторых браузеров, например FF, нужно загружать ogg-файл, для остальных mp3. |
Атрибуты тега audio
autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop — проигрывает файл заново после его окончания
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>
Теперь смотрим работу тега audio в Вашем браузере:Демонстрация Скачать исходники
Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 3.0+ | 10.5+ | 3.1+ | 3.5+ | 2.2+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.
| Кодек | Internet Explorer | Chrome | Opera | Safari | Firefox |
| ogg/vorbis | |||||
| wav | |||||
| mp3 | |||||
| AAC |
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.
Синтаксис
<audio src="URL"></audio> <audio> <source src="URL"> </audio>
Атрибуты
- autoplay
- Звук начинает играть сразу после загрузки страницы.
- controls
- Добавляет панель управления к аудиофайлу.
- loop
- Повторяет воспроизведение звука с начала после его завершения.
- preload
- Используется для загрузки файла вместе с загрузкой веб-страницы.
- src
- Указывает путь к воспроизводимому файлу.
Закрывающий тег
Обязателен.
Пример
HTML5IE 8IE 9+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>audio</title> </head> <body> <p>Александр Клименков - Четырнадцать</p> <audio controls> <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis"> <source src="audio/music.mp3" type="audio/mpeg"> Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>. </audio> </body> </html>
Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Воспроизведение аудиофайла
Браузеры
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Вставка видео и аудио в HTML, опции плеера
Цель урока: Как вставить видео и аудио в html, форматы файлов
Вставка аудио
Форматы аудио-файлов:
Для вставки аудио-плеера используется следующий код:
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> </audio> |
<audio controls=»controls»> <source src=»song.ogg» type=»audio/ogg»> <source src=»song.mp3″ type=»audio/mpeg»> </audio>
В браузере Google Chrome плеер будет выглядеть:
Атрибуты тега <audio> для плеера:
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | autoplay | Указывает, что аудио должен начать играть, как только будет готов |
| controls | controls | Указывает, что элементы управления воспроизведением должны отображаться |
| loop | loop | Указывает, что аудио должно начаться снова, когда оно будет закончено |
| preload | auto metadata none | Определяет, должно ли аудио быть загруженным при загрузке страницы |
| src | url | Указывает адрес аудио для проигрывания |
Другие возможности вставки аудио на сайт
<a href="имя_файла.mp3">Щелкни </a> |
<a href=»имя_файла.mp3″>Щелкни </a>
<bgsound src="04.wav" loop="5"> |
<bgsound src=»04.wav» loop=»5″>
*только для форматов: wav, mp3, aiff, wma
<embed src="имя_файла.wav"> |
<embed src=»имя_файла.wav»>
Вставка видео
Формат видео-файлов:
<video controls="controls" poster="logo.png"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Ваш браузер не поддерживает video. </video> |
<video controls=»controls» poster=»logo.png»> <source src=»movie.mp4″ type=»video/mp4″> <source src=»movie.ogg» type=»video/ogg»> Ваш браузер не поддерживает video. </video>
Результат в браузере:
Атрибуты тега <video> для плеера:
| Атрибут | Значение | Описание |
|---|---|---|
| audio | muted | Определяет по умолчанию состояние звука. В настоящий момент только «muted» разрешено |
| autoplay | autoplay | Если указан, видео начнет играть сразу как только оно будет готово |
| controls | controls | Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения |
| height | пиксели | Указывает высоту видео плеера |
| loop | loop | Если указан, видео начнет проигрываться снова, как только закончится |
| poster | url | Указывает URL изображения, представляющего видео |
| preload | auto metadata none | Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если «autoplay» указан |
| src | url | Адрес URL видео для проигрывания |
| width | пиксели | Указывает ширину видео плеера |
Пример:
<video src="04.avi" loop="loop" audio="muted"> |
<video src=»04.avi» loop=»loop» audio=»muted»>
Другой вариант вставки видео (без плеера):
<a href="имя_файла.avi">Щелкни и смотри</a> <!-- Пример: --> <a href="ocean.qt"> Видеоклип 1 Мб</a> |
<a href=»имя_файла.avi»>Щелкни и смотри</a> <!— Пример: —> <a href=»ocean.qt»> Видеоклип 1 Мб</a>
* для форматов mpeg, avi
Фавикон Favicon
Фавиконка отображается в адресной строке браузера перед URL страницы, также Фавикон можно заметить во вкладке браузера страницы. Поисковые системы передают Favicon вместе с результатами поиска.
- файлы с расширением .ico
- размер 16×16 пикселей
Сервис для преобразования в ico-формат: http://image.online-convert.com/
<html> <head> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> |
<html> <head> <link rel=»icon» href=»favicon.ico» type=»image/x-icon»> </head>
HTML 5: семантические теги
- Семантические теги обычно несут смысловую нагрузку и не имеют никакого внешнего оформления в html. Но их можно и нужно оформлять стилями CSS. Такие теги важны для удобства читаемости кода и влияют на выдачу поисковиков.
- Рассмотрим примеры семантических тегов и их использования:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок</title>
</head>
<body>
<header>
header элемент - здесь следует какая-то информация в заголовке сайта. Обычно это лого компании и иногда дополнительная навигация по сайту.
<nav>nav (сокращенное от navigation) элемент - обычно представляет горизонтальное меню для навигации по отдельным частям сайта.</nav>
</header>
<h2>Главный заголовок страницы</h2>
<section>
Секция 1
<article>Статья 1</article>
<article>Статья 2</article>
<article>Статья 3</article>
</section>
<section>
Секция 2
<article>Статья 4</article>
<article>Статья 5</article>
<article>Статья 6</article>
<div>Обычный div, блочный элемент</div>
</section>
<aside>
ASIDE - какая-то информация, имеющая отношение к теме страницы.
</aside>
<footer>
labs-org.ru, Copyright 2020
</footer>
</body>
</html> |
<!doctype html> <html> <head> <meta charset=»utf-8″> <title>Заголовок</title> </head> <body> <header> header элемент — здесь следует какая-то информация в заголовке сайта. Обычно это лого компании и иногда дополнительная навигация по сайту. <nav>nav (сокращенное от navigation) элемент — обычно представляет горизонтальное меню для навигации по отдельным частям сайта.</nav> </header> <h2>Главный заголовок страницы</h2> <section> Секция 1 <article>Статья 1</article> <article>Статья 2</article> <article>Статья 3</article> </section> <section> Секция 2 <article>Статья 4</article> <article>Статья 5</article> <article>Статья 6</article> <div>Обычный div, блочный элемент</div> </section> <aside> ASIDE — какая-то информация, имеющая отношение к теме страницы. </aside> <footer> labs-org.ru, Copyright 2020 </footer> </body> </html>
Задание: Оформите фрагменты готового реферата или курсовой работы в веб-странице, используя семантические теги. Главы работы — это теги section, подглавы — теги article. Не нужно вставлять большие фрагменты текста, это могут быть несколько абзацев на каждый подпункт главы. Все семантические теги должны быть использованы.
Здравствуйте, дорогие читатели блога. Не удивительно, что в последнее время медийные сайты становятся всё более популярными. На таких сайтах очень интересно находится, например можно посмотреть какое нибудь видео или же послушать отличную музыку. Но в этот раз мы будем с Вами слушать музыку, а именно научимся вставлять аудио файлы на наш сайт с помощью HTML5.
Как оказывается, что HTML5 поддерживает аудио теги, и таким образом музыку вставить на сайт очень просто. Правда, что не все старые браузеры воспроизводят аудио файл, но все современные браузеры это делают на ура.
Демо
Поддержка браузеров
Все браузеры, которые поддерживают тег <audio> — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.
Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.
Chrome после 6 версии поддерживает практически все форматы.
Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.
С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.
Safari поддерживает все форматы аудио кроме ogg.
Добавление аудио файла на сайт
Чтобы добавить аудио файл на Ваш сайт нужно между тегами <audio controls> и </audio> указать прямую ссылку на файл. Ссылка указывается с помощью тега <SOURCE>. Вот как будет выглядеть готовый код:
<audio controls> <source src="/aud/music.mp3"> <source src="/aud/music.ogg"> <source src="/aud/music.wav"> <p>Ваш браузер не поддерживает аудио</p> </audio>
Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.
А если браузер вообще не поддерживает тег <audio> то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».
Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.
Демо
Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.
Как сделать фоновую музыку на сайте – HTML и HTML5
Как сделать фоновую музыку на сайте – HTML и HTML5
Всем привет!
Сегодня я расскажу, как сделать фоновую музыку на сайте используя HTML.
Это совершенно не сложно и не нужно быть гуру, чтобы создать такой эффект на сайте.
Стоит вопрос, а нужно ли это для вашего сайта? Может, вашим пользователям или читателям этот эффект будет мешать? Или даже раздражать? Ведь, если у вас, например, обучающий сайт, то музыка будет отвлекать. Если вы делаете сайт для какой-то музыкальной группы или певца, возможно, этот эффект будет классным и в тему.
Фоновая музыка на HTML5
Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом <audio>.
<audio src="путь к файлу" ></audio>
* Закрывающий тег обязателен.
Атрибуты тега <audio>:
- «autoplay» определяет воспроизведение музыкального файла сразу же после загрузки страницы.
- «autobuffer» используется в паре с «autoplay» – определяет воспроизведение музыкального файла уже в момент загрузки страницы.
- «src» – путь к звуковому файлу.
- «controls» показывает панель управления плеером.
Пример:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Фоновая музыка на HTML5-StepkinBlog.ru</title> </head> <body> <audio src="music.mp3" autoplay="autoplay"> Тег audio не поддерживается вашим браузером. Необходимо обновить браузер! </audio> </body> </html>
[смотреть демонстрацию]
Фоновая музыка на HTML (этот способ не рекомендую)
Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом <bgsound>.
<bgsound src="путь к файлу">
Закрывающий тег не нужен.
Тег <bgsound> размещается между тегами <head></head> .
Атрибуты тега <bgsound>:
- «Balance» — управляет балансом звука между правой и левой колонками.
Если в значении указать «-10 000», мелодия будет играть в левой колонке.
Если в значении указать «10 000», мелодия будет играть в правой колонке.
Если в значении указать «0», мелодия будет играть равномерно в обеих колонках. - «loop» — устанавливает, сколько раз проигрывать музыкальный файл. Значение по умолчанию «-1» бесконечный повтор.
- «src» — путь к музыкальному файлу.
- «volume» — громкость музыки. Значение «-10 000» – минимальная громкость, а значение «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="musik.wav" loop="-1" volume="-750" balance volume="-10000"> </head> <body> текст HTML-страницы </body>
Предыдущая запись
Атрибут download в HTML5 (для скачивания файлов)
Следующая запись
Подключение. Основы bootstrap 3 для начинающих. Урок №2
HTML5-аудио
HTML5-аудио предоставляет улучшенные возможности работы с аудио контентом. До недавнего времени единственным способом добавления звуковых файлов на веб-страницы было интегрирование фонового звука с помощью тега <bgsound>, который проигрывался во время просмотра пользователем страницы без возможности выключения.
Благодаря добавлению в спецификацию HTML5 нового элемента <audio>, появилась возможность добавлять аудио содержимое со встроенным программным интерфейсом без привлечения подключаемых модулей.
Как добавить HTML5-аудио на веб-страницу
1. Элемент <audio>
Поддержка браузерами
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-элемент <audio> используется для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка имеет следующий вид:
<audio src="name.ogg" controls></audio>Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.
Рис. 1. Внешний вид аудио плеера в разных браузерахВ настоящий момент не существует аудио формата, который бы работал во всех браузерах, поэтому для обеспечения доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента <source>. Одновременно можно добавить резервный контент для браузеров, которые не поддерживают элемент <audio>.
<audio controls>
<source src="name.ogg" type="audio/ogg">
<source src="name.mp3" type="audio/mpeg">
<a href="sounds/name.mp3">Скачать name.mp3</a>
</audio>| Атрибут | Описание, принимаемое значение |
|---|---|
| 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. Альтернативные медиа-ресурсы
Элемент <source> используется для добавления нескольких медиа-ресурсов для <audio> и <video>. Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.
| Атрибут | Описание, принимаемое значение |
|---|---|
| media | Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл). |
| src | Содержит абсолютный или относительный URL-адрес медиафайла. |
| type | Определяет MIME-тип медиафайла. |
4. Добавление субтитров и заголовков
Элемент <track> используется в качестве дочернего элемента <audio> и <video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения аудио или видеофайла.
| Атрибут | Описание, принимаемое значение |
|---|---|
| default | Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент <track> может содержать данный атрибут. |
| kind | Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для слепых пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео. |
| label | Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию. |
| src | Содержит абсолютный или относительный URL-адрес данных текстовой дорожки. |
| srclang | Язык воспроизводимой дорожки. |
5. Стилизованный пример аудио плеера
С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.
See the Pen Music animation by Elena Nazarova (@nazarelen) on CodePen.
Как вставить аудио на сайт
Вы здесь: Главная — HTML — HTML Основы — Как вставить аудио на сайт
В этой статье я расскажу, как вставить аудио на сайт. Вопрос этот весьма частый, и я хорошо посмотрел, какие сайты пытаются ответить на него. К сожалению, не нашёл нормальной инструкции, понятной не только специалисту, но и новичку. Я решил этот пробел заполнить, и рассказать о том, как добавить аудио на сайт.
Первым делом, Вы должны понять, что HTML (4-я версия) не имеет встроенных возможностей вставки аудио, поэтому нам потребуется Flash-плеер. На мой взгляд, самый лучший плеер можно собрать здесь: http://flv-mp3.com/ru/. При сборке можно указать путь к Вашему аудио-файлу, указать размеры и внешний вид плеера. Далее Вам дадут готовый код, который Вы сразу можете вставлять на свой сайт внутри тега body, и аудио сможет начать проигрываться.
Пример работы плеера:
Вот примерно такой код Вы должны будете вставить к себе на сайт:
<object data="http://flv-mp3.com/i/pic/ump3player_500x70.swf" type="application/x-shockwave-flash">
<param value="transparent" name="wmode">
<param value="true" name="allowFullScreen">
<param value="always" name="allowScriptAccess>
<param value="http://flv-mp3.com/i/pic/ump3player_500x70.swf" name="movie">
<param value="way=http://files.myrusakov.ru/free/files/music.mp3&swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&w=470&h=70& time_seconds=0&autoplay=0&q=&skin=sky&volume=70&comment=MyRusakov.ru" name="FlashVars">
</object>
Самые важные параметры находятся в «FlashVars«. В частности, в way находится путь к аудио-файлу, который нужно проиграть. Другие параметры, такие как w (ширина плеера), h (высота плеера), autoplay (автозапуск) и другие параметры Вы можете менять. Хотя если Вы собирали плеер, то ничего менять не потребуется, разве что way. Кстати, в way можно указывать не только абсолютный путь, но и относительный.
Вот таким несложным способом вставляется аудио на сайт. Вам лишь остаётся просто скопировать приведённый код, заменить way и вставить к себе на сайт.
Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
-
Создано 24.10.2011 10:17:55 -
Михаил Русаков
Создано 24.10.2011 10:17:55
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Как встроить видео и аудио в ваш HTML
от Abhishek Jakhar
HTML позволяет нам создавать основанные на стандартах видео и аудио плееры, которые не требуют использования каких-либо плагинов. Добавить видео и аудио на веб-страницу почти так же просто, как добавить изображение или отформатировать текст.
Существует два разных способа включения элементов видео. Мы будем обсуждать их оба ниже.
Видеоэлемент
Элемент
Атрибуты, которые мы можем включить:
-
srcЭтот атрибут обозначает источник, который очень похож на атрибут src, используемый в элементе изображения. Мы добавим ссылку на видеофайл в атрибуте src. -
typeЭто будет видео / mp4, потому что .mp4 - это формат видео, которое мы используем. Мы также можем использовать различные форматы видео, такие как .ogg или .webm, тогда значение атрибута type изменится на video / ogg или video / WebM соответственно.
Примечание: Некоторые распространенные форматы видео: WebM, Ogg, MP4.