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



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'ом (любым локальным веб-вервером). Вообще, для веб-разработчика, это не проблема, а простому пользователю такая возможность в принципе и не требуется.

Dread аватар

Ок...на localhost поставил -

Ок...на localhost поставил - все работает. Вот только не понравилось что когда включаешь один трек, а потом другой, то первый то конечно останавливается, но вот загрузка первого продолжается что может тормозить при большом количестве треков. Если по очереди включаешь...)
Кстати еще вопрос. на сайте вконтакте плеер как то сохраняет настройку громкости при переходах по страницам. Каким образом это реализовано?

Lynx аватар

RE: localhost

Отмена загрузки - хорошая возможность. Я тоже хотел ее реализовать, но пока руки не долши. Еще хотел сделать прокрутку кликом по области загрузки.
А по поводу громкости - делается просто. Надо открыть исходники, добавить новое событие, которое при изменении уровня громкости будет посылать на сторону JS величину уровня. И еще добавить возможность управления громкостью из JS. Делается все по примерам уже готовых событий. Делать это я вряд ли пока буду. Тренируйтесь. Для того и нужны исходники, что-бы сделать лучше... По поводу похоже/не похоже: ВКонтакте - это не эталон плеера и я взял/возьму лучшее от всех решений; копирование - ни есть цель данного проекта.

Dread аватар

Ну на самом деле я еще не

Ну на самом деле я еще не видел плееров удобнее чем тот что ВКонтакте. Мне понравился еще Yahoo media player - очень удобный и легко встраивается. Но то что он не работает в Опере - закрывает все его плюсы.
А на счет исходников - я просто в AS не разбираюсь.)

P.S. Так же понравился WordPress Audio Player но я его использовал не на WP и так не смог сделать чтобы треки играли друг за другом и выключались при нажатии на Play на другом треке. Английский знаю плохо. Так что документацию не осилю. Может если вы знаете, подскажете как такое реализовать?

Lynx аватар

RE: новое

В ближайшее время я сделаю себе такой же функционал и как результат размещу нововведение в релизе.



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