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

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

А вот и сам аудио-плеер (точнее, аудио-плееры):

Как видите, он минималистичен, но свои функции выполняет. Встраивается он довольно просто - обычный код вставки флеш-объекта + переменные с именем музыкальной композиции и путь к mp3-файлу, который надо воспроизвести (позднее я добавил ещё несколько необязательных переменных для настройки внешнего вида плеера). Чтобы ещё более упростить процесс вставки, прилагается генератор кода вставки. Вам остаётся только заполнить поля формы, скопировать сгенерированный код и вставить его на свою веб-страницу (или использовать в скрипте, выводящем аудио-записи).

Генератор кода для вставки аудио-плеера:

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

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

И под конец перечислю доступные параметры для настройки плеера.

Основные параметры:

- path_mp3 - путь к mp3-файлу (фактически, это единственный обязательный параметр, а все остальные параметры необязательны);

- name_mp3 - название звукового файла.

Дополнительные параметры:

- cbf - цвет фона кнопки;

- cb - цвет рисунка на кнопке;

- cif - цвет фона индикаторов;

- ci - цвет индикаторов;

- cbuf - цвет индикатора буферизации;

- ct - цвет текста;

- auto - автоматически начинать воспроизведение звукового файла сразу же после загрузки страницы (этот параметр может принимать значения yes или no).

Буду очень рад, если кому-то данный плеер окажется полезным.

UPD 2012-03-27: установленный в одном плеере уровень громкости, будет действителен и для всех других плееров + некоторые мелкие изменения.

UPD 2012-05-11: длинное название mp3-файла автоматически превращается в бегущую строку (бегущая строка работает только при наведённом курсоре мышки, чтобы зря не тратить ресурсы компьютера и не устраивать на странице хаос из бегущих строк).

UPD 2013-03-10: Теперь размеры плеера можно изменять.

Автор: admin

Дата добавления: 2012-05-11

Просмотров: 36488

Рейтинг поста: +68-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Яповчанка
Дата добавления: 2020-01-21
не уважаемый(ая) mde,не тактично "СОВАТЬ СВОЙ НОС В ЧУЖОЙ ВОПРОС"
Считаю,что Я вправе ответить вам,потому как ответ был адресован на Мой вопрос!!!
И если уже советовать Кому свалить отсюда,так это Вам.
Вы здесь гость...и вести себя нужно соответственно,а не" блистать умом"
P.S...не трудитесь отвечать,не разводите флуд ..))
Комментатор
Комментарий добавил(а): mde
Дата добавления: 2020-01-17
что значит гадкий html5 если у вас образование 8 классов, и вы не сведуете в IT - свалите и не делеайте выводов в том чего ваш мозг не может разобрать. Свою тупость, с умностью в другой области не мешайте
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2019-11-29
Здравствуйте. Рад вас видеть :-) Я уже с 2016 года вынужден пользоваться этим гадким HTML5 - других вариантов нет :-( А если вопрос про плеер, то смысла нет: там есть готовое решение для воспроизведения аудио и видео. Как-то так...
Комментатор
Комментарий добавил(а): Яповчанка
Дата добавления: 2019-11-29
Здравствуйте.,Дмитрий!
Как же быстро летит время...все меняется..))
В связи с этим вопрос.
Планируете ли вы все,что до этого мы "мучили" здесь на языке AS3 ,переходить на HTML?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2019-09-21
Увы, такое не предусмотрено.
Комментатор
Комментарий добавил(а): Михаил
Дата добавления: 2019-09-20
Скажите, а как сделать что б полоска с длиной трэка появлялась не с низу а с правой стороны, что б уменьшить высоту плейлиста. Или уменьшить расстояние между трэками?
Комментатор
Комментарий добавил(а): Sergey
Дата добавления: 2017-04-19
Немного о SoundHost.org

SoundHost – это онлайн-платформа (мобильная и веб), которая позволяет слушать любимую музыку онлайн, следить за творчеством артистов и за музыкальными событиями.

Основные характеристики:

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

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

Еще на SoundHost можно (Загружать, скачивать, продавать, слушать музыку, вставка музыки на любой сайт)
Много возможностей - быстрая загрузка треков, скачка, удобное прослушивание треков, Украинский, Русский и Английский языки, возможность коментировать и одобрять треки и много чего другого...

Музыкальный аудио хостинг SoundHost




Best music sharing site its SoundHost.org
You can upload, download and listen music and more other...
(Free new music)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-11-05
Вадим, вы не совсем правы: для Андроида 4х есть оф. флеш-плеер, хотя дальнейшие разработки плееров под Андроид, как я понимаю, прекращены. И, вероятно, надо искать альтернативы.
Комментатор
Комментарий добавил(а): Вадим
Дата добавления: 2015-11-05
Спасибо за плеер! На планшетниках с OS Андроид на работает, жаль! Есть выход?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-05-13
Никак. Каждый плеер полностью автономен и с другими не связан.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Страница 1 из 14: 12314
Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика