Стильный аудиоплеер для сайта


Содержание

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

Аудио-плеер на основе технологии HTML5. Он состоит из следующих элементов: название трека, автор (название группы), обложка трека, основные элементы управления (воспроизведение / пауза, перемотка назад / вперед), два ползунка (интерфейс jQuery): ползунок громкости и ползунок длительности трека, а так-же плейлист со списком доступных песен.

Посмотреть Demo или Скачать архив с дистрибутивом

Шаг1. HTML-код

Как обычно , мы должны включить несколько файлов в раздел Head :

Далее делаем первичную html разметку плеера, со всеми элементами:

Шаг 2 . CSS

Превращаем голые модели HTML в красивый плеер, для этого необходимо определить стили CSS для каждого элемента.(css/styles.css)

Шаг 3. JavaScript

Красивый плеер, который ничего не делает – бесполезно. Чтобы сделать его настоящим произведением искусства, необходимо заполнить ее событиями и функциями. Во-первых, инициализируем несколько переменных (js/main.js):

Добавляем ещё несколько общих функций для работы работы с аудио:

Добавляем обработчики событий для кнопки управления. Воспроизведение / Пауза:

Для того, чтобы обратиться к другой песне в списке воспроизведения, необходимо остановить воспроизведение текущей композиции, выбора следующего (или предыдущего) объекта в плейлисте, и повторно инициализировать элемент Audio. Кнопки Вперед / Назад:

И ещё несколько функций работы с плейлистом:

Шаг 4. Изображения

Все использованные в оформлении плеера картинки упаковыны в sprite файл: Nav.png

Изображения для треков хранятся в папке /Data.

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

Вместо radio-t.com/downloads/rt_podcast139.mp3 пишем адрес нашего аудиофайла или подкаста.

И вам надо скачать сам скрипт плеера и разместить в папку player.

Скачать плеер и пример скрипта можно здесь

Аудиоплеер на HTML5

Можно указать адрес аудиофайла или ссылку аудиопотока, например, радио.

Можно дать несколько файлов браузеру на выбор, он сам найдет, что поддерживает. Если он ничего не поддерживает, можно предложить текст, напр. «Ваш браузер не поддерживает аудиоплер».

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

12 премиум аудио плееров на HTML5

С развитием HTML5 все большей популярности набирают такие форматы, как H.256, OGG и всем известный FLV. Аудио на HTML5 радует производительностью и его легко добавить на сайт, но такие плееры не поддерживаются старыми браузерами. Впрочем, большинство пользователей пользуется современными, поэтому добавить на свой сайт такой плеер будет хорошей идеей.

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

sPlayer

sPlayer использует возможности HTML5 и очень богат на JavaScript. С ним вы сможете добавить на сайт музыкальный плеер с множеством функций (HTML5 хранилище, читалка тэгов, импорт файлов, работа не в сети и много другого).

HTML5 Audio Player with Playlist

Адаптивный аудио плеер с огромным количеством возможностей. Дизайн можно легко настроить с помощью CSS.

Chameleon HTML5 Audio Player

Chameleon выделяется возможностями по кастомизации внешнего вида. Можно менять фон, слайдеры, таймер, буфер, строку поиска, текст (шрифт, размер, цвет), фон плей-листа и так далее. Благодаря таким возможностям вы сможете настроить внешний вид плеера под дизайн своего сайта.

AudioBox

Ещё один аудио плеер с множеством функций. Он локально хранит плей-листы, «вытягивает» из песен метаданные и тому подобное.

Universal HTML5 Audio Player

Это универсальный аудио плеер, так как использует Flash player на старых браузерах и HTML5 на новых. Также работает на android и ios. Позволяет накладывать кастомные звуки на музыку.

ZoomSounds

Если вы ищете современный, стильный адаптивный HTML5 аудио плеер, то ZoomSounds для вас.

Responsive HTML5 Audio Player Pro

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

Total Control HTML5 Audio Player

The Total Control HTML5 аудио плеер — это плагин jQuery для воспроизведения музыки на сайте. Имеет 3 темы на выбор и интерактивный плейлист.


tPlayer

