как я могу воспроизвести связанный аудиофайл в jPlayer по щелчку?

Я попытался решить эту проблему, посмотрев руководство пользователя для jPlayer и через ответы на аналогичный вопрос в Stackoverflow, но, к сожалению, мои способности к javascript таковы, что я не могу реализовать предложенный ответ.

Я успешно разместил jplayer на своем сайте, стилизовал его и внедрил плейлист без особых усилий. Вот javascript (фрагмент - удалены посторонние лишние песни):

$(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"Opening (The Crows)",
                mp3:"../../audio/mp3/01-Opening_The Crows.mp3",
                oga:"../../audio/ogg/01-Opening_The Crows.ogg"
            }       
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window"
        });

    });

Помимо автоматически сгенерированного плейлиста, я также хочу, чтобы одни и те же аудиофайлы можно было воспроизводить через отдельные текстовые ссылки в других местах страницы. Вот HTML-код (опять же, обрезанный только для ссылки на одну песню):

<a class="track" href="../../audio/mp3/01-Opening_The Crows.mp3">Opening (The Crows)</a>

Я понимаю, что мне нужно вызвать функцию воспроизведения jplayer, щелкнув «.track» в качестве события, как в пример уже связан, но я не могу включить этот код в скрипт jplayer, который я уже настроил, не сломав плеер.

Любые предложения высоко ценятся (предпочтительнее те, которые объясняют причины решения, поэтому я могу извлечь уроки из проблемы).


audio jquery mp3 playlist jplayer
person shngrdnr    schedule 06.02.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

я думаю, что самым аккуратным способом было бы включить URL-адреса файлов MP3 и OGG в вашу разметку, например:

<a class="track" 
   href="javascript:;" 
   data-mp3="../../audio/mp3/01-Opening_The Crows.mp3" 
   data-ogg="../../audio/ogg/01-Opening_The Crows.ogg">
   Opening (The Crows)</a>

тогда ваш javascript может передавать оба формата для максимальной совместимости браузера:

