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

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


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


Синтаксис:


Несколько

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

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

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

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

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

    src

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

Пример:


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


Синтаксис:


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

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

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

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

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

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

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

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

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

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


Пример:


Результат примера в браузере:

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

Благодаря добавлению в спецификацию HTML5 нового элемента

Как добавить HTML5-аудио на веб-страницу

1. Элемент

Поддержка браузерами

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-элемент

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

Рис. 1. Внешний вид аудио плеера в разных браузерах

В настоящий момент не существует аудио формата, который бы работал во всех браузерах, поэтому для обеспечения доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента . Одновременно можно добавить резервный контент для браузеров, которые не поддерживают элемент

Таблица 1. Атрибуты тега
Атрибут
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. Альтернативные медиа-ресурсы

Элемент используется для добавления нескольких медиа-ресурсов для

4. Добавление субтитров и заголовков

Элемент используется в качестве дочернего элемента

Таблица 3. Атрибуты тега
Атрибут Описание, принимаемое значение
default Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент может содержать данный атрибут.
kind Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (subtitles). Принимаемые значения:
captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей).
chapters — добавляет названия глав в виде списка для навигации по медиафайлу.
descriptions — добавляет звуковое описание происходящего в видео (для слепых пользователей).
metadata — метаданные, используемые скриптами, не отображаются для пользователей.
subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src Содержит абсолютный или относительный URL-адрес данных текстовой дорожки.
srclang Язык воспроизводимой дорожки.

5. Стилизованный пример аудио плеера

С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.

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

Для загрузки потокового контента из Сети создано невероятно много утилит - одни из них - универсальные, другие - «заточенные» под определенные сервисы. Какие-то программы получают доступ к исходным аудио- и видеофайлам и просто побайтово считывают их из Интернета, а некоторые умеют докачивать, загружать файлы в несколько потоков, работать с группами файлов и т. п. Описание потока может представлять собой 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".

Добавить музыку на сайт можно с помощью тега audio . Пример простейшей реализации этого тега:

Но опять же, как и в случае с видео, не всё так просто. Не все браузеры поддерживают нужные аудио-кодеки. Взглянем на таблицу:

Браузер Google Chrome Mozilla Firefox Safari Opera Internet Explorer
mp3 Есть Нет Есть Нет Есть
wav Есть Есть Есть Есть Нет
AAC Есть Нет Есть Нет Есть
ogg/vorbis Есть Есть Нет Есть Нет

Как видно из таблицы, наиболее "универсальным" является формат.wav. Но, тем не менее, его не поддерживает Internet Explorer. Поэтому, рекомендуется конвертировать аудиофайл в несколько форматов и использовать несколько аудио-кодеков. Следующий пример иллюстрирует один из способов добавления аудио HTML на веб-страницу:

Внешний вид аудиоплеера будет зависеть от браузера, вот, например, вид аудиоплеера в браузере 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

Александр Клименков - Четырнадцать

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение аудиофайла

Браузеры

Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.