tPlayer это многофункциональный адаптивный HTML5 плеер, который работает на большинстве браузеров. Имеет неограниченный плей-лист. В плеере можно настроить автовоспроизведение, смешивание песен, повтор. Также встроена возможность поделиться песней в социальный сетях (Facebook, Twitter, Google Plus, Tumblr).

Tiny Music Player

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

HTML5 Mini Music Player with Playlist

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

Panzer

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

InstantShift — Web Designers and Developers Daily Resource.

HTML5 is sure to be a big hit this year as far as web design trends go, and rightfully so. It’s new, exciting, easy to understand and better than anything that has come before it. Up until recently, we have had to navigate a grey area in terms of compatibility and definition, and as a result, many of the early adoptions of HTML5 have been partial or complete disasters.

The first thing to understand is where HTML5 ends and CSS3 begins. HTML5 is just the markup – a set of standards that define how a document should be structured and how browsers should interpret it. Rather than shouldering all the responsibility for presentation and functionality, HTML5 gets back to basics, allowing us to tap into APIs and native browser functionality, while looking to CSS to create the visual look and feel. In the end we are left with a straight-forward and simplified language for creating websites and applications.

Media Element

MediaElement is an audio an video player which is written in pure HTML5 and CSS. Instead of offering an HTML5 player to modern browsers and a totally separate Flash player to older browsers, MediaElement.js upgrades them with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API.

MediaElement offers Plugins for WordPress, Drupal, Joomla, jQuery, BlogEngine.NET, ruby gem, and plone.

SoundManager 2

SoundManager 2 makes it easier to play audio using JavaScript.

Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single JavaScript API.

Speakker

Speakker comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.

Цукерберг рекомендует:  Си программирование - Помогите пожалуйста Cи

audio.js

audio.js is a drop-in javascript library that allows HTML5’s tag to be used anywhere.

HTML5 Audio Player

A very lightweight audio player written in HTML 5 with JQuery and CSS3. No Flash! Developed by Scott Andrew.

jPlayer

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions.

jme is an HTML5 audio / video development kit with Flash Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.

HTML5media

To make HTML5 video and audio tags work in all major browsers, simply add the single line of code somewhere in the of your document. That’s it! There is no second step!

Uppod HTML5 Player

Uppod HTML5 Player lets you build your own audio player. All you had to do is to create a player of your choice using option panel and get the respective HTML code.

MooTools HTML5 Audio Player

MooTools HTML5 Audio Player is a cross browser audio player made with HTML5 and the Mootools JavaScript framework.

HTML5 Audio Player Bookmarklet

HTML5 Audio Player Bookmarklet adds audio player to play linked audio files on any page. Supported file formats depend on the browser used. Use it on any page which has links to downloadable audio files, for example, you can play music stored in your Dropbox – visit dropbox.com/m then navigate to folder with music files and use this bookmarklet.

Accessible Audio Player (AAP)

OIPlayer jQuery plugin

OIPlayer jQuery plugin is a HTML5 audio and video player with fallback to Java and Flash.

OIPlayer ‘attaches’ itself to all video and/or audio tags it encounters. Besides the general configuration of the plugin itself, it uses for each individual tag the attributes the respective tag has like poster, width, controls, autoplay etc.

HTML5 Music Player Plugin

HTML5 Music Player is a jQuery plugin which lets you play mp3 as well as ogg files.

Degradable HTML5 audio and video Plugin

This is a useful wordpress plugin for html 5 audio and video allows you to embed media for native playback in supported browsers and offers a graceful degradation for unsupported browsers.

Tutorial: How to Build HTML5 Audio Player with jQuery

This tutorial is written by NeutronCreations team about Building a Custom HTML5 Audio Player with jQuery. In this tutorial you’ll run through the code to understand how it works, covering a few caveats along the way.


Аудио плеер на HTML \ JS?

Дело вот в чем. На сайте необходим аудио плеер. Требования к функционалу следующие: поддержка плейлиста, и соответственно кнопки с навигацией по нему (след. трек \ предыдущий трек), а также регулировка громкости. Желательно иметь возможность сортировки плейлиста, ну и кастомизации (необходимо добавить кнопочку купить к каждому треку).

