jPlayer - Create dynamic playlist based on files in folder

Question

I'm trying to create a jPlayer playlist based on mp3 files from a folder. And I found jPlaylister: http://jplaylister.yaheard.us/v_0.65/

I've found a similar question here: Dynamically populate playlist with JSON from PHP in jPlayer

Now, I'm not the expert on these things. I'm more of a design and simple code kind of guy. But I've tried to build the code to my likings, and I've come up with this. Which doesn't work at all. I'm not sure how to debug it either, because I can't get a response from $.getJSON

Here's my code right now:

$(document).ready(function(){

        var cssSelector = {
            jPlayer: "#jquery_jplayer_1", 
            cssSelectorAncestor: "#jp_container_1"
        };
        var playlist = []; // Empty playlist
        var options = {
            swfPath: "js", 
            supplied: "mp3"
        };

        //var playlist = [{"title":"Kalimba","mp3":"/path/to/mydirectory/Kalimba.mp3"},{"title":"Maid with  the Flaxen Hair","mp3":"/path/to/mydirectory/Maid with the Flaxen Hair.mp3"},{"title":"Sleep Away","mp3":"/path/to/mydirectory/Sleep Away.mp3"}];
    var url=  "getSongurl.php";
    var song = "Assets/mp3/mysong";

    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);   
    $.getJSON(url, {songurl: song}, function(data) {
        $.each(data, function(key, val) {
            myPlaylist.add(value);
        })
    }); 
});

I want to pass the song variable to JSON so I can process the folder in PHP and return all files from that folder.

Now, here's the PHP file:

<?php

    $results = array();

    $directory = $_POST['songurl'];
    $handler = opendir($directory);

    while ($file = readdir($handler)) {
            $results[] = $file;
            <script type="text/javascript">
                alert("file: <?php echo $file; ?>");
            </script>
    }

    $limit = count($results();
    $i = 0;

    while ($i < $limit) {
        $filesJson = array(
            'title:' => $i,
            'mp3:' => $i
        );
    }

    //tidy up
    closedir($handler);
    echo json_encode($filesJson);

    ?>

I tried to put an alert in there, but I don't get any alerts either. Probably just me who've done something really wrong here..

Narpat Bishnoi · Answer 1 · 2016-10-15T15:46:19.617

Your php file like

<?php
$results = array(); 
$fdirectory = (isset($_REQUEST['songurl']))?$_REQUEST['songurl']:'songs/';
$handler = opendir($fdirectory);
while ($file = readdir($handler)) {
        if($file != '.' && $file != '..')
        $results[] = $file;
}

if(!empty($results)){
    foreach($results as $k=>$song){
        $filesJson[] = array(
            'title' => preg_replace('/\\.[^.\\s]{3,4}$/', '', $song),
            'mp3' => $fdirectory.$song
        );
    }
}    
closedir($handler);
$songList = json_encode($filesJson);
    if(isset($_REQUEST['songurl'])){
        echo $songList;
    }

JS

var url=  "getSongs.php";
var song = "Assets/mp3/mysong/";
var cssSelector = {
        jPlayer: "#jquery_jplayer_1", 
        cssSelectorAncestor: "#jp_container_1"
    };

var playlist = []; // Empty playlist
var options = {
  swfPath: "dist/jplayer",
  supplied: "mp3"
};
$(document).ready(function(){   
    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);   
   $.getJSON(url, {songurl: song}, function(data) {
      $.each(data, function(key, val) {
        myPlaylist.add(val);
      })
   }); 

});

Enjoy :)

While this code works, always remember to sanitize user input! For example you don't want users to get page like this getSongurl.php?songurl=%2Fhome — mx0, Oct 15 '16 at 17:20

score 0 · Answer 2 · answered Jan 27 '14 at 15:33

0

Well, for starters, you need to have $limit = count($results());, not $limit = count($results();. That might be messing it up.

answered Jan 27 '14 at 15:33

captainGeech

302
1
5
17

score 0 · Answer 3 · answered Apr 15 '14 at 06:19

I wrote jplaylister and, at a glance, JSON isn't really needed here. The script was made to be "pointed at a folder" and make a playlist (filterable) based on everything it finds in that folder/subfolders.

It uses php arrays to store what it find and (as of the current version) offers playlist caching in case the # of files is large and getting the ID3 information from them starts being time-consuming.

Get the jplaylister working (or let me know that it isn't and tell me why or link me to your development code)...then add your media files to that...then you can start fancying it up.

Good luck!

Nick C

jPlayer - Create dynamic playlist based on files in folder

3 Answers3