DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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.

Oldest comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!