1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.
4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла :
И всё готово! Можете посмотреть и работу примера
.
Первый способ - это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.
Синтаксис довольно-таки прост:
Закрывающий тег не требуется.
Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:
Атрибуты тега embed для проигрывания аудио в html
width - ширина панели в пикселях (или процентах)
height - высота панели в пикселях (или процентах)
align - расположение панели относительно текста, возможные значения left, right, center
hidden - позволяет скрыть панель, значения аттрибута: true - панель скрыта, false - панель видима (значение по умолчанию)
autostart - значение true - проигрыватель стартует автоматически при загрузке страницы, false - ждет нажатия на кнопку воспроизведение
loop - цикл, true - трэк проигрываться по кругу, а при значении false - только один раз
Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :
src
- путь к Вашему аудиофайлу
loop
- сколько раз мелодию повторить (если -1, то повторяется бесконечно)
balance
- значение стереобаланса (от -10000 до 10000)
volume
- громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.
Однако не будет возможности как-либо контролировать проигрыватель - при каждом обновлении страницы трек будет проигрываться заново.
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку. Поэтому попутное музыкальное сопровождение может его только заставить закрыть вкладку с сайтом.
Вставка аудио и музыки в HTML5 - тег audioaudio - парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.
Атрибуты тега audio
autoplay
- файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls
- отобразить панель управления плеера в браузере
loop
- проигрывает файл заново после его окончания
preload
- загрузка аудио файла произойдёт вместе с загрузкой страницы
src
- путь к аудио файлу (mp3 или ogg)
Пример кода с тегом audio
Тег audio
Аудио в HTML 5
Тег audio не поддерживается вашим браузером.
Скачайте музыку.
Музыка на сайте - это скорее редкость, чем норма. Вставляя музыку на сайт, нужно понимать, что некоторых пользователей она может и вовсе оттолкнуть. В этой статье мы рассмотрим несколько вариантов вставки музыки на сайт, а также рассмотрим как сделать фоновую музыку.
Как вставить фоновую музыку на сайтВставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.
Есть два способа для вставки музыки в 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="значение" - загружать музыку сразу с загрузкой страницы
Рассмотренные варианты на мой взгляд не являются идеальными решениями, поскольку все базируются на штатных проигрывателях. У каждого браузера будет свой штатный проигрыватель по умолчанию, а в каких-то он вообще может не работать. Поэтому лучше всего скачать плеер к себе на сайт и уже с него загружать музыку. У такого плеера будет функции остановки, настройки громкости и т.п. - весь необходимый набор для простого пользователя.
ОписаниеДобавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег . Внутри контейнера можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 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. Воспроизведение аудиофайла
БраузерыУправление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Однако зачастую интернет-контент уникален, например, включает в себя не только музыку, но и комментарии исполнителей, интервью, всяческие байки о создании и т. п.
Для загрузки потокового контента из Сети создано невероятно много утилит - одни из них - универсальные, другие - «заточенные» под определенные сервисы. Какие-то программы получают доступ к исходным аудио- и видеофайлам и просто побайтово считывают их из Интернета, а некоторые умеют докачивать, загружать файлы в несколько потоков, работать с группами файлов и т. п. Описание потока может представлять собой xml-файл в формате ASX (для Windows Media Player) или храниться в файлах формата RealAudio (расширения.ra и.rm - для аудио, .rv - для видео) и др. Доставляются такие потоки не только по стандартным протоколам http, udb / tcp, но и по специальным - rtsp, mms, rtp, а также посредством пиринговых технологий, применяемых, к примеру, в таком популярном сервисе интернет-телевидения, как SopCast. Естественно, чтобы воспроизвести эти форматы, необходим соответствующий клиент - скажем, плееры Windows Media Player, медиапроигрыватель VLC и проч. Последний, к слову, умеет не только проигрывать потоковый контент, но и сохранять его на локальных дисках. Именно им мы и воспользуемся, ведь большинство ресурсов ему вполне по зубам.
/IMAGE/1288182839_56_1.gif)
Итак, чтобы записать, в частности, программу онлайнового радио или подкаст, необходимо прежде получить ссылку на потоковый контент, а затем ввести ее в VLC-плеере. Если на сайте для воспроизведения аудио используется Windows Media Player, добраться до ссылки будет просто. Нужно щелкнуть правой кнопкой на встроенном на странице сайта проигрывателе и выбрать пункт «Свойства». В поле «Размещение» следует найти адрес и скопировать его в буфер обмена. Если же на сайте применяется Flash-плеер или проигрыватель, разработанный на базе HTML5, то, вполне вероятно, придется порыться в исходном коде страницы или обратиться к специальным утилитам для «выдирания» ссылок.
/IMAGE/1288182839_57.gif)
Следующее действие - конвертирование потокового аудио. Пожалуй, не скажешь, что эта операция в VLC - простая и очевидная. Скорее, наоборот, она громоздкая и путаная. Командой меню «Медиа Открыть URL» потоковый контент можно записать в файл. По умолчанию VLC настроен на воспроизведение ссылки, и, чтобы сохранить ее в файл, нужно в открывшемся диалоговом окне изменить режим на «Конвертировать». Диалог при этом изменится - в новом окне указывается конечный файл и выбирается профиль (т. е. формат, в котором будет сохранена запись). После нажатия кнопки «Начать» плеер приступает к копированию потокового аудио в файл. Делает он это совершенно незаметно и в принципе способен писать сколь угодно долго - данный процесс придется контролировать самостоятельно. Следует учитывать, что при останове и продолжении процесса конвертирования результирующий файл обнуляется. Так что нужно переименовывать ранее сохраненные файлы.
Совершенно очевидно, что каждый раз повторять подобную операцию весьма хлопотно. Особенно если требуется писать различные потоки в разное время. Плеер VLC предоставляет простейшее средство загрузки по расписанию, получившее название «Конфигуратор VLC». В нем указывается, что и куда писать (эти параметры настраивают так же, как описывалось выше) и насколько долго. Скажем, если нужно ежедневно записывать некую программу интернет-радио, стоит задать в диалоге опции «Повтор» и «Интервал между повторами». Теперь программа после запуска будет самостоятельно конвертировать потоковый контент.
/IMAGE/1288182839_57_1.gif)
Кстати, VLC поможет и при преобразовании потоков, например файлов формата ASF в более привычный и понимаемый карманными плеерами MP3. Эту операцию можно проделывать либо вручную, каждый раз конвертируя локальный файл, либо автоматически с помощью несложного скрипта на Powershell, входящего, как известно, в состав Windows 7 и доступного в более ранних версиях данной операционной системы. Скрипту передаются несколько параметров - путь к файлам, маска файлов и опционально результирующая папка, куда складируются файлы (если она не указана, файлы записываются в исходный каталог). Внутри цикла вызывается программа VLC, которой пересылаются параметры: что кодировать, куда записывать и собственно параметры кодирования. По окончании кодирования VLC выгружается из оперативной памяти. Убедиться в этом позволяет последняя конструкция, ожидающая, пока процесс выгрузится из памяти. Ввести такой скрипт можно в любом текстовом редакторе - блокноте или специальном «визуальном» редакторе Powershell ISE. Если сохранить его в файле, к примеру convert.ps1, то он запускается конструкцией вида:
. convert.ps1 c: files music *.asf.
В завершение стоит отметить еще несколько особенностей скрипта. В операционной системе Windows автоматически не прописываются пути к программам, так что в скрипте необходимо также указать путь к vlc.exe: в 64‑разрядной версии - C: ’Program Files (x86) ’ VideoLAN VLC (обратите внимание, что строки с пробелами заключены в кавычки) и в 32‑разрядной - C: ’Program Files’ VideoLAN VLC . Кроме того, вам следует убедиться, что до запуска скрипта вы покинули программу VLC, иначе метод waitforexit () будет работать бесконечно долго (из-за того, что вызываемая в скрипте программа завершит работу, но ее копия останется). Конечно, в скрипте допустимо обрабатывать еще и идентификаторы процессов, но такая возможность лишь усложнит его. Чтобы решить данную проблему, следует попросту добавить в начало скрипта принудительное завершение всех запущенных VLC: ps vlc* | % { $_.kill ()}. Еще одна особенность связана с системой безопасности Windows 7, требующей, чтобы все скрипты были подписаны. Обойти такое ограничение поможет команда Set-ExecutionPolicy RemoteSigned, запускать которую нужно в Powershell от имени администратора.
Скрипт convert.ps1 на Powershell дляконвертирования потокового контента в MP3
param ( $inputpath, $wildcard, $outputpath = $inputpath)
ls -path $inputpath $wildcard | % {
write-host $outputfile
vlc -i dummy $_.fullname ¨:sout=#transcode {acodec=mp3,ab=128,channels=2}:standard {access=file,mux=asf,dst=$outputfile}¨ vlc://quit
Извлечение аудио из FLV-роликов
Другой пример совместного применения VLC и Powershell - это извлечение аудио из Flash-видеороликов формата FLV. Подобные видеоклипы хранятся на специализированных порталах, таких, например, как небезызвестный YouTube. Конечно, Google и другие владельцы видеохостингов всячески препятствуют скачиванию контента, но всегда найдутся способы обойти защиту и заполучить понравившийся ролик…
Впрочем, обсуждаемая здесь задача заключается в следующем: как из загруженного любым известным способом FLV-файла извлечь аудио, чтобы, к примеру, слушать его в карманном плеере. Подобная операция вполне по силам VLC, причем и в GUI, и из командной строки. Кстати, в первом случае необходимо проделать практически тот же набор действий, что и раньше: выбрать в меню команду «Медиа - Конвертировать / Сохранить», указать исходный и результирующий файлы, а также параметры конвертирования, т. е. соответствующий кодек.
Для ручного преобразования с помощью Powershell нужно, как и в прошлый раз, сконструировать небольшой скрипт (назовем его flv2mp.ps1), которому пересылаются имена исходной и результирующей папок (по умолчанию - такая же, как и исходная). Вся его хитрость заключается в переданных параметрах: поскольку видео не требуется, стоит использовать параметр dummy, в блоке standard определить параметры файла, а чтобы скрипт не докучал всплывающими окнами, попросту блокировать их опцией –dummy-quiet –sout.
param ( $inputpath, $outputpath = $inputpath)
ls -path $inputpath *.flv | % {
$outputfile = join-path $outputpath ($_.name.replace ($_.extension, ‘.mp3’))
write-host $outputfile
vlc $filename -I dummy --dummy-quiet --sout ¨#transcode {acodec=mp3,vcodec=dummy}:standard {access=file,mux=raw,dst=’$outputfile’}¨ vlc://quit
ps vlc | % { $_.waitforexit ()}
Здравствуйте, дорогие читатели блога. Не удивительно, что в последнее время медийные сайты становятся всё более популярными. На таких сайтах очень интересно находится, например можно посмотреть какое нибудь видео или же послушать отличную музыку. Но в этот раз мы будем с Вами слушать музыку, а именно научимся вставлять аудио файлы на наш сайт с помощью HTML5.
Как оказывается, что HTML5 поддерживает аудио теги, и таким образом музыку вставить на сайт очень просто. Правда, что не все старые браузеры воспроизводят аудио файл, но все современные браузеры это делают на ура.
Демо Поддержка браузеровВсе браузеры, которые поддерживают тег — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.
Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.
Chrome после 6 версии поддерживает практически все форматы.
Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.
С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.
Safari поддерживает все форматы аудио кроме ogg.
Добавление аудио файла на сайтЧтобы добавить аудио файл на Ваш сайт нужно между тегами и указать прямую ссылку на файл. Ссылка указывается с помощью тега . Вот как будет выглядеть готовый код:
Ваш браузер не поддерживает аудио
Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.
А если браузер вообще не поддерживает тег то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».
Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.
ДемоВот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.
