Два скрипта для проигрывания музыки на сайте, я уже публиковал ранее(DewPlayer и mp3 Flash Player) и как оказалось, они пригодились многим. С тех пор прошло немало времени, появились новые плееры с разлиными возможностями. Чтобы не публиковать несколько записей записей, решил сразу сделать подборку с скриптов mp3-плееров, которые можно вставить на ваш сайт, либо использовать в каком-либо веб-приложений или дополнений к чему либо.

1. niftyPlayer

Главное преимущество скрипта, это его легкость – всего 4 кб.

легкий скрипт mp3 плеера

Использование плеера

Для того чтобы встроить плеер на нужную страницу, необходимо воспользоваться этим кодом:

1
2
3
4
5
6
7
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="38" id="niftyPlayer1" align="">
  <param name=movie value="niftyplayer.swf?file=betty.mp3&as=1">
  <param name=quality value=high>
  <param name=bgcolor value=#FFFFFF>
  <embed src="niftyplayer.swf?file=betty.mp3&as=1" quality=high bgcolor=#FFFFFF width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
  </embed>
</object>

file=betty.mp3 – это, соответственно, путь и название проигрываемого файла.

as=1 – этот параметр отвечает за autostart

Кроме того, можно легко настроить внешний вид плеера, изменив соответствующий цвета в коде.

И конечно нужно не забыть подключить сам скрипт, т.е. js-файл с плеером.

<script type="text/javascript" language="javascript" src="niftyplayer.js"></script>

Более подробную инструкцию и документаций можно найти на официальном сайте NiftyPlayer.

2. Flash Mp3 Player

Более крупный вариант плеера – из преимуществ стоит отметить наличие плейлиста и настройки цвета внешнего вида.

бесплатный flash mp3 плеер для вставки на сайт

3. jPlayer

Доступен в разных вариант, как с плейлистом, так и без.

jquery скрипт Mp3 плеераjquery mp3 player для вставки музыки на сайт

4. Audio.js

Главный плюс это легкость интеграция плеера на страницу. В Header страницы прикрепляется js, а сам плеер вставляется с помощью кода, такого вида:

1
<audio src="/mp3/juicy.mp3" preload="auto" />
jquery html5 mp3 player

5. Yahoo mp3 Player

Симпатичный плеер от Yahoo.

скрипт Mp3 плеера от yahoo

6. Epplayer

Плеер с плейлистом и поддержкой разных скинов.

mp3 player script

7. Simple Flash Mp3 Player

Легкий и минимально оформленный скрипт Mp3-проигрывателя.

простой Mp3 плеер для сайта

8. Flash Mp3 Player

Навороченный скрипт от Flabell. Тут и плеилист и выбор артиста, описание альбома и другие фишки.

многофункциональный скрипт Mp3-плеера для вставки на сайт

9. WordPress Audio Player

Доступен в виде самостоятельного плеера, а так же в виде плагина для WordPress.

плагин mp3-плеера для wordpress

UPDATE: +2 скрипта

10. SCM Music Player

js_player

SCM Player – выделяется от других плееров двумя главными функциями. Во-первых плеер предоставляет возможность переходить по страницам сайта и прослушивать при этом музыку, без всяких прерываний и перезагрузок (например, как музыка ВКонтакте). Во-вторых плеер можно прикрепить в самых верх/низ страницы, откуда будут доступны все кнопки для управления музыкой. Кроме этого, SCM Player имеет множество настроек, несколько готовых скинов и, конечно же, поддерживает крупные плейлисты.

scm player js

Использование

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

11. ttwMusicPlayer

музыкальный плеер js

Красивый плеер на основе HTML5 & JavaScript. Пример с использованием, доступен на страничке плеера.

Обновлено
Подробнее

ArtsLab

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

4gray artslab artslabinfo