Вход в систему



banner

NX audio player

 
Lynx аватар

В какой то момент нашей команде понадобился простейший flash-аудо-плеер. Мы рассмотрели различные варианты готовых решений, но они не подошли, и тогда мы решили создать свой собственный плеер. На деле это оказалось довольно простой задачей – необходимо было просто «прикрутить» собственный GUI к объекту Sound.

Теперь о том какие требования к плееру мы предъявляли и как готовые решения соотносились с этими требованиями. Основным требованием была простота и в качестве результата хотелось получить нечто визуально-схожее с плеером проекта «ВКонтакте», при этом плеер должен был иметь минимальный размер swf-файла (не более 10-20kb), подключаться через тег embeb (без необходимости использования различных JavaScript-библиотек), не требовать создания плей-листов и не кешировать данные без необходимости (закачка mp3 должна была происходить только после нажатия кнопки Play), также дополнительным плюсом могла бы стать и минимальная версия flesh-плеера, необходимого для его работы. В качестве первого варианта мы рассмотрели плеер Uppod. К сожалению данный плеер «проиграл по основным позициям» – его размер был более 100kb (результат того, что это все-таки видео, а не аудио-плеер) и от его назойливого плей-листа практически невозможно было избавиться, также данный плеер требовал flash-плеер 9-ой версии. Единственным плюсом этого плеера (тут он рассматривается только в роли аудио-плеера) была возможность использования скинов (в наборе даже имелся скин в стиле плеера «ВКонтакте»). Далее был рассмотрен плеер с ресурса premiumbeat.com. В принципе данный плеер оказался вполне подходящим, но основным его недостатком было отсутствие скинов. Затем были расмотрены WordPress Audio Player и XSPF Web Music Player. Эти плееры также не подошли, но их «открытость» (плееры были opensource-проектами) и подтолкнула нас на создание своего собственного решения. После недолгих раздумий мы принялись за работу и результат вы можете теперь увидеть сами. Первое, что необходимо отметить – проект плеера был создан в Adobe Flash CS5, поэтому он может не открываться в более ранних версиях этого продукта. Что в итоге получилось? А получился:

  • открытый плеер с необходимым оформлением,
  • размером swf в 3kb (если использовать не растровый шрифт, а шрифт по умолчанию, то размер сократиться до 1kb),
  • плеер подключается через простой embeb и/или object и не требует каких-либо JavaScript-библиотек,
  • не нуждается в составлении плей-листов,
  • начинает подгрузку только после нажатия Play и
  • использует 7-ую версию flash-плеера (хотя его можно собрать и под 6-ую версию, для этого достаточно просто выбрать другую версию в настройках проекта и пересобрать его). Версии 1.0.2 уже требуется 8-ая версия flash-плеера,
  • может управляться JavaScript'ом.

На последок хотим отметить, что исходниках плеера вы не найдете никаких классов и ничего в стиле ActionScript3 – так было сделано специально – никаких усложнений.

Загрузка:



Пример:

P.S. В данном примере отражены 2 поведения при проигрывании, которые реализованы на проекте «ВКонтакте»: 1) при переключении на другой трек, проигрывание текущего трека останавливается (одновременно проигрывается только 1 трек); 2) после проигрывания текущего трека, начинается проигрывание следующего трека (автопереход).

Player 1 / Track title: Ehren Stowers - Both Worlds (Tom Colontonio Remix)
Player 2 / Track title: Offer Nissim Feat Maya - For Your Love (Sied Van Riel Remix)
Player 3 / Track title: track-3.mp3
Play Player 1 | Stop Player 1
Play Player 2 | Stop Player 2
Play Player 3 | Stop Player 3
Прикрепленный файлРазмер
nx_audio_player.swf2.96 кб
track.mp31.01 Мб
track-2.mp31.18 Мб
track-3.mp3782.13 кб
track-big5.mp35.75 Мб
nx_audio_player-v.1.0.0.zip556.92 кб
nx_audio_player-v.1.0.1.zip557.11 кб
nx_audio_player-v.1.0.2.zip2.96 Мб
 

Комментарии

avenew аватар

Помогите пожалуйста установить

Очень понравился плеер. Но извините, так и не понял как его прикрутить?

Скачал исходники. Не могли бы вы дать мануал, как вставить плеер на страницу, и как прописать путь к треку на хостинге?
Заранее спасибо!

Lynx аватар

RE: Помогите пожалуйста установить

В архиве имеется пример в файле index.html. По сути что требуется? Плеер - это файл nx_audio_player.swf, вам необходимо разместить его на своем сервере. Далее на свою страницу вы вставляете код плеера:

<embed width="500" height="40" src="путь_к_плееру" flashvars="soundfile=путь_к_треку" type="application/x-shockwave-flash" bgcolor="#ffffff" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed>

и это собственно все.
P.S. Для его использования не требуется ни исходники ни Adobe Flash.

IgorZaz аватар

Класс!

Да! Вот это законченный классный виджет! Спасибо!
P.S. Хотя законченный ли? Ведь если вещь хорошая, то это как ремонт - можно только остановить улучшение, но не закончить)))))

Lynx аватар

RE: Класс!

Лучше уже не будет: этот плеер и так «выдающийся» по многим параметрам (размер, простота и д.р.). Я делал его (и обновлял) для собственного проекта в котором этот плеер является практически его основой.

Dread аватар

У меня в примере нет автоперехода

У меня в примере нет ни автоперехода, ни js управления...нито ни другое не действует...Скажите в чем может быть проблема?

Lynx аватар

RE: У меня в примере нет автоперехода

Все просто: политика безопасности ограничивает возможности локальных flash. Вам необходимо запускать index.html под localhost'ом (любым локальным веб-вервером). Вообще, для веб-разработчика, это не проблема, а простому пользователю такая возможность в принципе и не требуется.



Рейтинг@Mail.ru Rambler's Top100