Как сохранить потоковое аудио. Различные форматы файлов

Приветствую, Друзья! В этом видео мы продолжим разговор о вставке объектов в HTML-документ.

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

AudioPlayer.setup("папка с файлом/player.swf", { width: 290, initialvolume: 100, transparentpagebg: "yes", left: "000000", lefticon: "FFFFFF" });

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

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

Музыка

Здесь также стоит обратить внимание на ID , который использован для отображения плеера. Следует учесть, что если мы хотим добавить более одной композиции на страницу нам необходимо прописывать новый ID для каждого файла. Например, чтобы добавить еще один файл мы немного изменим ID , примерно так:

Музыка

Ну, вот в принципе и все. Теперь мы знаем, как добавить аудио в HTML-документ. Конечно, существуют и другие способы. Но я считаю в нашем случае этого варианта вполне достаточно.

HTML-справочник и другие материалы можно и нужно скачать !

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

Нам часто задают такой вопрос, музыка на сайте является актуальным и креативным элементом, а способов её воспроизведения много и их не так сложно внедрить. Начнем с того, что каждый пользователь Глобальной Сети использует какой либо браузер для выхода в Интернет, а общей и универсальной технологии воспроизведения звуковых и музыкальных файлов нет, каждый браузер работает по своим собственным алгоритмам и они несколько отличаются друг от друга, поэтому при воспроизведении музыки с помощью внедрения в 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), звук появляется при наведении на пластинку.

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

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

Все браузеры, которые поддерживают тег — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.

Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.

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

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

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

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

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

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

А если браузер вообще не поддерживает тег то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».

Но мы же добрые люди:-) И если пользователь не сможет прослушать музыку, мы дадим её ему скачать. Для этого Вам нужно добавить просто ссылки на файлы. Таким образом у нас получится следующий код:

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

Таким образом пользователь сможет скачать файл:-)

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

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

Всем привет. 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 — только регулятор громкости.

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

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

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

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