Jplayer 6.x - 2.x | Drupal 6 | Автопереключение аудиотрека(плеера) на следующий в single режиме.

Аватар пользователя meloff meloff 19 сентября 2012 в 20:33

Здравствуйте!

Есть у меня идея создания сайта, в который пользователи могли бы загружать свои аудиотреки, которые сортировались бы по жанрам, популярности и т.д. И в течении нескольких месяцев, с переменным успехом, я над этим сайтом работаю. Появилась проблемка, решение которой я никак не могу найти.. Знаний php и js хватает только для копипаста чужих кодов Wacko поэтому взываю к вашей помощи.

Перепробовав все возможные версии jplayer, я остановился на неоффициальной, 6.x версии, работающей с библиотекой 2.x от mwsam.. Почему - потому что выводит время трека до проигрывания файла и хорошо отображает процесс загрузки. Общего у этой версии с 7.x-2.x больше, чем с 6.x-1.x, так что если у вас есть готовое решение для версии 7.x, то оно с большой вероятностью подойдет и мне. На 7ой друпал не могу перейти, т.к. в моем проекте используется модуль, которого нет под 7 версию.. но и в седьмом друпале в jp данный функционал тоже не реализован.. В общем суть проблемы.

Нужно чтобы при окончании проигрывания трека, включалось проигрывание следующего трека так, как это выглядит к примеру на soundcloud. Перепробовав массу версий jp я так и не нашел реализаций данного функционала. Есть возможность переключения трека на следующий, если эти треки в одном плейлисте, т.е. внутри одного jp-type-playlist, но для jp-type-single такой функции нет. В поисках ответа на данный вопрос я перелопатил кучу информации и нашел два кода jplayer.js под версию 6.x-1.x с вроде как реализованным переключением на след. трек. Вот первый jplayer.js, написанный неким Derek Duoba а вот второй jplayer.js, автор которого your mother и они схожи. У Derek'а Duoba есть свой сайт, ссылка на который упоминается внутри этих js файлов. На этом сайте, при окончании воспроизводимого трека, без проблем воспроизводится следующий. Вот мне нужно добиться приблизительно того же. Пробовал вставлять его jplayer.js, но он функционирует как обычный и не воспроизводит следующий плеер при окончании. Есть еще подозрение на то, что все муз файлы, выводимые на его странице являются объектами плейлиста плеера, который висит вверху страницы, как такое реализовать у меня точно нет идей. Smile Если это так, то уже получается что-то похожее на beatport, у которого один главный плеер вверху страницы, и все файлы, ниже, при нажатии, передаются в него. Было бы конечно шикарно реализовать такой вид страницы, но я уже смирился с тем что знаний для этого у меня недостаточно, так что проще сделать souncloudподобный проект.

Сейчас пока что пробую воткнуть в js 6.x-1.x от mwsam код, который позволяет переходить на след. трек в режиме плейлиста, т.к. видимо mwsam портировал его с js версии 7.x-2.x beta1, в котором не было такой возможности. В последнем js 7.x-2.x из песочницы данная функция уже присутствует. Если в 6.x версии она был реализована посредством функции onSoundComlete, то в 7.x уже с помощью вот этих изменений. И пытаюсь в процессе понять как сделать автоматическое переключение между плеерами по завершении проигрывания трека. По идее эта функция дожна быть похожа на функцию переключения треков внутри плейлиста.. но я не знаю как это прописать.

Помогите пожалуйста. Smile

Комментарии

Аватар пользователя Worth Worth 19 сентября 2012 в 22:16

Наверно вы хотите найти какую-то js-функцию, которую бы вы вызвали и проигрывался следующий трек - так вот, скорее всего её не будет. Дело в том, что их js скорее всего ориентирован на оперирование одним конкретным полем с одним проигрывателем - это было бы логично, по крайней мере. Соответственно, вам надо оперировать многими полями, которые находятся у вас на одной странице - это очень легко реализовать своей js-функцией, которая бы вызывалась после проигрывания трека и просто через jQuery имитировала бы клик на следующее поле.

Аватар пользователя meloff meloff 20 сентября 2012 в 11:03

Нет.. я уже понял что такой функции просто так не найти, поэтому рассматриваю любые возможные варианты. Эта самописная функция должна быть прописана в jplayer.js?
Я уже думал как такое реализовать, но не знаю.. Причем просто +1 к id плеера не прокатит, так как это реализовано в функции включения следующего трека в плейлисте, потому что на страницу, к примеру, может выводиться 3 плеера с id="164", id="678" и id="386". Не имею ни малейшего представления как должна выглядеть эта функция. Может кто помочь с написанием или пример привести? Wink

Аватар пользователя Worth Worth 23 сентября 2012 в 12:57

В jQuery можно использовать порядковый номер элемента. Так же там можно использовать невероятное число готовых перечислений и циклов. В вашем случае можно выйти по дивам вверх на несколько уровней через .parent() (лучше использовать .parents("класс_дива_которым_обернуты_все_песни_вашей_ноды"), потом запустить цикл по дочерним дивам через .children().each(function({ })), и в них уже $(this).find("класс_дива_с_кнопкой_play_песни").click()

Аватар пользователя meloff meloff 24 сентября 2012 в 14:04

Да, я уже нашел решение ковыряясь в jplayer.js сайта http://testsite.inyourspeakers.com/. Пришлось несколько видоизменить, т.к. у меня другая структура выводимой страницы. Потом придется опять адаптировать под вывод views Smile Сначала у меня идет поиск необходимых данных таким образом:

var nextPlaylist = $(player).closest('.node').nextAll('.node').find('.jp-playlist');
var nextURL = $(nextPlaylist).find("a").attr('href');
var nextWrapper = $(nextPlaylist).parent().get(0);
var nextPlayer = $(nextWrapper).find('.jp-jplayer');

Далее, при окончании плейлиста идет переключение на следующий найденный плеер и враппер

if (playerSettings.continuous == 1) {
                                $(player).bind($.jPlayer.event.ended, function() {
                                // TODO: Combine all ended event in one location.
                                if(!$('li:last',  $('#'+playerId+'_playlist')).hasClass('jp-playlist-current')) {
                                                Drupal.jPlayer.next(wrapper, player);
                                                }
                                else {
                                        Drupal.jPlayer.play(nextWrapper, nextPlayer);
                                }
                                });
                        }

Что-то в этом роде.. В общем по вопросу практически все получилось, сейчас работаю над передачей параметров громкости в следующий плеер. Огромное Вам спасибо, что ответили и навели на правильный путь! Smile