CODEWITHSUNDEEP
node.jsexpresspath
Praneet Mehta
Praneet Mehta

Reputation: 121

How do i use absolute path in html while working on node server

I am working on a music app in nodeJS. I want to change the audio tag src attribute to a file outside the working directory of my node app. I recieve the correct absoulte path from the server but the path on changing sends a get request at localhost:3000/path which is not what i wanted.

Any suggestion on how do i do this?

Edit.. Here are the code snippets This is the main route where i gather the files from the specified folder in the variable which is outside the node app directory which totally works fine.

router.get('/', function(req, res) {
var fileList = [];
global.song_list = [];
var counter = 0;
var i = 0;

fs.readdir(testFolder, (err, files) => {
    if (err) console.log(err);
    else {
        fileList = files;
    }
    console.log(fileList.length);
    fileList.forEach(function(i){

        var fileh = (testFolder + i);
        var readableStream = fs.createReadStream(fileh);
        var parser = mm(readableStream, function(err, metadata) {
            counter++;
            // console.log(counter);
            if (err) {
                console.log(err);
                readableStream.close();
            } else {
                readableStream.close();
                var o = {}
                o.path = testFolder + i;
                o.title = metadata.title;
                o.artist = metadata.artist.join(',');
                o.album = metadata.album;
                var image = metadata.picture;
                // console.log(image[0].data)
                var base64String = '';
                if (image) {
                    // for (var i = 0; i < image[0].data.length; i++{
                    //     base64String += 
 String.fromCharCode(image[0].data[i]);
                    // }
                    base64String = new 
Buffer(image[0].data).toString('base64');
                    //console.log(base64String);

                } else {
                    base64String = '/images/none.png';
                }
                o.image = base64String;
                global.song_list.push(o);
                // console.log('----------');
                // console.log(fileList[fileList.length-1]);
                // console.log('----------');
                // console.log(fileList.length-1);
                if(counter == fileList.length){
                    console.log('complete');
                    res.render("index", 
{list:global.song_list.slice(0,200)});
                }
            }
        });
    });

// var id3 = id3.fetch(testFolder+file_list[0]);
// res.send(id3);

});

});

Here is the ejs template i am using

<!DOCTYPE html>
<html>
<head>
<title>Music</title>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js">
</script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-
lightness/jquery-ui.css"
rel = "stylesheet">
<link rel="stylesheet" type="text/css" 
href="/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet">

</head>
<body>
<div id="background">
    <img id="bg_img" src="/images/bg.png">
</div>

<div id="music_player">

    <div id="nav_flex_container">
    </div>
    <div id="window">
        <table>
            <thead >
                    <th>Title</th>
                    <th>Album</th>
                    <th>Artist</th>
            </thead>
            <tbody>
                <% for(var i=0;i<list.length;i++){%>
                <tr>
                    <td class="title"><span class="list_span" 
style="display: inline-block;"><%= list[i].title %><span></td>
                    <td><%= list[i].album %></td>
                    <td><%= list[i].artist %></td>
                </tr>
                <%}%>
            </tbody>
        </table>
    </div>
    <div id="controls_flex_container">
        <div id="song_info">
            <div id="art_holder">
                <img id="art_now_playing" src="/images/none.png" 
alt="x"> 
            </div>
            <div id="info_holder">
                <h6 id="title_now_playing"><strong>Test</strong></h6>
                <h6 id="album_now_playing">The Test</h6>
            </div>
        </div>
        <div id="controls">
            <div id="playback_buttons">
                <audio preload="none" id="audio_player">
                    <source id="song_source" src="/music/test.mp3">
                </audio>
                <i class="small material-icons" id="replay" 
style="font-size: 22px;">replay_30</i>
                <i class="small material-icons" id="previous" 
style="font-size: 22px;">skip_previous</i>
                <i class="small material-icons" 
id="play">play_circle_outline</i>
                <i class="small material-icons" id="next" 
style="font-size: 22px;">skip_next</i>
                <i class="small material-icons" id="forward" 
style="font-size: 22px;">forward_30</i>
            </div>
            <div id="slider">
                <h6 id="timeNow"><span>00</span>:<span>00</span></h6>
                <div id='progress'>
                    <div id='progress-bar'></div>
                </div>
                <h6 id="length"><span>00</span>:<span>00</span></h6>    
            </div>
        </div>
        <div id="other_controls">

        </div>
    </div>
    <div id="user_flex_container">
    </div>
</div>

<script src="/js/playerControls.js"></script>
<script src="/js/fileReader.js"></script>
<script src="/js/id3-minimized.js"></script>
<script src="/js/id3extractor.js" ></script>
<script>
$(document).ready(function(){
    // $('#nav_flex_container').resizable({
    //     handles: 'n,w,s,e',
    //     minWidth: 200,
    //     maxWidth: 300
    // });
    var width = $(window).width()-410;
    var height = $(window).height() - 
$("#controls_flex_container").height()-20;
    $('#window').css({
        'width':width + 'px',
        'height': height+'px'
    });
    var obj = document.getElementsByClassName('list_span');
    [].forEach.call(document.getElementsByClassName('list_span'),
function(ele){
        ele.addEventListener('click', function(){
            console.log(ele.innerHTML.split('<span>')[0]);
            songChange(ele.innerHTML.split('<span>')[0]);
        });
    })
    function songChange(song){
        $.ajax({
                type: "POST",
                url: "/",
                data: JSON.stringify({song:song}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data){
                    if(data[0].status == 'OK'){
                        // console.log(typeof(data[1]));
                         console.log(data[1]);
                        $('#title_now_playing').html(data[1].title);
                        $('#album_now_playing').html(data[1].album);

$('#art_now_playing').attr('src',"data:image/jpeg;base64," + 
data[1].image);
                        $('#song_source').attr('src', data[1].path);
                        // $('#play').click();
                    }else{
                        alert('failed');
                    }
                },
                failure: function(errMsg) {
                    alert(errMsg);
                }
          });
    }
});
</script>
</body>

The problem is that i can work from node in the outside directories but how do i set that path in the ejs audio tag?

And here is the response to the ajax request

router.post('/', function(req, res){
console.log('here');
store = [];
console.log(req.body);
var index = 0;
var found = false;
for(var j=0;j<global.song_list.length;j++){
    if(global.song_list[j].title == req.body.song){
        index = j;
        found = true;
        store.push(global.song_list[index]);
        break;
    }else{
        found = false;
    }
}
if(store.length!=0 && found==true){
    res.send([{'status':'OK'},store[0]]);
}else{
    res.send([{'status':'OOPS'}]);
}
});

Upvotes: 0

Views: 144

Answers (1)

itsundefined
itsundefined

Reputation: 1450

Could you explain how you have implemented the node server? I would recommend using express.js It includes the functionality of serving static files outside the node project root folder. Here is the documentation: https://expressjs.com/en/starter/static-files.html

Upvotes: 1

Related Questions