CODEWITHSUNDEEP
javascriptjqueryhtmlnode.js
Beks
Beks

Reputation: 3

A way to access a files with javascript without using Node

So, I want to access all the mp3's in a file called music on my server. I then want to put them in a list and allow the user to play the songs. I can do this just fine using Node, but I want to be able to do this without running a server on my server. Thus I want to do this without using Node and instead using the java script I already have running. I know I can access one file using 

$.get('music/filename.mp3', function(data){
    //var music =  $('item', data);
    console.log(data);
});

but when i say

$.get('music/*.mp3', function(data){
    //var music =  $('item', data);
    console.log(data);
});

it doesn't work. Does anyone know how to do this?

for referance, this is what I'm currently doing.

router.get('/getMusic', function(req, res, next) {
  fs.readdir('./public/music/', function(err, files) {
    if (err) throw err;

    console.log('Sent result: ' + files);
    res.status(200).json(files);
  })
});

javascript

$.getJSON('/getMusic', function(json) {
  var options = '<option value=""></option>';
  $.each(json, function(i, item) {
    options += '<option value="' + item + '">' + item + '</option>';
  });
  $('#songs').html(options);
})
.done(function() { console.log('getMusic getJSON request succeeded!'); })
.fail(function(jqXHR, textStatus, errorThrown) {
  console.log('getMusic getJSON request failed! ' + textStatus);
  console.log('incoming ' + jqXHR.responseText);
})
.always(function() { console.log('getMusic getJSON request ended!');
});

Upvotes: 0

Views: 3457

Answers (2)

jfriend00
jfriend00

Reputation: 707786

Somewhere, there is already a server that is responding to:

$.get('music/filename.mp3?ext=mp3', ...)

You need to modify that server so that it supports a different URL that specifies the wildcard search you want. That other URL may either be a query parameter or a path that specifies a wildcard you want to look for and then returns the data you want:

You don't show the server-side code that already supports $.get('music/filename.mp3',, but that's where you start. Create a new route that accepts a wildcard as a parameter (either as a query string or part of the request path) and then implement the wildcard behavior in that route to return the data your client wants.

For example, you might create an optional query parameter on your /getMusic route that allows you to specific an extension:

/* -----------------------------------------------------------
/getMusic gets all music files in the public music directory
/getMusic?ext=mp3 gets only music files with that extension
----------------------------------------------------------- */
router.get('/getMusic', function(req, res, next) {
  fs.readdir('./public/music/', function(err, files) {
    if (err) {
       res.status(500).send("fs.readdir() error");
       return;
    }

    if (req.query.ext) {
        // filter files to see if they match the extension in the query parameter
        files = files.filter(function(f) {
            return f.slice(-req.query.ext.length) === req.query.ext;
        });
    }
    console.log('Sent result: ' + files);
    res.status(200).json(files);
  })
});

Upvotes: 0

samanime
samanime

Reputation: 26617

JavaScript from the browser (which is what I assume you mean by using JavaScript without Node) can't access your file system in a way that would let it search, unlike Node.

In particular, it can't do an equivalent of your the fs.readdir() call in your /getMusic route. For that, you'd have to have Node or some other server.

If your underlying (non-Node) server (possibly nginx or Apache) is configured to search up an directory listing for the music directory, it's possible to read that, parse it, and then use that for your list of music. Though, that might be a bit messy.

As for actually downloading the music, you can't do wildcards. You'll have to iterate through each file directly, like you have in the first one: $.get('music/some-file.mp3').

Upvotes: 1

Related Questions