Простенький MP3 плеер на сайт

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

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

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

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

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

Демо:

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

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

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

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

<object width="25" height="20" data="uploads/flash/singlemp3player.swf?file=uploads/flash/sound.mp3& amp ;backColor=c0c0c0&amp;frontColor=ffffff&amp; repeatPlay =false&amp;songVolume=100" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="src" value="uploads/flash/singlemp3player.swf?file=uploads/flash/sound.mp3& amp ;backColor=c0c0c0&amp;frontColor=ffffff&amp; repeatPlay =false&amp;songVolume=100" />
<param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer" />
</object>

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

<script type="text/javascript" src="Путь к файлам/js/jquery/jquery.js"></script>
<script type="text/javascript" src="Путь к файлам/js/jquery/jmp3/jquery.jmp3.js"></script>

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

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
		// default options
		$(".mp3").jmp3();
		// custom options
		$("#mysong").jmp3({
			backcolor: "000000",
			forecolor: "00ff00",
			width: 200,
			showdownload: "true"
		});
	});
// ]]></script>

Опции в настройках аналогичны Flash версии.
Сам аудиофайл прописывается так <span id="mysong" class="mp3">sound.mp3</span>
Особое внимание стоит обратить на id и класс он должен совпадать c указанными в скрипте, распространенная ошибка пользователей при вставке нескольких аудиофайлов на странице, дважды указывают id (это уникальный идентификатор), т.е для другого файла он должен отличатся, класс нужно повторять.

Вот собственно и все..

P.s На этой страничке функциональна только Flash версия, проигрывателя.
Сайт автора плагина http://www.sean-o.com/jquery/jmp3/

15:36
637
RSS
Нет комментариев. Ваш будет первым!
Загрузка...