Как вставить аудио в html страницу. Сохраняем аудио из интернета в файлы

Однако зачастую интернет-контент уникален, например, включает в себя не только музыку, но и комментарии исполнителей, интервью, всяческие байки о создании и т. п.

Для загрузки потокового контента из Сети создано невероятно много утилит - одни из них - универсальные, другие - «заточенные» под определенные сервисы. Какие-то программы получают доступ к исходным аудио- и видеофайлам и просто побайтово считывают их из Интернета, а некоторые умеют докачивать, загружать файлы в несколько потоков, работать с группами файлов и т. п. Описание потока может представлять собой xml-файл в формате ASX (для Windows Media Player) или храниться в файлах формата RealAudio (расширения.ra и.rm - для аудио, .rv - для видео) и др. Доставляются такие потоки не только по стандартным протоколам http, udb / tcp, но и по специальным - rtsp, mms, rtp, а также посредством пиринговых технологий, применяемых, к примеру, в таком популярном сервисе интернет-телевидения, как SopCast. Естественно, чтобы воспроизвести эти форматы, необходим соответствующий клиент - скажем, плееры Windows Media Player, медиапроигрыватель VLC и проч. Последний, к слову, умеет не только проигрывать потоковый контент, но и сохранять его на локальных дисках. Именно им мы и воспользуемся, ведь большинство ресурсов ему вполне по зубам.

Итак, чтобы записать, в частности, программу онлайнового радио или подкаст, необходимо прежде получить ссылку на потоковый контент, а затем ввести ее в VLC-плеере. Если на сайте для воспроизведения аудио используется Windows Media Player, добраться до ссылки будет просто. Нужно щелкнуть правой кнопкой на встроенном на странице сайта проигрывателе и выбрать пункт «Свойства». В поле «Размещение» следует найти адрес и скопировать его в буфер обмена. Если же на сайте применяется Flash-плеер или проигрыватель, разработанный на базе HTML5, то, вполне вероятно, придется порыться в исходном коде страницы или обратиться к специальным утилитам для «выдирания» ссылок.

Следующее действие - конвертирование потокового аудио. Пожалуй, не скажешь, что эта операция в VLC - простая и очевидная. Скорее, наоборот, она громоздкая и путаная. Коман­дой меню «Медиа Открыть URL» потоковый контент можно записать в файл. По умолчанию VLC настроен на воспроизведение ссылки, и, чтобы сохранить ее в файл, нужно в открывшемся диалоговом окне изменить режим на «Конвертировать». Диалог при этом изменится - в новом окне указывается конечный файл и выбирается профиль (т. е. формат, в котором будет сохранена запись). После нажатия кнопки «Начать» плеер приступает к копированию потокового аудио в файл. Делает он это совершенно незаметно и в принципе способен писать сколь угодно долго - данный процесс придется контролировать самостоятельно. Следует учитывать, что при останове и продолжении процесса конвертирования результирующий файл обнуляется. Так что нужно переименовывать ранее сохраненные файлы.

Совершенно очевидно, что каждый раз повторять подобную операцию весьма хлопотно. Особенно если требуется писать различные потоки в разное время. Плеер VLC предоставляет простейшее средство загрузки по расписанию, получившее название «Конфигуратор VLC». В нем указывается, что и куда писать (эти параметры настраивают так же, как описывалось выше) и насколько долго. Скажем, если нужно ежедневно записывать некую программу интернет-радио, стоит задать в диалоге опции «Повтор» и «Интервал между повторами». Теперь программа после запуска будет самостоятельно конвертировать потоковый контент.

Кстати, 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+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.

Chrome после 6 версии поддерживает практически все форматы.

Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.

С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.

Safari поддерживает все форматы аудио кроме ogg.

Добавление аудио файла на сайт

Чтобы добавить аудио файл на Ваш сайт нужно между тегами указать прямую ссылку на файл. Ссылка указывается с помощью тега . Вот как будет выглядеть готовый код:

Ваш браузер не поддерживает аудио

Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.

А если браузер вообще не поддерживает тег

Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.

Демо

Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.

