Как вставить музыкальный flash плеер на сайт для проигрывания файлов mp3 формата.
Автор: Андрей Краснокутский
Дата: 2011-08-22 Устанавливаем музыкальный mp3 плеер на сайт.
Сегодня мы разберемся, как установить на сайт простой музыкальный flash плеер, проигрывающий музыкальные файлы в формате МР3. Впрочем, это могут быть не только музыкальные файлы, но и любые звуковые файлы формата МР3.
Большинство музыкальных плееров, требуют предварительно конвертировать звуковые файлы из формата MP3 в формат Flash, дополнительно обрабатывать звуковые файлы. Предлагаемый Вашему вниманию плеер лишен этого недостатка, т.е. МР3 файл воспроизводится напрямую, без всяких конвертаций и лишних «заморочек». Плеер очень просто устанавливается на сайт, имеется возможность изменить цвет плеера, например нужно подогнать под дизайн сайта, работает во всех браузерах. А вот так выглядит и работает музыкальный плеер:
А теперь давайте разберемся, как установить такой музыкальный плеер на сайт. Первое, что нужно сделать, так это скачать архив с плеером. Скачали, теперь разархивируйте этот архив. Создайте в корне сайта отдельную папку (напрмер audio) и положите туда файл плеера: audio_player.swf , хотя собственно говоря, положить его можно куда угодно на сайте, главное правильно прописать путь в коде Листинга 1.
Теперь копируем код Листинга 1:
Листинг 1.
<script type="text/javascript">
AC_FL_RunContent( 'type','application/x-shockwave-flash','data','audio/audio_player.swf','id','audioplayer1','height','24', 'width','288','movie','audio/audio_player','flashvars','playerID=1&autostart=yes& bg=0xffffff&loader=0xFFFF00&border=0xff8b00&text=0x945100&leftbg=0x99CDFF& lefticon=0xffffff& righticon=0xffffff&slider=0x99CDFF&rightbg=0x99CDFF&soundFile=audio/potap.mp3', 'quality','high','menu','false','wmode','transparent' ); //end AC code
</script><noscript><object type="application/x-shockwave-flash" data="audio/audio_player.swf" id="audioplayer1" height="24" width="288">
<param name="movie" value="audio/audio_player.swf"></param>
<param name="FlashVars" value="playerID=1&autostart=yes&bg=0xffffff&loader=0xFFFF00& border=0xff8b00&text=0x945100&leftbg=0x99CDFF&lefticon=0xffffff& righticon=0xffffff&slider=0x99CDFF&rightbg=0x99CDFF& soundFile=audio/potap.mp3"></param>
<param name="quality" value="high"></param>
<param name="menu" value="false"></param>
<param name="wmode" value="transparent"></param>
</object></noscript> |
И вставляем в то место web-страницы, где Вы хотите, чтобы отображался плеер.
Внимание важно! Участок кода Листинга 1:
AC_FL_RunContent( 'type','application/x-shockwave-flash','data','audio/audio_player.swf','id','audioplayer1','height','24',
'width','288','movie','audio/audio_player','flashvars','playerID=1&autostart=yes&
bg=0xffffff&loader=0xFFFF00&border=0xff8b00&text=0x945100&leftbg=0x99CDFF&lefticon=0xffffff&
righticon=0xffffff&slider=0x99CDFF&rightbg=0x99CDFF&soundFile=audio/potap.mp3',
'quality','high','menu','false','wmode','transparent' ); //end AC code
</script><noscript><object type="application/x-shockwave-flash" data="audio/audio_player.swf"
id="audioplayer1" height="24" width="288">
и участок кода:
<param name="FlashVars" value="playerID=1&autostart=yes&bg=0xffffff&loader=0xFFFF00&
border=0xff8b00&text=0x945100&leftbg=0x99CDFF&lefticon=0xffffff&
righticon=0xffffff&slider=0x99CDFF&rightbg=0x99CDFF&
soundFile=audio/potap.mp3"></param>
должны быть прописаны в одну строчку и без пробелов!
В этих же строках можно изменить цвет плеера, изменяя параметры шестнадцатеричных значений цветовой палитры RBG.
В данном примере (Листинг 1) указано, что плеер должен автоматически проигрывать музыкальную композицию при открытии web-страницы. Далеко не всегда это нужно, да и многих посетителей сайта это может просто раздражать. Изменяется это просто в параметре: autostart=yes&замените yes на no и тем самым Вы отключите автозапуск плеера.
Еще интересная функция - Автоповтор - это когда музыкальная композиция проигрывается без остановки по кольцу. Включить функцию Автоповтор очень просто, в 3 строке в "FlashVars" в значении "value=" дописываем в самом конце следующий код - &loop=yes и автоповтор музыкальной композиции гарантирован.
Пропишите в 1 и 2 строках кода Листинга 1, реальный путь до плеера на Вашем сайте. В примере указано: audio/audio_player.swf, т.е. плеер лежит у меня в папке audio. У Вас это может быть другая папка, так что указывайте правильный путь.
В эту же папку audio положите музыкальный файл в формате mp3 и укажите название своего файла здесь: soundFile=audio/potap.mp3"В данном случае проигрывается файл potap.mp3 , который лежит в папке audio.
Вот собственно говоря и все, загружаем на сайт папку audio, обновляем на сервере web-страницу и слушаем музыкальное сопровождение.
Всего Вам доброго.
Читайте так же другие наши материалы.
Что такое Черная и Белая оптимизация сайта?
Как издать (выпустить) собственную электронную книгу?
Учимся делать сайт за 11 уроков. Практическое руководство.
Диагностика ошибок выдаваемых сервером.
Устанавливаем наблюдение за сайтом.
Зарабатывайте вместе с нами.
Просмотров: 33532
ничего, но лучше бы такой плеер, как на фейсбуке или дноклассниках!!! это было бы улетно!
или что-то типо winamp!!!
жду такого урока!!
Спасибо! Очень хороший и нужный урок!
Скажите пожалуйста у вас есть урок по добавлению видео проигрывателя на сайт?
Очень неудачный плеер, т.к. отсутствует регулировка громкости!
Не разобрался как установить музыкальный mp3 плеер на сайт, но мелодия прекрасная!
Спасибо, класссно работает, хороший и простой плеер. мне понравилось!!!
Андрей, большое Вам спасибо !
А зачем использовать так сказать старый флэш?!
Когда мир постепенно весь переходит на HTML5.
А используя старый флэш, мы стимулируем использовать старые ишаки (IE6-IE8) не лучше ли обновиться до новых браузеров и использовать по полной пятое пришествие HTML?!!!
С HTML5 не все так просто и безоблачно как Вам кажется и произойдет это внедрение не так быстро как хотелось бы
чё то у меня ни чего не получилось! может конечно руки кривые, ни flasf ни мелодии нет!
Ребята, а как сделать так, чтобы по окончании осуществлялся переход на след. трек?
В этом плеере никак, здесь жетко прописывается конкретный mp3 файл
А как это можно реализовать?
Аркадий, листингом называется участок кода, который вставляется в код web-страницы.
сложнеовато для чайника))
я копировал ивтавил иплеер в папке ана сайте его нет
Делал через Dreamweaver. Получилось, все работает в программе, а в браузере плеера совсем не видно((((
Очень интересная статья, но я пользуюсь способом попроще http://www.vkblog.org/kak-postavit-musiku-na-sait.html
Братцы.
Как установить и проверить работоспособность "на столе".
Как тогда будут прописаны пути к audio_player.swf и к ==.mp3
Очень надо.
на каком языке написан код??
Скачал а дальше формат файла не поддерживается ничё зделать не могу...(
А что же Вы хотите сделать??? Если Плеер, тогда читайте урок выше, там все подробно расписано...
Ни фига не работает - сто раз проверил - но УВЫ.... Что-то Вы здесь забыли написать... , есть вероятно какие-то конфликты с чем-то...
у меня сайт на дле и что то плеер не запустился, сделал всё как описано в сатье
Млин, пишет что-то синтаксическую ошибку.
|