Как я могу воспроизвести связанный с аудио файл в jPlayer, по клику? - PullRequest
Новая
       50

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

1 голос
/ 07 февраля 2012

Я пытался решить эту проблему, посмотрев руководство пользователя для 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, который я уже установил, не ломая плеер.

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

Ответы [ 2 ]

2 голосов
/ 03 апреля 2015 
        mp3: $(this).attr("data-mp3"), 
        oga: $(this).attr("data-ogg")

будет немного лучше, чем 

        mp3: $(this).data("mp3"), 
        oga: $(this).data("ogg")
1 голос
/ 07 февраля 2012

Я думаю, что самым лучшим способом было бы включить 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");
});
...