How to do vocal remove – the programmatic way

These days, many of my classmates are asking to help them removing vocals from songs for my school’s Singing Contest. I’m doing these things for quite a long time and I’m already used to it.

Suddenly, I feel like digging out how vocal removal works so I searched in the internet. I found there are many ways in doing this like using FFT to eliminate the frequency of the  vocals or using the FFT of different signals to eliminate the vocals. Among all of them I found one that is surprisingly easy to implant – phase cancellation.

In  phase cancellation, it’ll make an assumption that the vocals are recorded using one microphone only. Since the vocals are manifested equally across the channels, we can invert the phase of one of the channel and add that signal to the another track to eliminate the vocals. This produce pretty good result as long as the vocals are recorded in stereo and follows the assumption. This algorithm does not work well or at all when the audio is mono or the vocals are recorded using more than one microphones or the music is also recorded with only one microphone.

OK. Here’s the algorithm:

output[i] = (inputL[i] - inputR[i]) / 2;


output[i] = (inputR[i] - inputL[i]) / 2;

That why I said that it’s easy, it’s only a piece of simple math.

Do you want a working example running in your web browser? Here’s one that is created with the web audio API and HTML5 Drag & Drop API. Enjoy!

Create a YouTube video downloader in PHP

YouTube is the most popular video sharing platform and videos is watched online. However, sometimes we have a need to get the video for offline uses or you don’t want the watermark of YouTube on the video or even you want to use YouTube as a free video host and YouTube didn’t provide any ways to get the raw video. So in this post, I’m teach you how to do it in PHP (so you can embed the video easily in your website).

By reverse engineering the YouTube embed player, we know that the player will issue a HTTP request to to get information about a specific video. The result of the request contains a URL-encoded string that has the video’s location. So, we need to get that part first.

$id = $_GET['id']; //the youtube video ID
$format = $_GET['fmt']; //the MIME type of the video. e.g. video/mp4, video/webm, etc.
parse_str(file_get_contents("".$id),$info); //decode the data
$streams = $info['url_encoded_fmt_stream_map']; //the video's location info

The stream is also different sets of URL-encoded data separated by a comma. In order to retrieve all the streams, we need to turn it into an array by using explode(',',$streams).

$streams = explode(',',$streams);

After that, we need to loop through all the streams. Now it goes to the main part: select an appropriate stream and get its data.

foreach($streams as $stream){
    parse_str($stream,$data); //decode the stream
    if(stripos($data['type'],$format) !== false){ //We've found the right stream with the correct format
        $video = fopen($data['url'].'&signature='.$data['sig'],'r'); //the video
        $file = fopen('video.'.str_replace($format,'video/',''),'w');
        stream_copy_to_stream($video,$file); //copy it to the file
        echo 'Download finished! Check the file.';

The script is finished. Now you can call it like this after you’ve put it to the server:


It can be turned into a streaming script that streams YouTube videos to the client also. Happy downloading YouTube videos!

Draw fireworks in HTML5 canvas (with sounds!)

I always wondered if we can make cool fireworks animation using a procedural way (in here it simply means not using any image sprites or other things like that). Finally, I successfully learned that from this tutorial and I think it missed something: how can a great graphics like this without sounds? So I added it and show it to you. Hope you can also learned something like me.

Sorry about the server problem

Today, OpenShift has issued to fix the security problems of their cloud and it requires server restarts. Since my blog is hosted on OpenShift, it also caused problems in my blog.

Now the problem has been fixed.

Processing images on the web!

Want to add some effects to the images on your own web? Before the era of HTML5, this is only possible with browser-specific extensions (I’m talking about you IE filters & -webkit-filters) and this restricted people to do the processing on the server-side or using Flash.

Now, with the help of new HTML5 APIs called the canvas API, we can draw things like images on a canvas in raster format and do processing. In this post, I’ll talk about the basics of the canvas API and how to process images directly.

The <canvas> tag is supported in:

  1. Chrome
  2. Firefox
  3. IE 9+
  4. Safari
  5. Opera

First, we need to define the canvas that the image is going to be drawn. This can be done by a HTML <canvas> element.

<canvas id="image" width="300" height=150">
    <p>Your browser doesn't support the canvas element.</p>

The content inside the <canvas> element will be ignored by a browser that recognizes the tag so we can put a message to show the user that their browser doesn’t support this feature.

Then, we need to get the canvas using the traditional DOM API.

var canvas = document.getElementById('image');

Here’s the most important point: we’re going to get the canvas context that contains several methods that allows us to draw thing on.

var context = canvas.getContext('2d'); //Get the 2d canvas context

You may have a question: why is it be ‘2d’ ? It’s because the canvas API is designed not just for 2d raster drawing but also for 3d drawings and we are not discussing that here.

Then, load the image with new Image() constructor and draw it on the canvas by using the context.drawImage(image,x,y,w,h) method.

var image = new Image();
image.onload = function(){
    //Set the canvas' size as same as the image
    canvas.width = this.width;
    canvas.height = this.height;
    //Draw the image to the canvas
    context.drawImage(this, //the image object
                      0, //The x-position of the image, 0 means the left
                      0, //The y-position of the image, 0 means the top
                      this.width, //The width of the image
                      this.height //the height of the image

After that, you should see the image is drawn to the canvas. Now, I’m going to show you how to get access to the image data and do processing on it. To access the image data, we use the context.getImageData(x,y,w,h) method.

var pixels = context.getImageData(0,0,canvas.width,canvas.height); //Get the image data
var data =;
//data is a large one-dimensional array containing all the pixels' colour values.
//Every pixels contains 4 colour channels: Red, Green, Blue and Alpha values,
//they are contained in the order of [R,G,B,A,R,G,B,A,...]
for(var i = 0; i < data.length; i += 4){
    //Do the processing here
    //The colour values are stored in this order:
    var r = data[i]; //The red component
    var g = data[i+1]; //The green component
    var b = data[i+2]; //The blue component
    var a = data[i+3]; //The alpha component
context.putImageData(pixels,0,0); //Put the data back to the canvas

See next page to know how to handle the colour values properly and make some effects!

Turn asynchronous functions to their synchronous counterpart

Recently, asynchronous programming becomes a hit as slow jobs can perform while not blocking other jobs to be done. However, sometimes we want something to be done in a synchronous way like getting a single value from a query (you know callbacks are clumsy). In order to solve the  problem, turning asynchronous functions to synchronous can solve the problem.

To turn asynchronous functions to synchronous, we need to set up a loop checking the result, therefore cause blocking.

Here’s the code: (we use javascript here because it’s straightforward)

function somethingSync(args){
    var ret; //the result-holding variable
    //doing something async here...
        ret = result;
    while(ret === undefined){} //wait for the result until it's available, cause the blocking
    return ret;