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

Сейчас частенько можно встретить веб-ресурсы, на которых размещаются коллекции аудио-записей, воспроизводимых с помощью 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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-08-19
> Spruto.com добавит не помешало бы

Ссылка, конечно, интересная, но к данному посту отношения не имеет :-)
Комментатор
Комментарий добавил(а): Dmitrey
Дата добавления: 2014-08-19
Spruto.com добавит не помешало бы
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-08-14
> На счет того, что мешает. Если бы фон был однородным по цвету, то да. А так какой цвет не задай у шрифта, всё равно часть букв не видны. По этому и нужен был фон самого плеера.

Как я уже писал, фон плеера можно задать через параметры кода вставки или с помощью html-вёрстки. В последнем случае, вам никто не мешает подложить под плеер картинку-фон.

> По поводу шрифта - можно ли параметры задавать? Размер, к примеру или сам шрифт?

Нет. И на это есть причины:
- размеры шрифта продиктованы расположением других элементов плеера;
- в плеере используется один из трёх стандартных шрифтов.

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

Как-то так.
Комментатор
Комментарий добавил(а): Сергей
Дата добавления: 2014-08-14
На счет того, что мешает. Если бы фон был однородным по цвету, то да. А так какой цвет не задай у шрифта, всё равно часть букв не видны. По этому и нужен был фон самого плеера. Спасибо за помощь.
По поводу шрифта - можно ли параметры задавать? Размер, к примеру или сам шрифт?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-08-13
Хм... А что мешает сделать текст такого цвета, чтобы он не сливался с фоном?

Цвет фона для флеш-ролика можно задать в коде вставки:


<param name="bgcolor" value="#ffffff" />


Если надо что-то более сложное, то придётся использовать html-верстку.
Комментатор
Комментарий добавил(а): Сергей
Дата добавления: 2014-08-13
Понятно. В принципе картинку можно поставить бэкграунтом под плеер. Не сложно, в общем. Тогда вот такой вопроc -не подскажите как задать цвет самому плееру? У Вас по умолчанию стоит прозрачный "transparent". В идеале задавать цвет и его прозрачность -просто при таком раскладе, как сейчас текст названия песни теряется если поставить плеер на картинку. По этому и нужно задать цвет самому плееру. В итоге должна получиться полупрозрачная полоска идущая поперек картинки с названием песни. Самое оно. Так можно сделать?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-08-13
> Можно ли ему задавать бэкграунд с указанными размерами?. Проще говоря ставить свою картинку? Нажал на изображение - играет. Нажал повторно, не играет. Или в данном случае это сложно реализовать?

Такая возможность отсутствует. Можно только изменять цвет элементов плеера, но не более.
Комментатор
Комментарий добавил(а): Сергей
Дата добавления: 2014-08-12
Здравствуйте. Плеер хороший. Ничего лишнего. Но вот такой вопрос. Можно ли ему задавать бэкграунд с указанными размерами?. Проще говоря ставить свою картинку? Нажал на изображение - играет. Нажал повторно, не играет. Или в данном случае это сложно реализовать?
Комментатор
Комментарий добавил(а): Тока
Дата добавления: 2014-06-23
Спасибо, почитаю, если получится - хочу добавить стоп-эффект для минивидеоплееров на мой сайт
Комментатор
Комментарий добавил(а): Тока
Дата добавления: 2014-06-23
param name="wmode" ни при чем - отображение плеера - поверх или под окном, но как происходит переключение плееров?
Добавить комментарий:







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

Идиот-тест

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

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