Как добавить mp3 плеер на свой сайт? Чтобы был, как можно проще, но при этом максимально кастомизировался. Умел проигрывать всякие audio форматы (mp3,wma и т.д.).
Очень просто! Представляю Вам замечательный аудио и видео проигрыватель jplayer.
На сайте разработчика есть множество демо. Если кратко, то плеер умеет практически все. Проигрывать музыку и видео, поддерживает плейлисты, кастомные скины, свои элементы управления. Работает сие чудо на flash, но если браузер "в порядке" и умеет воспроизводить нужный формат из под коробки, то используется только браузер (html5). К примеру Опера не умеет проигрывать mp3, а вебкиты умеют. Полное описание поддерживаемых браузером фич есть в их руководстве
Примеров на сайте великое множество, я же приведу лишь один. Качаем последнюю версию плеера. Подключаем к странице два файла
< script type = "text/javascript" src = "./jplayer/js/jquery.jplayer.min.js" ></ script > < link href = "./jplayer/skin/blue.monday/jplayer.blue.monday.css" rel = "stylesheet" type = "text/css" /> < div class = "jp-jplayer" ></ div > |
по сути для работы плеера нужен только jquery.jplayer.min.js, а css файл всего лишь отвечает за "шкурку". Вы можете легко написать свою.
Далее код
$( '.jp-jplayer' ).jPlayer({ ready: function (event) { mp3: '/music/media.mp3' , }, cssSelectorAncestor: "#jp_container_1" , solution: "flash, html" , swfPath: "/jplayer/js" , supplied: "mp3,wma" , wmode: "window" }); |
Как видите mp3 файл должен лежать на Вашем сервере. Если же вы хотите слушать онлайн бесплатно то можно подключить удаленный файл, по его url
Осталось подключить шкурку
< div id = "jp_container_1" class = "jp-audio" > < div class = "jp-type-single" > < div class = "jp-gui jp-interface" > < ul class = "jp-controls" > < li >< a href = "javascript:;" class = "jp-play" tabindex = "1" >play</ a ></ li > < li >< a href = "javascript:;" class = "jp-pause" tabindex = "1" >pause</ a ></ li > < li >< a href = "javascript:;" class = "jp-stop" tabindex = "1" >stop</ a ></ li > < li >< a href = "javascript:;" class = "jp-mute" tabindex = "1" title = "mute" >mute</ a ></ li > < li >< a href = "javascript:;" class = "jp-unmute" tabindex = "1" title = "unmute" >unmute</ a ></ li > < li >< a href = "javascript:;" class = "jp-volume-max" tabindex = "1" title = "max volume" >max volume</ a ></ li > </ ul > < div class = "jp-progress" > < div class = "jp-seek-bar" > < div class = "jp-play-bar" ></ div > </ div > </ div > < div class = "jp-volume-bar" > < div class = "jp-volume-bar-value" ></ div > </ div > < div class = "jp-time-holder" > < div class = "jp-current-time" ></ div > < div class = "jp-duration" ></ div > < ul class = "jp-toggles" > < li >< a href = "javascript:;" class = "jp-repeat" tabindex = "1" title = "repeat" >repeat</ a ></ li > < li >< a href = "javascript:;" class = "jp-repeat-off" tabindex = "1" title = "repeat off" >repeat off</ a ></ li > </ ul > </ div > </ div > </ div > </ div > |
любой элемент из шкурки можно выкинуть, все будет работать. За то, что именно эта шкурка отвечает за конкретный плеер отвечает опция cssSelectorAncestor, в которую заносим id шкурки. Как я уже писал выше сам скин и не нужен, для функционирования. И если к примеру после инициализации сделать так
$( '.jp-jplayer' ).jPlayer( "play" ); |
то выбранная мелодия сразу запоет. Полный перечень команд смотрите в документации.
Комментарии
Он удобный, быстрый, функционален и красив ;)
(также удобное и быстрое встраивание плеера на любой сайт, форум)