Node.js Express Karaoke Song MP3 Maker Remove Vocals From Song in FFMPEG Using Javascript Full Project 2020

Node.js Express Karaoke Song MP3 Maker Remove Vocals From Song in FFMPEG Using Javascript Full Project 2020

 

Get Started

 

 

In order to get started we need a software called as ffmpeg installed on your computer. For this app where we will be removing vocals from the song mp3 file.

 

 

Install FFMPEG

 

 

Go to the official website of ffmpeg here and download it

 

 

 

FFmpeg Command to Remove Vocals from MP3 Song

 

 

ffmpeg -i song.mp3 -af pan="stereo|c0=c0|c1=-1*c1" -ac 1 karaoke.mp3

 

 

 

where song.mp3 is the input file

 

and karaoke.mp3 is the output file

 

Just run this command on your pc and ffmpeg will automatically remove vocals and your karaoke is ready for you.

 

 

Live Demo

 

 

You can see the live demo of web app here

 

 

 

Making App

 

 

 

In order to get started you need to install the following dependencies

 

 

npm i express

npm i ejs

npm i nodemon

npm i multer

 

Now make a index.js file and copy paste the following code

 

 

const express = require('express')

const bodyParser = require("body-parser");

const fs = require("fs");

const { exec } = require("child_process");

const path = require("path");

var outputFilePath;

const multer = require("multer");

const app = express();

var dir = "public";
var subDirectory = "public/uploads";

if (!fs.existsSync(dir)) {
  fs.mkdirSync(dir);

  fs.mkdirSync(subDirectory);
}

app.set("view engine", "ejs");


app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

const PORT = process.env.PORT || 3000;

app.use(express.static("public"));

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "public/uploads");
  },
  filename: function (req, file, cb) {
    cb(
      null,
      file.fieldname + "-" + Date.now() + path.extname(file.originalname)
    );
  },
});

const audioFilter = function (req, file, callback) {
    var ext = path.extname(file.originalname);
    if (
      ext !== ".mp3" &&
      ext !== ".aac" &&
      ext !== ".wmv" &&
      ext !== "wav" &&
      ext !== ".m4a" &&
      ext !== ".flac" &&
      ext !== ".wmf" &&
      ext !== ".wma"
    ) {
      return callback("This Extension is not supported");
    }
    callback(null, true);
  };

var audioconverter3 = multer({ storage: storage, fileFilter: audioFilter }).single('file');

app.post(
      "/karaokemaker",
      (req, res) => {
          console.log(req.body.path);
    
          outputFilePath = Date.now() + "output." + path.extname(req.body.path);
    
          exec(
            `ffmpeg -i ${req.body.path} -preset ultrafast -af pan="stereo|c0=c0|c1=-1*c1" -ac 1 ${outputFilePath}`,
            (err, stdout,stderr) => {
              if(err){
                res.json({
                    error:"some error takes place"
                })
            }
            res.json({
                path:outputFilePath
            })
      })
        
      })
    
      app.post('/uploadkaraokemaker',(req,res) =>{
        audioconverter3(req,res,function(err) {
          if(err) {
              return res.end("Error uploading file.");
          }
          res.json({
              path:req.file.path
          })
      });
      })


app.get('/karaokemaker',(req,res) => {
  res.render("karaokemaker",{title:'karaoke maker'})
})

app.get('/download',(req,res) => {
    var pathoutput = req.query.path
    console.log(pathoutput)
    var fullpath = path.join(__dirname,pathoutput)
    res.download(fullpath,(err) =>{
        if(err){
            fs.unlinkSync(fullpath)
            res.send(err)
        }
        fs.unlinkSync(fullpath)
    })
  })


app.listen(PORT, () => {
  console.log(`App is listening on Port ${PORT}`);
});

 

See also  How to Download Image From URL in Node.js Using image-downloader Library Full Tutorial For Beginners 2020

 

 

Now after this you need to make a ejs template inside the views folder. Now make a views folder and make a karaokemaker.ejs file and copy paste the below code.

 

 

views/karaokemaker.ejs

 

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%=title%></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

</head>
<div class="container">
    <h1 class="text-center">
        Karaoke Song Maker App
    </h1>
      <form id="form">
      <div class="form-group">
          <label for="song">Upload Song:</label>
          <input class="form-control" type="file" id="upload-input" required>
      </div>
      <div class="progress">
        <div class="progress-bar" role="progressbar"></div>
      </div>
      <div class="form-group">
          <button id="button" class="btn btn-block btn-danger">
              Make Karaoke
          </button>
      </div>
      </form>
  
        <br><br>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    var files
      $('#form').on('submit', function (e){
        e.preventDefault()
    //$('#upload-input').click();
    $("#button").text('Uploading Song')
    $("#button").prop("disabled","true")
    $('.progress-bar').text('0%');
    $('.progress-bar').width('0%');
    convertFile()
});
$('#upload-input').on('change', function(){
  files = $(this).get(0).files;
  var fileExtension = ['mp3', 'aac', 'wmv', 'wav', 'm4a','flac','wmf','wma'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
           $(this).val("") 
    
swal ( "Oops" ,"Please Upload a Video File",  "error" )

        }
})

function convertFile(){
  if (files.length > 0){
    // create a FormData object which will be sent as the data payload in the
    // AJAX request
    var formData = new FormData();
    // loop through all the selected files and add them to the formData object
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      // add the files to formData object for the data payload
      formData.append('file', file, file.name);
    }
    console.log(formData)
    var formdata2 = new FormData()
    $.ajax({
      url: '/uploadkaraokemaker',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data){
          var data2 = {path:data.path}
          console.log('upload successful!\n' + data.path);
          $("#button").text("Song Uploaded Now Processing")
          $("#button").prop("disabled",true);
          formdata2.append('path',data.path)
          $.ajax({
              url:'/karaokemaker',
              type:'POST',
              data:JSON.stringify(data2),
              contentType: "application/json",
              dataType:"json",
      success:function(data){

          console.log(data.info)

          window.open('/download?path='+data.path)
          $("#button").text("Upload File")
          $("#button").prop("disabled",false);
          location.reload();
      }
          })
      },
      xhr: function() {
        // create an XMLHttpRequest
        var xhr = new XMLHttpRequest();
        // listen to the 'progress' event
        xhr.upload.addEventListener('progress', function(evt) {
          if (evt.lengthComputable) {
            // calculate the percentage of upload completed
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            // update the Bootstrap progress bar with the new percentage
            $('.progress-bar').text(percentComplete + '%');
            $('.progress-bar').width(percentComplete + '%');
            // once the upload reaches 100%, set the progress bar text to done
            if (percentComplete === 100) {
              $('.progress-bar').html('Done');
            }
          }
        }, false);
        return xhr;
      }
    });
  }
}
  </script>
</html>

 

See also  Brython Tutorial to Run Python Arithmetic Calculator Script in Browser Using HTML5 Full Project For Beginners

 

 

Screenshots

 

 

 

 

 

 

DOWNLOAD SOURCE CODE

 

 

 

Leave a Reply