аудиоплеер на сайт код
Как создать плеер для сайта на HTML5 и JavaScript
Контент на сайте можно разнообразить с помощью видео или аудио. Учим использовать HTML5 video- и audio-плееры и работать с ними на JS.
Как использовать audio и video в HTML5
Чтобы создать плеер, достаточно такого кода для аудио:
И такого — для видео:
Атрибут controls используется для того, чтобы отобразить элементы управления. Если его не указать, никакого интерфейса не будет: аудиоплеер не будет отображаться, а в видеоплеере просто будет показан кадр из видео или постер.
Обратите внимание, как указан источник. Для видео достаточно прописать атрибут src, а для аудио нужно прописывать дополнительные элементы source, чтобы указать пути и формат файлов. В коде выше добавлено два одинаковых файла, но в разных расширениях — это нужно для того, чтобы прослушать запись можно было на всех устройствах и во всех браузерах, потому что не все из них поддерживают mp3 или какой-то другой формат.
Также внутри плеера можно прописать какой-нибудь текст — его увидят те, у кого не поддерживается HTML5. Правилом хорошего тона считается указание ссылки на скачивание современного браузера.
Вот список атрибутов, которые можно указать для плеера:
Также можно указать высоту и ширину.
Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:
Поэтому мы подключаем JS и пишем свой интерфейс.
Как написать плеер на JS
Плеер на JS работает, как и любой другой интерфейс: пользователь нажимает на кнопки, скрипт отлавливает эти события и вызывает необходимые функции. Прежде всего нужно создать сам интерфейс:
9 скриптов mp3-плееров для вставки музыки на сайт
Два скрипта для проигрывания музыки на сайте, я уже публиковал ранее(DewPlayer и mp3 Flash Player) и как оказалось, они пригодились многим. С тех пор прошло немало времени, появились новые плееры с различными возможностями. Чтобы не публиковать несколько записей, решил сразу сделать подборку с скриптов mp3-плееров, которые можно вставить на ваш сайт, либо использовать при созданий веб-приложения.
1. jPlayer
Миинималистичный скрипт плеера на основе HTML & CSS. Так же доступен в Flash-варианте, который будет использоваться как fallback-вариант в устаревших версиях браузера. Доступен в разных вариантах: для аудио, видео, в комбинаций с плейлистом и без.
2. Audio.js
3. Epplayer
Flash-плеер с плейлистом и поддержкой разных скинов.
4. Simple Flash Mp3 Player
Легкий и минимально оформленный скрипт Mp3-проигрывателя.
5. HTML5 jQuery Audio Player
Плагин плеера для WordPress. Проигрывает mp3 и ogg, работает в современных бразуерах (IE9+, Safari, Opera, Firefox, Chrome) а так же и на мобильных устроиствах. Для встраивания плеера на страницу WordPress необходимо использовать shortcode:
UPDATE: +2 скрипта
6. SCM Music Player
Использование
На главной странице сайта пллера находиться генератор плееера, позволяющий в несколько шагов собрать свою версию плеера. В результате сайт выдаст код, который нужно будет разместить на Вашей страничке.
7. APlayer
Простой и красивый аудио плеер на основе HTML5, поддерживает обложки и плейлисты.
8. React Audio Player
Простой пример с плеером в виде компонента для популярного фреймворка React.
9. ngAudio
ngAudio представялет из себя набор директив и сервисов для проигрывания аудио в рамках приложения для AngularJS.
О сайте
ArtsLab
Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.
Пишем проигрыватель lossless аудио на JavaScript
Добрый день, %username%. Сегодня я хотел бы поделится своим опытом разработки прототипа онлайн lossless аудио плеера.
На сегодняшний день, вряд ли можно кого-то удивить аудио или видео плеером, встроенного непосредственно в веб-страницу. Существующие технологии, библиотеки и API позволяют легко наполнить сайт любым медиа-контентом. Но есть такие люди, которым этого недостаточно (в том числе я). Именно поэтому, как истинному любителю музыки в lossless, мне потребовалось сделать браузерный плеер поддерживающий такой формат аудио, как flac.
К этой идее меня подтолкнула одна статья: Web плеер FLAC.JS (HTML5). Узнав, что есть такой замечательный фреймворк как Aurora.js и декодер формата flac для него, я не смог просто пройти мимо всего этого. Все — подумал я — теперь, когда мой уровень энтузиазма зашкалил, я должен сделать этот плеер. Итак, начнем…
Бекенд
В качестве бекенда у нас будет выступать небезызвестные Nginx и Apache c PHP (куда же без него). Первый будет отвечать за отдачу аудио данных, второй будет выдавать страницу с плеером и обрабатывать запросы Ajax.
Фронтенд
Первым делом нужно продумать весь функционал, который будет поддерживать наш плеер. Самое очевидное это Play/Pause, Next, Prev, полоса буферизации и поиска, громкость, строка названия трека и время. Также хотелось бы реализовать отображение обложки альбомов, плейлисты, поиск по базе аудиотеки и так далее, но я решил пока остановиться на самом основном. Так как с веб-разработкой я сталкивался не часто, то с версткой и дизайном у меня, мягко говоря, не очень.
Вот что у меня получилось в итоге:
Отлично. Необходимый минимум у нас есть. Теперь нужно все это оживить. Поэтому переходим к JavaScript.
Создадим класс Playlist который, как вы уже поняли, будет отвечать за список воспроизведения:
Где list — сам список, current — номер текущего трека, repeatmode — режим повтора (0 — без повтора, 1 — повтор всего списка, 2 — повтор одного трека).
Далее реализовываем все необходимые методы.
Получение текущего трека:
Методы вперед, назад:
И напоследок метод перемешивания списка:
Плейлист у нас есть, переходим к самому плееру. Создадим класс Musica:
В params мы разместим все элементы интерфейса с помощью селекторов JQuery, по переменной pstate мы будем определять состояние плеера (воспроизводит/не воспроизводит), seekstate нам пригодится, когда мы будем реализовывать полосу поиска, а timetype определяет тип таймера (сколько прошло или сколько осталось). Также в этом конструкторе мы сразу повесили обработчики событий на все имеющиеся кнопки.
Фреймворк Aurora.js содержит класс Player, который реализует весь необходимый нам минимум. В нем есть такие методы как play(), pause(), stop(), seek(), а также реализован обработчик событий. Это сильно упрощает нам задачу.
Попробуем реализовать метод инициализации плеера:
Здесь мы загружаем в фреймворк текущий трек из списка воспроизведения, сбрасываем графический интерфейс на значения по умолчанию и подключаем обработчики событий. Этот метод мы будем вызывать каждый раз, когда нам нужно воспроизвести новый трек.
Теперь нам нужно сделать, на мой взгляд, самое сложное: полосу поиска и регулятор громкости. Эти два элемента интерфейса очень похожи между собой (по крайней мере в нашем случае).
Сначала мы подключаем обработчик события mousedown. После этого мы меняем значение progressbar и подключаем еще два обработчика. В первом (mousemove) мы также меняем значение progressbar. Во втором (mouseup) мы отключаем эти два обработчика и вызываем метод фреймворка seek(). Для того, чтобы во время поиска мышкой, progressbar не дергался от события progress, которое мы обрабатываем выше, нам нужен seekstate.
Почти таким же способом делаем регулятор громкости:
Плеер почти готов. Нам только осталось добавить методы play(), netxt(), prev(). В их реализации нет ничего сложного:
Адаптивный аудио плеер на ваш сайт
С выходом HTML5, набирает оборот популярность аудио плееров. Сегодня мы рассмотрим плагин AudioPlayer.js, благодаря которому вы сможете быстро и легко добавить проигрыватель музыки на ваш сайт.
Главные характеристики данного плагина:
Использование
В первую очередь, вам необходимо указать путь к файлу через атрибут src. Пример:
Данный код только загрузит файл, без его запуска. Для запуска нужно нажать на кнопку Play. Другие возможные варианты атрибута preload (none, metadata).
Для автоматического проигрывания файла после загрузки воспользуйтесь атрибутом autoplay:
Для того, чтобы обеспечить одно и то же аудио в разных форматах для разных типов браузеров, используйте следующий код:
Ну а как же запустить плагин? Очень просто. Подключаем jQuery и плагин в HTML:
Также вы можете воспользоваться несколькими дополнительными параметрами. К примеру, classPrefix, который задаст префикс атрибутам класс. Другие возможные опции:
Если же браузер не поддерживает элемент audio, то он будет заменён на:
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.webresourcesdepot.com/responsive-html5-audio-player-with-touch-support/
Перевел: Станислав Протасевич
Урок создан: 28 Мая 2013
Просмотров: 81650
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Создаём аудиоплеер для нашего сайта
До сих пор мне вспоминаются 2000-е годы, когда воспроизведение музыки или видео на сайте было ограниченным. Сегодня же ситуация сильно изменилась, в нашем распоряжении есть такие сайты как last.fm, Youtube.
Как вы уже поняли из названия данного поста, сегодня мы займёмся созданием собственного веб аудио плеера. Если вы занимаетесь подкастингом и хотите создать плеер, который будет вписываться в дизайн вашего сайта, этот урок специально для вас.
Дизайн плеера был позаимствован с сайта Dribbble.
Что нам необходимо
Перед тем как приступить к созданию плеера, нам надо определиться с инструментами, которые мы будем для этого использовать: jPlayer, jQuery и иконки FontAwesome.
jPlayer представляет собой jQuery плагин, так что нам для начала, понадобится скачать jQuery последней версии. Также нам понадобятся иконки для интерфейса плеера.
После скачивания нужных нам библиотек, подключаем их к папке нашего проекта. Пишем код подключения для jquery.js, jquery.jplayer.min.js и таблиц стилей:
Таблица стилей normalize.css предназначена для сброса некоторых CSS настроек браузеров, чтобы наш дизайн был как можно больше универсален. В style.css мы закинем наши собственные стили.
Структура HTML
Теперь давайте приступим к написанию html кода, который нужен для работы плеера. Тут нам необходимо создать общий div контейнер и задать ему В дальнейшем значение данного атрибута мы будем использовать при настройке jPlayer.
Идём дальше и создаём элементы с классами jp-play, jp-pause, jp-mute и jp-unmute, для создания кнопок контроля за воспроизведением аудио. Для начала, я советую вам не экспериментировать с собственными стилями для этих классов, а оставить всё как есть.
Активация аудио плеера
Поскольку нужный нам HTML код уже готов, следующим шагом будет активация плеера в специальном скрипте. В наш пример мы добавим несколько аудио файлов одного и того же выпуска в формате mp3 и ogg. Формат ogg мы можем использовать для кроссбраузерности, особенно для Firefox и Opera.
После добавления данного скрипта, плеер по сути находится в рабочем состоянии. Если мы посмотрим на код страницы, то увидим специально сгенерированный HTML5 тег
Создаём свой стиль
В этой секции мы начнём оформление нашего плеера. В первую очередь, подключим шрифты и уберём подчёркивание у ссылок.
Название аудио
Тут ничего такого особенного менять мы не будем, просто сделаем размер текста немного меньше, чем он есть.
GUI контейнера
GUI контейнеру плеера был задан класс jp-gui. Результат наших преобразований вы можете глянуть в демо. Тут мы применяем градиенты и специальные цвета #f34927, #dd3311. Также обратите внимание на то, что опция position нашего div-а содержит значение relative.
GUI блока управления
GUI блока управления представляет собой кнопки контроля за воспроизведением аудио: пауза, громкость и так далее. Тут мы снова поиграем с шрифтами, сделаем цвет текста белым и добавим тенюшку.
Кнопки воспроизведения и паузы
Расположение данных кнопок мы сделаем абсолютным. Именно для этого ранее контейнер, где они находятся, мы сделали релативным. Таким образом, они будут располагаться согласно позиции своего родительского элемента.
Перемотка и уровень громкости
Данные элементы выглядят абсолютно одинаково, только имеют разный размер. Область перемотки обычно больше, чем область уровень громкости:
Вот и всё. Теперь вы можете насладиться аудио плеером в демо или скачать исходник.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/web-audio-player/
Перевел: Станислав Протасевич
Урок создан: 7 Марта 2013
Просмотров: 62550
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.