Плееров в сети довольно много, но вот с поддержкой плейлистов — уже меньше, а уж с возможностью легко это как-то кастомизировать кажется ещё меньше. Увы раньше не приходилось работать с аудио на сайте, и вот теперь стою перед дилеммой — придется ли разбираться, и писать это дело самому на JS, или же всё же есть готовый вариант, который меня устроит? Иными словами если кто-то сталкивался с похожими требованиями — можете подсказать качественную наработку?

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

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

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

MediaElement

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

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

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

Speakker

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

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

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

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

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

SoundManager 2

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

jplayer

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

audio.js

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

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

H Аудиоплеер с плейлистом на javascript в черновиках

Здравствуйте, уважаемые читатели. Сегодня хотелось бы рассказать Вам о том, как сделать простейший кастомный аудиоплеер с плейлистом. Будем делать его, используя HTML5 и Javascript. В результате, получим вот такой простенький плеер. По внешнему виду похожий на плеер vk.com

Самый простой способ для воспроизведения аудиофайлов в браузере — использование тэга
audio

Атрибут controls отображает стандартные элементы управления, такие как кнопка play/pause, mute.

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

Чтобы воспроизвести аудио, используя Javascript, достаточно лишь две строки кода:

Тут создается объект Audio, им-то мы и будем оперировать. Вот краткий список общих методов и свойств:
.play() — запустить проигрывание аудиофайла;
.pause() — поставить на паузу;
.duration — длина дорожки (в секундах). Duration становится доступен только после срабатывания события ‘loadedmetadata’;
currentTime — получить/установить момент проигрывания звуковой дорожки;

Полный список доступен тут
Так как данная реализация всего-лишь фронтенд пример, то добавим аудио файлы в локальную папку files (для удобства и наглядности) и захардкодим их названия:

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

Теперь создадим класс Player с такими методами:
init — инициализация плейлиста;
loadFile — загрузить дорожку, при запросе на запуск, только если она еще не было загружена.
play — запустить/поставить на паузу дорожку;
playNext — запустить следующую дорожку;
playPrev — запустить предыдущую дорожку;
setTitle — установить название файла в шапке плеера;
setProgress — установить процент на сколько заполнен прогресс-бар;
countProgress — посчитать в процентах количество проигранного времени;
runProgress — запустить отрисовку заполнения прогресс-бара;
stopProgress — сбросить процент заполненности прогресс-бара;
pickNewProgress — навигация по файлу с помощью клика по прогресс-бару;
toggleStyles — метод для изменения стилей кнопки play/pause и плейлиста;

Далее цепляемся на событие DOMContentLoaded инициализируем наш плеер и вешаем обработчики на элементы управления:

Функция getByQuery() сокращенный вариант document.querySelector():

А вот она в коде:

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

Логика работы плеера очень простая. Мы читаем массив файлов и записываем его в this. Кликнув по дорожке, в плейлисте вызывается метод play. Ему мы передаем индекс файла в массиве. Он подгружает дорожку, используя метод loadFileТолько если дорожка еще не была загружена. Затем метод запускает ее проигрывание. Не забываем и за прогресс-бар. В контексте плеера мы также храним статус (play/pause), индекс текущего файла и переменную с таймаутом. Таймаут мы используем, чтоб раз в секунду (при условии проигрывания файла) мы могли перерисовывать прогресс-бар. Ссылка на демо.

Цукерберг рекомендует:  Вакансии Element group

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

Над статьей работали varog-norman и greebn9k

Устанавливаем простой аудиоплеер для сайта со скриптом и плагином

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

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


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

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

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

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

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

  1. с помощью скрипта, который можно установить на любой сайт;
  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, чтобы уберечь уши посетителей от перепадов громкости, если их наушники или колонки настроены не тихо. А там они уже сами смогут добавить громкость на нужный уровень;
  • Время буфера — аудиофайлы могут быть большого размера да и интернет не у всех быстрый. Если вы знаете, что у вашей аудитории имеется проблемы со скоростью загрузки, то можно поставить задержку перед воспроизведением аудио, во время которой будет происходить загрузка файла. Сколько будет идти эта задержка и выставляется в данном пункте;
  • Шифрование — пожалуй, последний параметр, который стоит включить в данном разделе настроек. Нужно, чтобы посетители не скачивали файлы с сайта какими-то способами, а только слушали их.
