705 Знаете ли вы, что если ваш браузер поддерживает HTML5, то вы можете творить невероятные вещи. Например, легко сделать музыкальный плеер с помощью jQuery скриптов и вашей смекалки. Поехали.
ПримерСкачать
Использование:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//Инициализация плагина $('body').ttwMusicPlayer(myPlaylist, {options}); //Вы можете определить следующие опции: { currencySymbol:'$', buyText:'BUY', tracksToShow:5, autoPlay:false, ratingCallback:function(index, playlistItem, rating){ //немного логики для рейтинга, например через ajax } } |
Создаем плейлист. В плейлисте используется тот же формат, что и в jPlayer (массив объектов) пример:
|
1 2 3 4 5 6 7 8 9 10 11 |
{ mp3:'mix/1.mp3', oga:'mix/1.ogg', rating:4.5, title:'Some song title', buy:'http://www.codebasehero.com', price:'0.99', duration:'4:28', artist:'Artist Name', cover:'images/cover.jpg' } |
Вот и все. Эра HTML5 пришла.
Добавлено: Плеер был обновлен 18 июля 2011 года. Добавлена поддержка браузеров IE7 и IE8.
Линк на пример не рабочий
Благодарим. Исправили.
autoPlay:true не работает (((
понимаю что авторы не вы и т.д
не работает mp3 (не играет потоковое радио)
если не указывать в плейлисте oga то вообще не реагирует на нажатия.
основа данной фигни плеер jplayer на котором по идее должно работать и mp3 и другие а в firefox / opera не работает.
Сам пример работает у вас в указанных браузерах?
Нет! даже готовый пробный скрипт. то есть html с уже подключенными скриптами не работает когда в плейлисте вставляю ссылку на mp3 трансляцию или даже на mp3 файл который кидаю на сервер...
То есть не тронутые скрипты с сайта jplayer не работают в firefox просто не играет музыка и плеер не запускается... так же и в opera... вот в ie и google chrome работает... но большинство рынка за firefox он популярнее, проще говоря лучше и почти вся дола посетителей сайта будет с браузером firefox (проблема не в браузере!.)
Вот Вам моя версия. Универсальный HTML5 аудио / видео плеер с определением кодеков, автоматическим выбором контента, поддержкой воспроизведения потокового аудио и видео, плюс описание на Русском
она же платная )