Playing mp3 on website created with Node.js

问题:

I've searched for hours and several days for a good solution for my problem.

First of all my scenario: I am building a website with Node.js - especially Sails.js. The goal is to have a list of mp3 files of my server side directory (that's already done) that are litet as links on the client side (website).

When I click on one link I want the file to be loaded in my HTML Audio Tag (or if theres a better node.js specific solution with start/stop controlling it would be fine too).

And that's the problem where I am currently ...

As I said I've searched now for days for the best or most common solution on this problem .. but at the moment there are no useful tutorials or suggestions to solve this problem.

I've found a lot of modules but they are (if I understood it right) only for playing sound on the server side ... For example: https://github.com/TooTallNate/node-speaker

The solution that would fit the most could be the module http://binaryjs.com. But it says that it has a limited compatibility:

Currently supports Chrome 15+ and Firefox 11+, IE10. Fallbacks that will support Safari, mobile iOS and Android, and older FF/Chrome versions are in the works

So I am not sure if i shoul use it.

So my question: Is there anyone who has already built something similar or an idea for a solution for this scenario? Which module would do this job at best? Or does anyone has some experiences with binary.js?

I hope someone can help me so I don't have to search for hours again :P

Thank you!

回答1:

Finally I found a solution for my scenario!
Now I read the file on the server side and convert it to a base64 string.
Later I use this string on the client side and give it to my audio tag! =)

Here is my example. Maybe it will help someone else too! :)

This is my server side controller function of my DirectoryController:

readFile: function(req, res){
    var fs = require('fs');
    var returnData = {};

    fs.readFile('D:\\Media\\Music\\TheAudioFile.mp3', function(err, file){
        var base64File = new Buffer(file, 'binary').toString('base64');

        returnData.fileContent = base64File;

        res.json(returnData);
    });
}

The controller function can now be called by the client via an ajax call. In my case I call it via a socket.io GET:

function loadFile(){
    socket.get('/directory/readFile', function(response){
        var audioSrc = 'data:audio/mp3;base64,' + response.fileContent;
        var audio = new Audio();

        audio.src = audioSrc;
        audio.load();
        audio.play();
    });
}

And in the end this is the whole magic! =)

If someone has a better solution ==> Let me know! =)

回答2:

It's up to your client side code to include the .mp3 in an audio tag. Since you're using Sails, you will most likely just want your mp3 files to be assets, and then you can just reference them from your html.