Язык HTML
Вставка звука и видео

Вставка звука. Тег
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег .

Синтаксис:

Несколько

Атрибуты тэга

autoplay - звук начинает играть сразу после загрузки страницы;

controls - добавляет панель управления к аудиофайлу;

loop - повторяет воспроизведение звука с начала после его завершения;

preload - используется для загрузки файла вместе с загрузкой веб-страницы;

src

Закрывающий тег oбязателен.
Внутри контейнера

Пример:

Вставка видео. Тег
Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег .

Синтаксис:

Несколько элементов можно связать с различными файлами. Браузер будет использовать первый запускаемый формат.

Атрибуты тэга

autoplay - видео начинает воспроизводиться автоматически после загрузки страницы;

controls - добавляет панель управления к видеоролику;

loop - повторяет воспроизведение видео с начала после его завершения;

height - задает высоту области для воспроизведения видеоролика;

width - задает ширину области для воспроизведения видеоролика;

preload - используется для загрузки видео вместе с загрузкой веб-страницы;

src - указывает путь к воспроизводимому файлу.

Закрывающий тег oбязателен.
Внутри контейнера

Пример:

Всем привет. C Вами Андрей.

Из этого выпуска мы узнаем, каким образом можно подключить звук к HTML странице, т.е. файлы звукового формата к вашему сайту.

Существует 3 метода встраивания звуковых файлов .

По нажатию на эту ссылку, автоматически запускается стандартная программа для воспроизведения файлов указанного формата, обычно это Windows Media (воспроизводит AIFF, AU, MIDI, WAV и МРЗ — файлы). Этот вариант вам знаком, поэтому пойдем дальше.

Второй способ заключается в использовании контейнера .

Данный контейнер обеспечивает возможность прослушивания с помощью средств воспроизведения, отображаемых прямо на Web-странице, однако пульт управления проигрыванием может выглядеть по-разному в разных браузерах.

Еще для того что б этот контейнер отображался, в браузере должен быть установлен специальный плагин. В Internet Explorer он стоит по умолчанию, а вот что касается остальных браузеров, то не у всех он может быть. Тогда его придется установить.

XHTML

Параметр src – обязательный, определяет имя проигрываемого файла. Остальные параметры можно не указывать. Их перечень приведен ниже.

WIDTH=n — определяет ширину консоли в пикселях.

HEIGHT=m — определяет высоту консоли в пикселях.

AUTOSTART=TRUE|FALSE — если имеет значение TRUE, воспроизведение начинается автоматически.

AUTOLOAD=TRUE|FALSE — если имеет значение FALSE, файл не загружается автоматически.

STARTTIME="mm:ss" — воспроизведение начинается с указанного в минутах секундах момента от начала файла.

REPEAT= TRUE / FALSE — разрешает или запрещает повторять звуковой/видео клип.

PLAY LOOP=Z — если Вы указали REPEAT-TRUE, укажите здесь вместо Z количество повторений.

VOLUME=percentage — громкость воспроизведения, указанная в процентах от максимальной.

ALIGN="value" — выравнивает консоль управления по отношению к тексту страницы. Может иметь значения CENTER, BASELINE TOP LEFT, RIGHT.

CONTROLS="value" — задает набор органов управления консоли. Может иметь следующие значения (они объяснены далее)-CONSOLE, SMALLCONSOLE, PLAYBUTTON PAUSEBUTTON, STOPBUTTON И VOLUMELEVER.

CONSOLE — полный набор органов управления.

SMALLCONSOLE — компактное представление консоли. Полный набор органов управления, кроме кнопки паузы.

PLAYBUTTON — только кнопка воспроизведения.

PAUSEBUTTON — только кнопка паузы.

STOPBUTTON — только кнопка остановки. При этом файл выгружается.

VOLUMELEVER — только регулятор громкости.

С параметрами разобрались.

Предлагаю вам самим попробовать применить различные параметры и посмотреть, как они работают (тут ничего сложного нет).

Третий способ – это указать звуковой файл фоновым звуком для страницы.

Синтаксис тут простой: