Как вставить аудио на сайт, обзор сервисов
+4
Как вставить аудио на сайт, обзор сервисов
Хотели вставить музыкальную композицию в свой сайт-блог или в любую публикацию? Этот обзор расскажет вам о сервисах предоставляющие такие возможности. Большинство сервисов предоставляют воспроизведение через безопасный тег object который разрешен везде в отличии от iframe.


muzicons.com — не закачивает файлы с компа, вставка аудио по прямым ссылкам на файл или через встроенный поисковик tagoo.ru, выглядит так:
Как вставить аудио на сайт, обзор сервисов

http://video.yandex.ru требует регистрации на Яндексе. Закачать аудиофайл и получить код плеера, например:
Как вставить аудио на сайт, обзор сервисов

www.jetune.ru в полной мере работает только для юзеров России. Чтоб выложить трек, надо на сайте найти (без регистрации) или закачать своего исполнителя (с регистрацией), кликнуть на конкретный трек и получить код плеера:
Как вставить аудио на сайт, обзор сервисов

http://pleer.com загружай или ищи на сайте музыку и получай код плеера, известен всем:
Как вставить аудио на сайт, обзор сервисов

flv-mp3.com крутой конструктор как аудио так и видео плееров на базе uppod, рекомендую:
Как вставить аудио на сайт, обзор сервисов




Некоторые файлообменники имеют аудиоплееры для mp3-файлов

divshare.com Регистрируемся. Жмем «Upload new file», загружаем трек. Клик на «dashboard» (вверху), появится файл. На него правой кнопкой мыши, выбираем «share», копируем «Embed Playlist» и вставляем:
Как вставить аудио на сайт, обзор сервисов

box.net после закачки файла при клике на shared выдаст ссылку типа www.box.net/shared/zf1uk007vy

Учимся "ловить код на плеер"
Поняв принцип, можно забыть о подобных сервисах, которые часто закрываются, удаляют файлы, меняют условия и т.д.
Код для вставки музыки в блог состоит из двух главных компонентов — флеш-плеер (файл *.swf в виде http://../player.swf) и аудиофайл (в виде http://../song.mp3) — остальное HTML, то бишь буковки.

Для того чтобы получить исходный код плеера кликните в браузере проинспектировать элемент на поле рядом с плеером.
Далее увидим код примерно такой:

<object data="http://какойто_сайт/player.swf" type="application/x-shockwave-flash" width="240" height="64">
<param name="movie" value="http://какойто_сайт/player.swf">
<param name="menu" value="false">
<param name="scale" value="noscale">
<param name="flashvars" value="src=http://какойто_сайт/song.mp3&autostart=no">
</object>

Вот его и вставляем на сайт, простой пример вот такой:






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

Как вставить аудио на сайт, обзор сервисов

Media Element – это аудио- и видеоплеер одновременно, который написан на чистом HTML5 и CSS. Более старые браузеры поддерживаются проигрывателями Custom Flash и Silverlight, которые, в свою очередь, похожи на API HTML5 MediaElement.

Также, плеер имеет несколько оформлений и предлагает плагины для таких популярных платформ, как WordPress, Drupal, Joomla и др.
Сайт: http://mediaelementjs.com/

Как вставить аудио на сайт, обзор сервисов

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

Speakker является кросс-браузерным, имеет резервный Flash для старых браузеров и 2 различные кнопки для установки светлого или тёмного оформления.
Сайт: http://www.speakker.com/

Как вставить аудио на сайт, обзор сервисов

При помощи HTML5 и Flash, SoundManager 2 обеспечивает надежное межплатформенное аудио под единственным легким API javascript (на 10 Кбит).
Сайт: http://www.schillmania.com/projects/soundmanager2/

Как вставить аудио на сайт, обзор сервисов

audio.js является внутренней библиотекой javascript, которая позволяет везде использовать тег HTML5 audio. Он использует родной audio, где это возможно, и невидимый флэш-плеер для поддержки audio в других браузерах. Плеер также обеспечивает последовательный html UI браузерам, которые используют стандартные стили CSS.
Сайт: http://kolber.github.com/audiojs/

Как вставить аудио на сайт, обзор сервисов

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

Не можете? Представляем вам XPlayer - плеер, обладающий всеми этими качествами. Не верите? Посмотрите демо и убедитесь сами!

Для реализации Flash режима в программе использован бесплатный проигрыватель Uppod

Сайт: http://xplayer.su/ru/home


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