DEV Community

Cover image for Chordify Play Cue
Mohammad Tomaraei
Mohammad Tomaraei

Posted on

Chordify Play Cue

I often use Chordify to jam to my favorite tunes.

It is powered by a machine learning model that listens to a song and detects the chords used throughout the piece.

It then displays the detected chords on a beat grid and highlights each beat with its primary chord as the song is playing.

You can also choose to display chord diagrams alongside the beat grid if you’re new to an instrument.

The premium version also offers additional features like pitch transposition, capo, MIDI playback, tempo adjustment, and export to MIDI and PDF.

I sometimes use Chordify while recording my performance but some songs begin immediately as soon as I hit play, making it difficult to control the playback while holding an instrument.

That’s why I decided to create a simple JavaScript bookmark that you can install by creating a new bookmark with the following URL:

javascript:window.play_button = $('#play-button'); window.pause_button = $('#play-button .icon-pause'); window.fast_reverse = play_button.closest('nav').find('button:first'); window.header = $('header').eq(1); if (window.ready_timeout) { clearTimeout(window.ready_timeout); } if (window.go_timeout) { clearTimeout(window.go_timeout); } if (window.pause_button.length) { window.pause_button.click(); } window.fast_reverse.click(); window.header.css('background-color', 'red'); window.ready_timeout = setTimeout(function() { window.header.css('background-color', 'yellow'); }, 1500); window.go_timeout = setTimeout(function() { window.play_button.click(); window.header.css('background-color', 'green'); }, 3000);
Enter fullscreen mode Exit fullscreen mode

It pauses the song if it’s already playing, fast reverses to the beginning, and plays the song with a 3-second delay while giving you a visual cue by changing the song title background to red, yellow, and green.

Chordify Play Cue

Here’s the script if you’re curious:

window.play_button = $('#play-button');
window.pause_button = $('#play-button .icon-pause');
window.fast_reverse = play_button.closest('nav').find('button:first');
window.header = $('header').eq(1);

// Clear previous timeouts
if (window.ready_timeout) {
    clearTimeout(window.ready_timeout);
}
if (window.go_timeout) {
    clearTimeout(window.go_timeout);
}

// Pause if the song is playing
if (window.pause_button.length) {
    window.pause_button.click();
}

// Go to the beginning
window.fast_reverse.click();

// Set the header background to red
window.header.css('background-color', 'red');

// Set the header background to yellow in 1.5 seconds
window.ready_timeout = setTimeout(function() {
    window.header.css('background-color', 'yellow');
}, 1500);

// Set the header background to green and play the song in 3 seconds
window.go_timeout = setTimeout(function() {
    window.play_button.click();
    window.header.css('background-color', 'green');
}, 3000);
Enter fullscreen mode Exit fullscreen mode

This post was originally published on my blog where I write all about tech.

Top comments (0)