Цукерберг рекомендует:  Слайд панели на jQuery

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

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

Основное направление деятельноcти компании –
профессиональная разработка сайтов.

Статьи

Web-дизайн

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


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

Как раз о таком плеере, будет эта статья..

Плеер Single Mp3 player скачать можно по этой ссылке, автор плагина Sean O’s
JqueryMp3plugin здесь

Итак что представляет собой этот плеер.

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

Установка плеера на сайт :

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

Для шаблона можно вставить код (первого примера из демо):

Рассмотрим этот код, самое важное из-за чего у многих не получается вставить проигрыватель,
data:здесь путь к Вашему флешь файлу на сервере (лучше указывать полностью http://www.Ваш_сайт.ru /singlemp3player.swf),
далее идет путь к аудиофайлу: ?file=http://www.Ваш_сайт.ru/sound.mp3 &.
Следующие опции менее важные но интересные:
backColor=c0c0c0& — это определяет цвет фона проигрывателя, представленный в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет,
frontColor=ffffff& — цвет кнопочек на проигрывателе,
repeatPlay=false& — повтор воспроизведения false — не повторять, true — зациклить.
songVolume=100 — громкость проигрывания файла,
showDownload=false — параметр кнопки сохранить файл, true — кнопка есть, false — соответственно кнопки нет.

Список доступных параметов плеера:

  • «filepath»: «», // путь к MP3 файлу (по умолчанию: текущая директория)
  • «backcolor»: «», // цвет фона кнопки проигрывателя
  • «forecolor»: «ffffff», // цвет кнопок
  • «width»: «25», // ширина проигрывателя
  • «repeat»: «no», // зациклить mp3?
  • «volume»: «50», // громкость mp3 (0-100)
  • «autoplay»: «false», // автопроигрывание при загрузки страницы
  • «showdownload»: «true», // кнопка скачать в проигрывателе
  • «showfilename»: «true» // показывать имя файла

Если Вы все корректно сделали то файлы будут воспроизводится, при условии что на устройстве пользователя установлен Flash, для того чтобы файл корректно воспроизводился на большинства устройствах пользователей, необходимо прописать JavaScript файлы, для этого в head страницы вставьте код:

А для инициализации проигрывателя используйте этот код

Аудиоплеер для сайта

Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!

Большое спасибо за вашу помощь и внимательность к нам!

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

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

Отходя немного от темы, хочу внести пару слов о его разработчике, которого зовут Osvaldas Valutis (Освалдас Валютис). Он является в основном разработчиком в области Front-End части, все что связанно с HTML, CSS и JavaScript. Подробнее о нем и о других его разработках, а также проектах, Вы можете прочитать на официальном сайте, который я указал в источниках материала.

Ну, а теперь давайте перейдем непосредственно к самому аудиоплееру для сайта.

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

Уникальность

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

Touch эффект

Пожалуй незаменимая вещь при использовании любым устройством, что мобильным или ПК.

Адаптивный

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

Синхронизация

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

Легкость

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

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

Файл demo.css содержит в себе стандартные стили скрипта, плюс немного дополнения. Файлы reset.css и main.css нужны исключительно для создания дизайнерского образа плеера. По поводу библиотеки jquery я думаю Вам и так все понятно, а скрипт audioplayer.js имеет весь базовый функционал аудиоплеера.

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

По поводу самого скрипта, он имеет множество настроек, все они прописаны на официальном сайте или можно посмотреть в скрипте audioplayer.js.

Чтобы аудиоплеер был активным, нужно его подключить. Для этого после кода HTML, вставляем следующее:

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

Придает стилизацию полосе загрузки аудио записи.

Придает стилизацию кнопкам проигрывания и паузы.

Придает стилизацию отсчета начала проигрывания аудио записи.

Придает стилизацию конца отсчета аудио записи.

Придает стилизацию громкости звука аудио записи.

На этом в принципе все, такой вот получился у меня для Вас материал, надеюсь кому то поможет. Благодарю за внимание, извините что редко получается радовать Вас новым материалом, но ситуацию, надеюсь, Вы поняли. Оставляйте комментарии, если появятся вопросы. Всегда буду рад ответить!)

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих