Echo Nest Remix - Tutorial

Welcome to remix.js

This is a tutorial for how to use the JavaScript version of Echo Nest Remix. It assumes that you're comfortable with JavaScript, know a bit about Web Audio, and that you installed remix.js successfully. To learn about JavaScript, go here. To learn about Web Audio, check this tutorial out.

What is remix.js, anyways?

Remix.js is a JavaScript library that uses data from the Echo Nest's online analysis tools and the HTML 5 Web Audio API to allow you to perform algorithmic modifications of audio files. So you can play back only the first beat of a track, play the beats of a song like an MPC with your keyboard, and so on.

So how do you code this?

For example, let's look at one.html. This will make you a track that's only the first beat of every bar. Here's how:

<body>
<script>
    // These are the things you need:  an API key, the track ID, and the path to the track
    var apiKey = 'YOUR_API_KEY';
    var trackID = 'THE_TRACK_ID';
    var trackURL = 'audio/THE_AUDIO_FILE.mp3'

    // Set up the key variables
    var remixer;
    var player;
    var track;
    var remixed;

// The main function.
function init() {

    // Make sure the browser supports Web Audio.
    if (window.webkitAudioContext === undefined) {
        error("Sorry, this app needs advanced web audio. Your browser doesn't"
            + " support it. Try the latest version of Chrome");
    } else {
        
        // These set up the WebAudio playback environment, and create the remixer and player.
        var context = new webkitAudioContext();
        remixer = createJRemixer(context, $, apiKey);
        player = remixer.getPlayer();
        $("#info").text("Loading analysis data...");

        // The key line.  This prepares the track for remixing:  it gets
        // data from the Echo Nest analyze API and connects it with the audio file.
        // All the remixing takes place in the callback function.
        remixer.remixTrackById(trackID, trackURL, function(t, percent) {
            track = t;

            // Keep the user update with load times
            $("#info").text(percent + "% of the track loaded");
            if (percent == 100) {
                $("#info").text(percent + "% of the track loaded, remixing...");
            }

            // Do the remixing!
            if (track.status == 'ok') {
                // This array holds the chunks of audio that we're going to play back
                remixed = new Array();

                // This loops over each beat in the track.
                // If the index of the beat is a multiple of four, we append the beat to the playback array.
                for (var i=0; i < track.analysis.beats.length; i++) {
                    if (i % 4 == 0) {
                        remixed.push(track.analysis.beats[i])
                    }
                }
                $("#info").text("Remix complete!");
            }
        });
    }
}

// Run the main function once the page is loaded.
window.onload = init;
</script>

Welcome to One.html
<div id='info'> </div>
<!-- These buttons will play and stop your remix.  -->
<button onClick="player.play(0, remixed);">Play!</button>
<button onClick="player.stop()">Stop!</button>
</body>

What else can remix.js do?

We're glad you asked - check out this page to take remix.js for a test drive. You can also check the examples for inspriation - happy remixing!