Echo MySQL results inside of javascript via PHP

Question

This code for my Jplayer playlist works fine but I want to populate the playlist from my database. When I use php it does not work. Can someone show me how this can be done without being extremely complicated.

<script>
var myPlaylist = [

    {
        mp3:'music/hatin.mp3',
        title:'Track 1',
        artist:'ChaneyBoy, feat. Blu Throwed ',
        rating:5,
        buy:'#',
        price:'17',
        duration:'0:38',
        cover:'images/coverArt/rv3-small.png'   
    },
    {
        mp3:'music/2.mp3',
        title:'Track 2',
        artist:'BlueFoxMusic',
        rating:4,
        buy:'#',
        price:'17',
        duration:'2:51',
        cover:'music/2.jpg' 
    },

    {
        mp3:'music/hatin.mp3',
        title:'Track 3',
        artist:'ChaneyBoy, feat. Blu Throwed ',
        rating:5,
        buy:'#',
        price:'17',
        duration:'0:38',
        cover:'music/1.jpg' 
    },
    {
        mp3:'music/2.mp3',
        title:'Track 4',
        artist:'BlueFoxMusic',
        rating:4,
        buy:'#',
        price:'17',
        duration:'2:51',
        cover:'music/2.jpg' 
    },
];

    jQuery(document).ready(function ($) {
    $('.music-player-list').ttwMusicPlayer(myPlaylist, {
        currencySymbol:'$',
        buyText:'BUY',
        tracksToShow: 10,
        autoplay:false,
        ratingCallback:function(index, playlistItem, rating){
            //some logic to process the rating, perhaps through an ajax call
        },

        jPlayer:{
            swfPath: "http://www.jplayer.org/2.7.0/js/",
            supplied: "mp3",
            volume:  0.8,
            wmode:"window",
            solution: "html,flash",
            errorAlerts: true,
            warningAlerts: true
        }
    });
});
</script>

PHP VERSION OF CODE ABOVE, It echoes the exact code above when I comment out the echo <script>;

<?php 

include 'includes/config.php';

$get_album_tracks_sql = "SELECT * FROM songs ORDER BY track_number ASC";

$album_tracks_query = mysqli_query($dwn_conn, $get_album_tracks_sql);

echo "<script>";
echo 'var myPlaylist = [';
while($album_tracks_result = mysqli_fetch_array($album_tracks_query)){
    echo '{';
    echo 'mp3: \'' . $album_tracks_result['file_path'] .  '\',';
    echo 'title: \'' . $album_tracks_result['track_name'] .  '\',';
    echo 'artist: \'' . $album_tracks_result['artist_name'] .   '\',';
    echo 'rating:' . $album_tracks_result['rating'] . ',';
    echo 'buy: \' # \' ,';
    echo 'price: \'17\' , ';
    echo 'duration \'' . $album_tracks_result['duration'] .  '\',';
    echo 'cover: \'images/coverArt/rv3-small.png\' '; 
    echo '},';
}//while loop

echo '];';

echo 'jQuery(document).ready(function ($) {';
    echo '$(\'.music-player-list\').ttwMusicPlayer(myPlaylist, {';
    echo 'currencySymbol:\'$\',';
    echo 'buyText:\'BUY\',';
    echo 'tracksToShow: 10,';
    echo 'autoplay:false,';
    echo 'ratingCallback:function(index, playlistItem, rating){';
    echo '//some logic to process the rating, perhaps through an ajax call';
echo '},';

echo 'jPlayer:{';
    echo 'swfPath: "http://www.jplayer.org/2.7.0/js/",';
    echo 'supplied: "mp3",';
    echo 'volume:  0.8,';
    echo 'wmode:"window",';
    echo 'solution: "html,flash",';
    echo 'errorAlerts: true,';
    echo 'warningAlerts: true';
echo '}';

echo '});';
echo '});';

echo "</script>";

?>

I just doesn't read it as javascript I suppose. I read in another article to parse the results by using json_encode(). That sounds like a lot! — D. Chaney, Aug 06 '17 at 03:37

score 0 · Answer 1 · answered Aug 06 '17 at 03:37

0

try this::fill in the rest of the $track array

include 'includes/config.php';

$get_album_tracks_sql = "SELECT * FROM songs ORDER BY track_number ASC";

$album_tracks_query = mysqli_query($dwn_conn, $get_album_tracks_sql);

$playList = array();
while($album_tracks_result = mysqli_fetch_array($album_tracks_query)){
    $track = json_encode(array('mp3' => $album_tracks_result['file_path'],
                            'title'=> $album_tracks_result['track_name'],
                            /* FILL IN THE REST */));
    array_push($playList, $track);
}
?>

<script>
jQuery(document).ready(function ($) {
    $('.music-player-list').ttwMusicPlayer(<?php echo json_encode($playList); ?>, {
    currencySymbol:'$',
    buyText:'BUY',
    tracksToShow: 10,
    autoplay:false,
    ratingCallback:function(index, playlistItem, rating){
    //some logic to process the rating, perhaps through an ajax call
},

jPlayer:{
    swfPath: "http://www.jplayer.org/2.7.0/js/",
    supplied: "mp3",
    volume:  0.8,
    wmode:"window",
    solution: "html,flash",
    errorAlerts: true,
    warningAlerts: true
}

});
});
</script>

answered Aug 06 '17 at 03:37

DeyMac

16
2

So I just need to do that for the while loop section and the rest of the php is ok? – D. Chaney Aug 06 '17 at 03:43
Yes, just fill in the rest of the array – DeyMac Aug 06 '17 at 03:48
you don't need the javascript inside echo's....just write the javascript as normal...and echo the $playlist array, as you see I did – DeyMac Aug 06 '17 at 03:50
1

$('.music-player-list').ttwMusicPlayer(, { – DeyMac Aug 06 '17 at 03:50
I Believe im getting somewhere with that method but the output is just a little off. ["{\"mp3:\":\"music\\\/How You Wanna Do It.mp3\",\"title:\":\"How You Wanna Do It\",\"artist:\":\"POTM GROUP\",\"rating:\":\"5\",\"buy:\":\"#\",\"price:\":\"17\",\"duration\":\"5:26\",\"cover:\":\"images\\\/coverArt\\\/rv3-small.png\"}"] – D. Chaney Aug 06 '17 at 05:45

Echo MySQL results inside of javascript via PHP

1 Answers1