Html код аудиоплеер для сайта – VideoJS скачать+demo инструкция плейлист бесплатный плеер для сайта HTML5 JS — Вебджем.рф

Аудиоплеер для сайта: инструкция по установке

Здравствуйте, уважаемые посетители.

Если вашему сайту нужен аудиоплеер для сайта, то в данной статье вы узнаете, как его установить на ресурс, используя при этом простой скрипт.

Также рассмотрим вариант плагина, если у вас сайт на WordPress. Ниже вы можете увидеть пример плеера, который установим в данной статье (это вариант без плагина). Можете кликнуть на кнопку «Play» и прослушать трек.

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

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

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

Существует множество решений в данной области, но я вижу 2 распространенных варианта:

с помощью скрипта, который можно установить на любой сайт;
с помощью плагина для движка wordpress.

Второй вариант будет полезен, у кого аудио-подкасты чуть ли не основной тип контента. Теперь давайте установить аудиоплеер на сайт.

Скрипт

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

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

В архиве будут 2 файла. Их нужно загрузить в папку на хостинге. Куда загружать, решать вам, но я предпочел закинуть в папку «audioplayer», которую создал в корневом каталоге сайта.

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

Следующим шагом нужно просто разместить код на страницу сайта, где нужно вывести аудиоплеер.

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

Код размещаем в html режиме конечно же. Проигрыватель будет работать абсолютно на любом сайте, но необходима поддержка flash на компьютере, чтобы им воспользоваться. Поэтому, для страховки вы можете под проигрывателем написать «если аудио не воспроизводится, установите последнюю версию flash плеера». Но, обычно такие ситуации не возникают, так как интернет-браузер всегда предлагает его установить.

В окончании данного способа я покажу, как я произвел установку аудиоплеера в данной статье. Так как сайт у меня на WordPress, то я открыл редактор записи в текстовом (html) режиме и в нужное место вставил ранее предоставленный код.

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

Переходим ко второму плееру, который делается только для сайта на движке WordPress.

к содержанию ↑

Плагин Audio player

На момент написания этой статьи я по каким-то причинам не смог найти этот плагин в интернете. Раньше я его устанавливал через поиск в админ-панели wordpress. Сейчас же его не находит. Поэтому, необходимо вам скачать сам архив плагина, нажав на кнопку ниже.

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

Выглядит он следующим образом: [Audio: имя файла с расширением]

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

Аудиофайл также нужно загружать в определенную папку, а не в любой каталог. Это также выставляется в настройках, к которым мы позже перейдем. По умолчанию в настройках выставлено значение, которое подразумевает расположение аудифайлов в папке «audio», расположенной в корне сайта. Это и нужно сделать — создать в корне сайта такую папку и туда загружать звуковые дорожки. Тут ничего сложного нет. Все делается, как и в предыдущем случае со скриптом проигрывателя.

Переходим к настройкам. Находятся они в пункте «Настройки — Audio player».

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

Начнем с общих настроек. Сначала даю скриншоты, а затем описание всех параметров.

Заменить [ audio ] — синтаксис — параметр необходимо включать и он стоит по умолчанию. Нужно в том случае, если на одной странице аудиоплеер будет использоваться ни один раз;
Заменять все ссылки mp3-файлов — если на какой-то странице вы дали ссылку на мп3-файл, то ссылка преобразуется в аудиоплеер. Полезная вещь, если вы ранее не использовали проигрыватель и все звуковые дорожки давали в виде ссылки на скачивание;

Включить в комментариях — будет ли работать проигрыватель в комментариях? Если необходимо вам это, то ставьте. Может посетители будут делиться каким-то аудио-подкастами;
Интеграция вложений — не разобрался с данным пунктом и его не трогал. Вам он также вряд ли будет, судя по всему. По идее, если вы добавляете аудиофайл, как вложение в сообщение, то вместо вложения будет аудиоплеер и находится он будет в конце записи;
Переместить вложение в начало сообщения — относится к предыдущему пункту и перемещает вложение с конца записи в начало;
Папка аудио по умолчанию — указываем папку, откуда плеер будет загружать файлы. По умолчанию стоит папка «audio», которую мы создали ранее. Можно создать и другой каталог.

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

В настройках параметра канала я рекомендую выбрать параметр «Ничего», чтобы не добавлять плеер в rss ленту.

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

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

В дополнительных настройках мне также не все понятно. Да и использовать там не все нужно.

Что здесь стоит объяснить так это следующие параметры.

Изначальная громкость — так как в данном плеере имеется функция регулятора громкости, то данный параметр выставляет на каком уровне будет находится ползунок громкости при воспроизведении файла. По умолчанию стоит 60%. Я же рекомендую поставить процентов 30-40, чтобы уберечь уши посетителей от перепадов громкости, если их наушники или колонки настроены не тихо. А там они уже сами смогут добавить громкость на нужный уровень;

