Merry Christmas!

Hi! It’s almost Christmas, and it’s time to say Merry Christmas to everyone out here. This year, I really want to thank so many people for their help and support. Although some of my friends are going elsewhere to study and my mother’s having some illness, with the help of different people, I’m feeling much better now.

Finally, I recorded a nice song (“Joy to the World”) for this merciful moment, enjoy! And, Merry Christmas to everyone and have a nice new year!

[Music Sharing] How To Train Your Dragon Soundtrack

My blog is mainly about programming but I want to tell you: I <3 music also! This time, I want to share you a nice soundtrack called “How To Train Your Dragon”. Let’s enjoy!

Audio visualizations using Web Audio API

Have you ever seen some visual effects when playing music with your favourite music player? (Here’s some example photos.)

effects-2

effects-1

effects-3

This is just… great. But how they do this kind of effects? We need to understand how sound is made first. Sound is actually the vibrations of air (and more generally, objects) and the change in air pressure is recorded using a microphone. Everytime when you play a music, the speakers generates the vibrations using the change in air pressures recorded by microphone.

We can make use of these data to make visual effects from sounds. In this tutorial, I’ll teach you how to create a visualization like this:

web-audio-visuals-demo

In this demonstration, we’ll be able to drop audio files in and play the music with visuals. OK! Let’s start!

First, we need to set up the HTML for our visuals. It’ll be pretty simple as we only need a canvas.

<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>

Then, it’s time to code some JavaScript!

// Init. all the variables we need
var audio, source, analyser, canvas, ctx;

// Logs messages
function clog(str) {
    if (window.console && console.log) console.log(str);
}

// This is an empty event handler
// thatprevents the event from happening
function noop(e) {
    e.stopPropagation();
    e.preventDefault();
}

// This is the function used to
// handle the drop of the audio files.
function drop(e) {
    // Prevents the default action of the event
    // In this case, open an audio file
    e.stopPropagation();
    e.preventDefault();

    // Creates a file reader
    var reader = new FileReader();

    // What should we do when the reader is ready?
    reader.onload = function(e) {
        // Decode the audio file
        // using the Web Audio API
        if (audio.decodeAudioData) {
            audio.decodeAudioData(e.target.result, function(b) {
                source.buffer = b;

                // Play the audio file
                source.noteOn(0);
            }, function(e) {
                clog(e);
                alert('Audio not playable or not supported.');
            });
        }
        else {
            source.buffer = audio.createBuffer(e.target.result, true);

            // Play the audio file
            source.noteOn(0);
        }
    }

    // Read the dropped file
    reader.readAsArrayBuffer(e.dataTransfer.files[0]);    
}

// The function that actually
// draws the visuals
function draw(e) {
    // Get the audio data
    var inp = e.inputBuffer.getChannelData(0);
    var out = e.outputBuffer.getChannelData(0);

    // Start drawing the visuals
    // We first clear the canvas first
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = '#6633FF';
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);

    // Loop through the data and plot them
    for (var i = 0; i < inp.length; i++) {
        out[i] = 0;
        i == 0 ? ctx.moveTo(0, canvas.height / 2 + inp[i] * canvas.height / 2) : ctx.lineTo(canvas.width * i / inp.length, canvas.height / 2 + inp[i] * canvas.height / 2);
    }

    // Draw it!
    ctx.stroke();
}

window.onload = function() {
    // Init. the audio context
    // and the canvas
    audio = new(window.AudioContext || window.webkitAudioContext)();
    canvas = document.querySelector('#canvas');
    ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Listen for file drop
    // We also need to prevent the default actions of
    // other related events
    canvas.addEventListener('dragover', noop, false);
    canvas.addEventListener('drop', drop, false);
    document.addEventListener('dragover', noop, false);
    document.addEventListener('drop', drop, false);

    // Create the audio source
    // and the analyser that
    // actually gets the audio data
    source = audio.createBufferSource();
    analyser = audio.createScriptProcessor(1024, 1, 1);
    analyser.onaudioprocess = draw;
    source.connect(analyser);
    analyser.connect(audio.destination);
    source.connect(audio.destination);
    source.loop = true;
    source.gain.value = 1;
};

// Handle window resize
function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

// Add the resize listener
window.addEventListener('resize', resize, false);

OK, it’s finished. I’ve prepared a live demo for all you guys. Enjoy! 🙂

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;

OR

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!

How to do vocal removal nicely with Adobe Audition

Today one of my friends asked me how to do vocal removal nicely. He told me that he had tried some other softwares like Audacity and the result wasn’t good. I think many people may have these kind of problems too so I should help others.

In this article, I’ll use an audio editing software called Adobe Audition. (Beware: It’s not a freeware and you can get a trial version from Adobe easily.)

P.S. I’m using Adobe Audition CS6 but the method I mentioned here also works in the previous versions.

First, open Audition and load the audio file in.

Audition startup

Audition user interface

Then, click [Favorites -> Remove Vocals].

Favorites -> Remove Vocals

Removing Vocals

After the processing, it is basically finished. However, if you want to remove the vocals even further, you can follow the steps below:

Click [Effects -> Special -> Vocal Enhancer].

Click [Effects -> Special -> Vocal Enhancer]

Then click [Music -> Apply]. The music will get enhanced and the vocal will be further suppressed.

Vocal Enhancer

Finally, save the file and you’re finished!

Multiplayer Piano – a nice website for playing music together

http://www.multiplayerpiano.com/

This website is for people to play songs together. I first discovered this in Chrome Experiments and it looked attractive. I found it good so I’m going to share it.

The user interface of this website is pretty straightforward. It has a piano with all 88 keys and a simple chat interface. You can click on the keys to play, or you can use your keyboard. It also has a cool feature that allows you to plug in your own MIDI keyboard and play the notes directly and that suits me very much as I have a MIDI keyboard.

When using the MIDI keyboard you may get problems with those delayed notes. To solve the problem you just need to minimize the window and it’ll get better soon.

The chat interface are fairly simple: you just need to type in the words and press enter to send. The only thing that hurts is the colour of the text makes checking typing errors difficult.

Overall, it’s a really good website, so definitely worth to be used, before or while looking for best piano keyboard to practice at home.