0

<script type="text/javascript">
    var url = "http://localhost:8000/api/songs/rock";
    var song;
    var artist;
    var genre;
    var album;
    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json', // added data type
        success: function(res) {
            console.log(res);
            song = res.song;
            artist = res.artist.name;
            album = res.album.albumb_title;
            genre = res.genre.name;
            console.log(song);
            console.log(artist);
            console.log(genre);
            console.log(album);
        }
    });

    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {

          $(this).jPlayer("setMedia", {
            mp3: song,
          });

        },

        swfPath: "http://jplayer.org/latest/js",

        supplied: "mp3",
      });

    });

So I am using ajax to call my local API and trying to send my response to the jplayer function. I am not able to figure out the way around to give "mp3" a url and play a song from that.

Baked Pro
  • 123
  • 1
  • 4
  • as far as i understand the question ,you need to put the jplayer code in a function and call it in the response of the ajax call function and pass the song as parameter to that function ... – ssamuel Jun 22 '18 at 12:15

2 Answers2

1

Because you're using song before it's initialized to the value got in response.

Just read a little bit more about asyn here

A quick solution will be just to wrap your song play script in a function and then call that function in success callback of ajax request

<script type="text/javascript">
    var url = "http://localhost:8000/api/songs/rock";
    var song;
    var artist;
    var genre;
    var album;
    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json', // added data type
        success: function(res) {
            console.log(res);
            song = res.song;
            artist = res.artist.name;
            album = res.album.albumb_title;
            genre = res.genre.name;
            console.log(song);
            console.log(artist);
            console.log(genre);
            console.log(album);
            playSong(song)
        }
    });

     
      function playSong(song){
       $("#jquery_jplayer_1").jPlayer({
        ready: function () {

          $(this).jPlayer("setMedia", {
            mp3: song,
          });

        },

        swfPath: "http://jplayer.org/latest/js",

        supplied: "mp3",
      });
      }
Muhammad Usman
  • 10,039
  • 22
  • 39
0

Put the jplayer function call after ajax is ready.

$(document).ready(function(){
     $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json', // added data type
            success: function(res) {
                 $("#jquery_jplayer_1").jPlayer({
                 ..........
            }
        });

I've skipped some of the code just to illustrate.

First when the document is ready call ajax and when ajax is done call jPlayer function.