Воспроизведение песни на JPlayer с события onclick - PullRequest
Новая
       26

Воспроизведение песни на JPlayer с события onclick

0 голосов
/ 11 марта 2019

Мне нужно установить ссылки, которые будут отправлять песню на центральный JPlayer.

Например, в магазине, и кто-то хочет сэмплировать трек перед его покупкой, вы нажимаете на ссылку, и она отправляет информацию в JPlayer и начинает воспроизведение указанного трека.

Я видел примеры использования некоторых похожих на приведенные ниже в других вопросах stackoverflow здесь (7 лет), однако не могу заставить его работать.

Обновление: я пробовал ниже, но ссылка ничего не делает.

$(document).ready(function(){
$("#jquery_jplayer").jPlayer({
    swfPath: "../../dist/jplayer",
    supplied: "mp3",
    wmode: "window"
});

$('a[data-mp3]').click(function(e) {
    e.preventDefault();

    // replace #my-j-player by the id of your instance
    $("#jquery_jplayer").jPlayer("setMedia", {
        mp3: $(this).attr("data-mp3"),
        oga: $(this).attr("data-ogg")
    }).jPlayer("play");
});
});

<a href="#" data-mp3="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">TEST</a>

1 Ответ

0 голосов
/ 11 марта 2019

Вот трюк, который вы можете использовать. Вы должны заставить jQuery «слушать» clickEvents на всех ссылках, которые имеют data-mp3 атрибуты: 

<div id='jquery_jplayer'></div> <!--wrapper for jPlayer-->

<a href="#" data-mp3="urlofmp3">
<a href="#" data-mp3="urlofmp3-2">

$(document).ready(() => {

    // initialization of jPlayer
    $("#jquery_jplayer").jPlayer({
        swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.swf",
        supplied: "mp3",
    });

    // add event listener on ALL links that has a data-mp3 attribute
    // and send the url to jPlayer then play
    $('a[data-mp3]').click(function(e) {
        e.preventDefault();

        // replace #my-j-player by the id of your instance
        $("#jquery_jplayer").jPlayer("setMedia", {
            mp3: $(this).attr("data-mp3")
        }).jPlayer("play");
    });
});

Пожалуйста, отметьте это минимальный рабочий пример

...