Как вставить аудио в 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".

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

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

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

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

Внешний вид аудиоплеера будет зависеть от браузера, вот, например, вид аудиоплеера в браузере Firefox:

К основным атрибутам тега audio относятся:

• src - путь к аудиофайлу (может задаваться отдельно с помощью вложенного тега source );
• controls - отображается панель управления аудио (play, pause, volume и т.д.);
• autoplay - воспроизводит аудиофайл сразу после загрузки веб-страницы;
• loop - циклическое воспроизведение;

Вложенный тег source может иметь следующие атрибуты:

• src - путь к аудиофайлу;
• type - тип аудио-источника;
• media - тип устройства, на котором будет проигрываться аудиофайл (all - на всех устройствах, tv - телевизор и т.д.);

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 минимум.

Однако не будет возможности как-либо контролировать проигрыватель - при каждом обновлении страницы трек будет проигрываться заново.

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

Атрибуты тега audio

autoplay - файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls - отобразить панель управления плеера в браузере
loop - проигрывает файл заново после его окончания
preload - загрузка аудио файла произойдёт вместе с загрузкой страницы
src - путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

Тег audio

Аудио в HTML 5

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

Нам часто задают такой вопрос, музыка на сайте является актуальным и креативным элементом, а способов её воспроизведения много и их не так сложно внедрить. Начнем с того, что каждый пользователь Глобальной Сети использует какой либо браузер для выхода в Интернет, а общей и универсальной технологии воспроизведения звуковых и музыкальных файлов нет, каждый браузер работает по своим собственным алгоритмам и они несколько отличаются друг от друга, поэтому при воспроизведении музыки с помощью внедрения в HTML код страницы могут возникать проблемы. Но как Вы знаете, все проблемы решаемы!

Технология проста, создается файл проигрывателя, чтобы он не нагружал сайт или сервер выбираем технологию которую будем использовать: JavaScript, jQuery, AJAX . На основе выбранной технологии разрабатываем скрипт для нашего сайта и вставляем на сайт. Скрипт создается в зависимости от того, что Вам нужно: автоматическое воспроизведение фоновой музыки на сайте или управляемый посетителем плеер. Далее создаем папку в корне сайта для музыки и загружаем в нее аудио файлы.

Или как альтернативный сопсоб можно создать плеер по флеш-технологии (Flash), такой плеер будет смотреться более эффектно. Правда выйдет дороже и тяжелее для сайта (повысит время загрузки страниц сайта).

2 способ.

Используя возможности HTML и браузера можно вставить на сайт плеер или фоновую музыку. Технология так же проста: создается HTML5 код с тегом "audio" и этот код прописывается в сайт, а когда пользователь заходит на сайт он видит минимизированный плеер, посетитель нажимает кнопку плэй или автоматически начинает играть фоновая музыка. Вид плеера будет зависеть от браузера с которого зашел посетитель, но функциональность останется стандартной: кнопки Play, Stop, Next, Prev, Volume. Выглядит плеер с HTML кодом вот так:

Cам код для вставки выглядит так:

Как вы могли заметить команда "controls autoplay" включает автопроигрывание музыки как только посетитель заходит на сайт.

Альтернативный вариант HTML кода это тег "bgsound", это вообще не использовать визуальный плеер, при посещении сайта начнет играть музыка на сайте, но регулировать громкость, поставить на паузу и т.д. пользователь не сможет. Настройка громкости воспроизведения звукового файла настраивается в самом коде.

Форматы звуковых файлов для проигрывания музыки на сайте могут быть: WAV, AU, MIDI, MP3, OGG (расширения). Музыкальные файлы загружаются на сайт, либо используются ссылки на те сайты, где располагается звуковой файл, главное, чтобы он находился в открытом доступе.

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

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

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-элемент используется для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка имеет следующий вид:

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

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

Скачать name.mp3

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

Элемент используется для добавления нескольких медиа-ресурсов для и . Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

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

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