JPlayer - Воспроизведение mp3 файлов по ссылкам OnClick

Question

JPlayer - Воспроизведение mp3 файлов по ссылкам OnClick

0

Привет, мне нужна небольшая рука с этим скриптом, он отлично воспроизводит файлы MP3 из файла GETSONG.php, но мне нужно отправить значение (id песни) обратно в файл getsong.php во время воспроизведения mp3, у меня есть немного проблем с его работой, и мне нужно использовать ссылку OnClick. Когда я нажимаю эту ссылку, она пытается изменить песню, но похоже, что идентификатор значения не передается.

Например, значение, которое мне нужно передать из OnClick, равно id = 101

Это моя ссылка:

<a href="javascript:void(0);" onclick="my_string('id=101')" > Next Mp3</a>

Вот мой javascript:

<script type="text/javascript">
var my_string
$(document).ready(function(){

readMP3('test.mp3');// play one mp3 if document is loaded

my_string = function(string_play) {
     dataString_id = string_play;
 readMP3($(this).val(dataString_id));

return true;
}
////////////////////////////////////////
function readMP3(_src){
 $("#jquery_jplayer_1").jPlayer("destroy");

 $("#jquery_jplayer_1").jPlayer({
    ready: function () {
        var data = $.ajax({
            type:'POST',
          url: "getsong.php",
          data: {'ui': _src },
          data_value: {'ui': _src },
          async: false
         }).responseText;

        var string = data.split('|');
        $(this).jPlayer("setMedia", {
            mp3: string[0]
        }).jPlayer("play");

        $('#artist').html(string[1]);
        $('#songname').html(string[2]);
    },
    ended: function (event) {  
        var data = $.ajax({
            type:'POST',
          url: "getsong.php",
          data: {'ui': _src },
          data_value: {'ui': _src },
          async: false
         }).responseText;

        var string = data.split('|');
        $(this).jPlayer("setMedia", {
            mp3: string[0]
        }).jPlayer("play");

        $('#artist').html(string[1]);
        $('#songname').html(string[2]);
    },
    swfPath: "js",
    supplied: "mp3"
}); 

}
})
</script>

Пожалуйста, ПОМОГИТЕ, спасибо.

AJ152 06 янв. 2014, в 01:24

Источник

Теги:

php

javascript

jquery

onclick

jplayer

1 ответ

Ещё вопросы

Mauno Vähä · Answer 1 · 2014-01-05T22-13-00.000Z

Кажется, что вы используете jQuery, я бы сделал захват id используя атрибуты данных, которые действительно удобны, и обработчик щелчка следующим образом:

Пример привязки при добавлении html при первой загрузке:

HTML:

<a href="#" class="next-mp3" data-id="101">Next Mp3</a>

JavaScript:

$(document).ready(function(){

    // your code here...
    // readMP3('test.mp3'); 

    // Click handler for next songs
    $('.next-mp3').click(function(e) {
        e.preventDefault();

        // using $(this).data("id"); will return 101 or any other value

        alert("my next mp3 id: " + $(this).data("id"));

        // your code here...
        // readMP3($(this).data("id"));

    });
});

Удаленные части кода для простоты, добавьте их, как вам будет угодно.

Вот JsFiddle, чтобы увидеть это в действии: http://jsfiddle.net/9gCW2/5/

Пример привязки при добавлении html динамически (после загрузки страницы):

HTML:

<a href="#" class="next-mp3" data-id="101">This link will work only after 3 seconds..</a>

<p>Above link will work after 3 seconds..</p>

JavaScript:

$(document).ready(function(){

    // Adding some dummy data after 3 seconds
    setTimeout(function() {

        // Dynamically added link
        $('<a href="#" class="next-mp3" data-id="102">Link 2</a>').insertAfter('p');

        // Binding click handlers
        $(document).on('click', '.next-mp3', function(e) {
            e.preventDefault();

            alert("link id: " + $(this).data("id"));
        });

    }, 3000);

});

Вот JsFiddle, чтобы увидеть это в действии: http://jsfiddle.net/9gCW2/4/

Обработчик работает, когда ссылка находится на HTML-странице, он запускает следующий mp3-файл для воспроизведения, но при нажатии на ту же ссылку в массиве результатов mysql он не будет работать, и в результате mysql выводится полный код: <a href="#" class="next-mp3" data-id="101">Next Mp3</a>
Хорошо, первоначальный вопрос был неясен по поводу этой проблемы, поэтому я сделал так, как будто это сделано для данных, которые загружаются при первой загрузке страницы, я обновил свой код, чтобы он содержал пример, как связывать динамически загружаемые клики. Это помогает?