Время буфера — аудиофайлы могут быть большого размера да и интернет не у всех быстрый. Если вы знаете, что у вашей аудитории имеется проблемы со скоростью загрузки, то можно поставить задержку перед воспроизведением аудио, во время которой будет происходить загрузка файла. Сколько будет идти эта задержка и выставляется в данном пункте;
Шифрование — пожалуй, последний параметр, который стоит включить в данном разделе настроек. Нужно, чтобы посетители не скачивали файлы с сайта какими-то способами, а только слушали их.

На этом настройки плагина закончены. По-моему, он неплохо справляется со своей задачей и его можно использовать.

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

[Audio: http://kostyakhmelev.ru/audioplayer/Tiesto feat. Disco Fries — iTrance.mp3]

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

Используете ли вы в своей деятельности данный вид контента вообще и планируете ли?

Все. Пока!

С уважением, Константин Хмелев!

Аудио-плеер с плейлистом на HTML5

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

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

При открытие и выбора музыки:

Рассмотрим особенности:

1. Легкий в использовании
2. Поддержка плейлиста
3. Изображение на заднем плане
4. Обложка альбома
5. Регулятор громкости
6. Функции для случайного и повторного воспроизведения композиций
7. Работает на всех популярных браузерах
8. Работает в Android и IOS

Если решите добавить свою композицию, то вам поставить в файл index.html, что предоставлен ниже.

Код

{
  «title»: «This Is What You Came For»,
  «author»: «Calvin Harris»,
  «cover»: «files/covers/2.jpg»,
  «background»: «files/backgrounds/2.jpg»,
  «pfile»: «files/music/2.mp3»,
  «duration»: «221»
},

Чтоб понять, что за какие формы отвечает.

«title»: — Название композиции
«author»: — Исполнитель
«cover»: — Обложка альбома
«background»: — Задний фон
«pfile»: — Ссылка на .mp3 файл
«duration»: — Продолжительность композиции в секундах.

Источник: art-ucoz.ru

Как поставить аудиоплеер на свой сайт

Механизм добавления на html страницу внешних объектов, таких как звук и видео, завязан на использовании установкой плагинов для Вашего браузера. Причем, при использовании тега EMBED, браузер открывает внешний объект с помощью того плагина, который у него установлен в данный момент.

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

Давайте посмотрим, ка всё это работает. Как только, Ваш браузер встречает в html коде тег EMBED, то он, подгружает подходящий установленный плагин. Если подходящего плагина не окажется, тогда браузер выдаст сообщение о том, что плагин необходимо установить и предлагает перейти на страницу установки.

Информация о параметрах открываемого объекта и необходимых плагинах, для его открытия, передаётся браузеру через следующие параметры тега EMBED:

align — выравнивание объекта по отношению к окружающему контенту
border — устанавливает размер рамки вокруг объекта
classid — указывает на класс объекта, используя адрес его нахождения
codebase — базовый адрес, по которому будут определяться относительные адреса, указанные в classid, data, archive.
codetype — тип данных, которые использует объект, согласно параметруclassid
data — путь к данными, которые объект будет обрабатывать
declare — объявление объекта
height — высота объекта
hspace — боковые отступы объекта от окружающего контента
pluginpage — адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру
standby — выводит сообщение, пока объект не загрузится
type — тип данных, которые хранятся по адресу, указанному в data
vspace — отступы сверху и снизу от окружающего контента
width — ширина объекта
class — класс тегов, используемых в CSS
dir — направление текста внутри элемента
id — имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей
lang — язык, на котором написан текст внутри htmlэлемента
style — используется для применения встроенных стилей CSS
tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
title — выводит всплывающую подсказку при наведении курсора мыши на html-элемент.

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

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

<embed src="music.mp3" autostart="0" 
  type="application/x-mplayer2" 
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  hspace="10" vspace="10">
</embed>

Давайте подробно разберём, за что отвечает в данном коде каждый параметр.

Итак, тег EMBED, указывает, на то, что на страницу будет добавлен внешний объект. Путь к файлу объекта, указан в параметре: src=»music.mp3″

Сразу отмечу, что когда воспроизводимый файл будет размещён на сервере, то лучше будет, если Вы укажите к нему полный, абсолютный путь, например, http://www.site.ru/music.mp3

Далее, идет размер объекта, в данном случае, плеера. Параметрами width=»350″ height=»50″ указаны ширина и высота плеера.

Параметр autostart=»0″ указывает на то, что по загрузке страницы, плеер будет остановлен.

Тип объекта указан в параметре – type.

В случае, если у браузера не будет установлен плагин для отображения этого объекта, то параметром (pluginspage) браузеру указано, где этот плагин можно взять: pluginspage=»http://www.macromedia.com/go/getflashplayer.

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

Теперь, посетитель сайта, кликая по элементам управления плеера, может прослушать аудио запись и управлять её воспроизведением.

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

Как видите, при использовании тега EMBED звук на страницу сайта добавляется довольно просто. Плеер для страниц сайта, добавляется несколькими всего строчками html кода.

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

В том случае, если изображение плеера будет загружено, сравните, как выглядит плеер в окнах различных браузеров.

Не забудьте правильно указать полный путь к звуковому файлу.

Вот что у нас получилось:

MP3 плеер для сайта

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

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

Установка

1. Скачайте архив и загрузите папку «Player» в корень сайта. Для этого используйте FTP или стандартный Файловый менеджер.

2. Сразу после <body> вставьте следующий код:

Код

3. Добавьте строки в Таблицу стилей (CSS):

Код

@import url(‘/player/player.css’) all;
@import url(‘/player/jquery-ui.css’) all;

4. Прямо перед закрывающим тегом </body> вставляйте следующий код:

Код

5. Добавьте в кнопку воспроизведения код:

Код

id=»Player$ID$»

$RFILE_DIRECT_URL$ — ссылка на MP3

$AUTHOR_SITE$ — ссылка на обложку

Специально для вас я сделал свою версию демо для этого великолепного скрипта. Надеюсь, что моя подборка из восьми треков понравится.

Простой проигрыватель аудио для сайта

Больше не поддерживается, просим нас извинить.

Не спешите покидать нас, предлагаем следующие варианты плееров:

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

Приятно, и к тому же удобно, слушать песню Yesterday группы Beatles. Вот так стандартно выглядит плеер Yraaa.

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

Как поставить на сайт?

Ниже приведен полный код для вставки аудио-записи.

Код

Разбирем код по порядку:

Код

Эту строчку кода желательно использовать один раз на странице и вставить между тегами <head>…</head>.

Код

Это скрипт запуска этого аудио плеера и в скобках распределены атрибуты, давайте по порядку:

1. Это id того тега, в который вставляется музыкальный плеер.
2. Второй атрибут — ссылка на файл песни в формате MP3.
3. Атрибут — название музыкального файла (разрешен HTML).
4. Это ссылка на изображение (подробнее об этом ниже).
5. Длина и ширина изображения для запуска и выключения.

Изображение в плеере:

В коде Вы наткнулись на ссылку, ведущую к изображению http://yraaa.ru/img/audio_image1.png — эта картинка служит для запуска или отключения мелодии. Вот так например можно изменить этот плеер.

10 удивительных аудиоплееров на HTML5

Одной из самых замечательных особенностей HTML5 является потоковое аудио.

Если вы заняты в сфере веб-разработки, то подборка из 10 невероятных аудиоплееров на HTML5 очень вам пригодится.

MediaElement

MediaElement — аудио- и видеоплеер, который написан на чистом HTML5 и CSS. Поддержка старых браузеров выполнена с помощью Flash и Silverlight плееров, которые имитируют HTML5 MediaElement API.
У MediaElement есть много оформлений и поддержка популярных платформ: WordPress, Drupal, Joomla и т.д.

Источник: http://mediaelementjs.com/

Аудиоплеер HTML5 от Эндрю Скотта

Этот плеер достаточно минималистичный, но функциональный. Хорошо подходит, когда нужны плейлисты и модные эффекты!

Источник: http://www.scottandrew.com/pub/html5audioplayer/

Speakker

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

Источник: http://www.speakker.com/

MooTools HTML5 аудиоплеер

Вы используете Mootools на вашем сайте? Если да, то, возможно, вам понравится этот плеер, выполненный на HTML5 и Mootools JavaScript фреймворке. Плеер идеально работает во всех современных браузерах.

Источник: http://simulacre.org/mootools-html5-audio-player/

Универсальный HTML5 аудиоплеер

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

Источник: http://codecanyon.net/item/universal-html5-audio-player

SoundManager 2

В SoundManager 2 задействованы технологии HTML5 и Flash, что делает его очень легким (10 Кб) надежным кроссбраузерным решением для воспроизведения потокового аудио.
Хотите узнать, что можно сделать с помощью Sound Manager 2? Посетите http://wheelsofsteel.net/ для просмотра демо!

Источник: http://www.schillmania.com/projects/soundmanager2/

jplayer

jplayer — jQuery плагин для воспроизведения аудио и видео данных. Его плюсы в очень простом использовании.

Источник: http://jplayer.org/

audio.js

audio.js — javascript библиотека, которая позволяет использовать тэг HTML5 <audio> всюду. В тех браузерах, где есть поддержка этого тэга, он используется по умолчанию, а там где его поддержки нет, запускается flash-эмуляция. При этом в оформлении плеера используются стандартные CSS свойства.

Источник: http://kolber.github.com/audiojs/

Букмарклет аудиоплеера на HTML5

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

Источник:

Html код аудиоплеер для сайта – VideoJS скачать+demo инструкция плейлист бесплатный плеер для сайта HTML5 JS