$("a.track").live("click", function(e) {
    e.preventDefault();

    $("#jquery_jplayer_1").jPlayer("setMedia", 
        { 
            mp3: $(this).attr("data-mp3"), 
            oga: $(this).attr("data-ogg") 
        })
        .jPlayer("play");
});
person Lloyd    schedule 06.02.2012
comment
Я не боюсь. При нажатии ссылка просто вела себя как обычная ссылка mp3 (Firefox - "ожидание видео"). Я пытался добавить скрипт как в виде отдельного кода, так и в оригинальном скрипте jplayer на странице, но, боюсь, без особого удовольствия. Возможно, я все еще неправильно включаю скрипт с точки зрения синтаксиса - есть мысли? - person shngrdnr; 07.02.2012
comment
упс! я забыл вызвать preventDefault, чтобы предотвратить поведение тега <a> по умолчанию.. это помогает? Я отредактировал свой ответ - поиграйте со скрипкой, чтобы увидеть ее в действии. - person Lloyd; 07.02.2012
comment
Все еще нет радости, Ллойд. Используя приведенный код, при нажатии на текстовые ссылки jplayer теряет только свою дорожку продолжительности песни - кроме этого ничего не происходит, что я вижу. К сожалению, страница Fiddle дает мне только ошибку 502 bad gateway на странице результатов. Спасибо за помощь до сих пор - это все определенное грустное лицо. - person shngrdnr; 07.02.2012
comment
вы получаете 502 ошибки на jsFiddle, когда их серверы перегружены - это не имеет ничего общего с кодом.. продолжайте пробовать.. как только вы увидите, что код работает и поиграл, может стать более очевидным, почему ваш собственный код не работает работающий. - person Lloyd; 07.02.2012
comment
если возможно, разместите или напишите мне ссылку на ваш сайт.. вам нужно тривиальное, обычное требование - мы разберемся. - person Lloyd; 07.02.2012
comment
Cheers Lloyd - дайте мне знать, поиграйте с Fiddle, и я посмотрю, что смогу понять. Если хуже будет еще хуже, я загружу то, что у меня есть, и передам вам ссылку. Немного расстраивает, зная, что это простое требование, и невозможность разобраться в нем, большое спасибо, что терпели меня. - person shngrdnr; 07.02.2012
comment
теперь вы можете использовать Fiddle - у меня он отлично работает без ошибок 502 - person Lloyd; 07.02.2012
comment
Интересно - после того, как вы попробовали Fiddle, кажется, что проблема не в основном коде, а в коде jplayer в заголовке страницы. Я загрузил свою незавершенную работу здесь - Ллойд, было бы здорово, если бы ты мог заглянуть и сообщить мне, что ты думаешь, когда сможешь. Тем временем я собираюсь еще раз взглянуть на сайт jplayer и посмотреть, может ли он предложить какие-либо рекомендации. - person shngrdnr; 07.02.2012
comment
Привет, Ллойд - извините, я должен был указать на проблему - ссылки, по которым я хочу активировать музыку, находятся на панели с горизонтальной прокруткой под основным окном просмотра. Ссылки выделены серым цветом. Намерение состоит в том, чтобы ссылки проходили по страницам, к которым относится музыка (это HTML5-версия Flash-проекта), но ссылки не работают. Извините еще раз, моя оплошность, что я не указал на это раньше. - person shngrdnr; 08.02.2012
comment
Я понял, что это то, что вы имели в виду. Ссылки рабочие - в плейлисте jPlayer и текстовые ссылки обведены серым цветом. - person Lloyd; 08.02.2012
comment
В каком браузере вы тестируете? - person Lloyd; 08.02.2012
comment
Хм - проверено в Chromium и да, вы абсолютно правы, Ллойд. Ну, ладно, теперь это полная загадка. Я попробую протестировать на другом устройстве с Firefox - возможно, это проблема с плагином. Извините, что доставил вам столько хлопот ради такого результата... - person shngrdnr; 08.02.2012
comment
обновил мой ответ .. это было потому, что ваши теги a.track были ссылками href на файлы ogg, и мы передавали их как mp3 в javascript. - person Lloyd; 08.02.2012
comment
Ллойд, это великолепно - большое спасибо за то, что выдержали меня через это, и приношу свои извинения за то, что я мог направить вас в неправильном направлении в одном (пару?) моменте. Теперь, когда с этим разобрались, я могу перейти к устранению проблем с IE CSS и т. д. — вещам, которые могут разочаровывать, но на самом деле я имею хотя бы малейшее представление о них. Еще раз ура - Шон - person shngrdnr; 08.02.2012
comment
не беспокойся! Я кодирую с помощью мультимедиа jPlayer / HTML5 каждый день, так что это не проблема. Что касается CSS - я чувствую вашу боль! Я чертовски презираю IE.. - person Lloyd; 08.02.2012
comment
Бог - написание CSS для IE. Как пьяный, оставшийся в конце вашей вечеринки - вы просто знаете, что для того, чтобы выгнать их за дверь, вам придется уговаривать, умолять, кричать, это повредит вашу спину и оставит вас в полном угаре. Я не могу понять, почему MS просто не кусает пулю и не выпускает браузер, соответствующий стандартам. Если бы они потратили хотя бы часть тех денег, которые тратили на рекламные щиты IE повсюду, на реальную разработку... ‹/rant› - person shngrdnr; 08.02.2012
comment
Я не могу заставить это работать с вышеуказанным. Актуально ли это спустя 7 лет? - person James Deadman; 11.03.2019

arrow_upward
2
arrow_downward 

        mp3: $(this).attr("data-mp3"), 
        oga: $(this).attr("data-ogg")

было бы немного лучше, как

        mp3: $(this).data("mp3"), 
        oga: $(this).data("ogg")
person Steven Sarkisian    schedule 02.04.2015
comment
Похоже, это должно быть опубликовано как комментарий к ответу @Lloyd, а не здесь как ответ. Пожалуйста, рассмотрите возможность его рассмотрения. - person Chun; 03.04.2015