Skip to content

Devlog 1 - Teaching ChatGPT to Chop Samples like Kanye

Posted on:April 25, 2023 at 02:20 PM

As a music producer the plugin game fascinates me. Plugins like OTT or Fabfilters improve your sound in an instant. Others like Cthulhu or Scaler speed up your workflow and provide inspiration in a pinch.

I want to make a plugin that helps artists speed up sample auditions. Sample auditioning is simply finding patterns of sample chops that sound good together.

The problem

I love to use samples in my songs. Playing sample chops live on my SP-404 MK2 is a great way to find inspirational patterns. But I don’t always have a sampler with me. And I don’t always have the patience to import and trim them in my SP404.

I want to make an app that chops and randomly sequences samples then plays back those sequences for you.

The toolkit

First prompt

can you help me create an app for music producers that takes samples, chops them up then plays chops in different sequences for the user. The user can select how long the chops will be. And the user can save sequences they like

ChatGPT’s response

Sure, I can help you with that!

Here are the high-level steps you can follow to create an app for music producers that does the tasks you’ve described:

Okay, the frameworks ChatGPT suggested use C++ which I don’t know. So we’re going to make a react web app for the prototype. Once we get the functionality down we can worry about porting it to a VST.

It might turn out to be more useful as a web and mobile app anyway.

From my research I think I would use FL Studio’s sdk or an open source library to make the VST. FL also offers FL Flowstone if you’d like to make your own synth, which is cool.

Create react app

I’ve created a boilerplate react app and asked ChatGPT to rewrite my App.js which is the main file that controls the app.

ChatGPT obliges and sends me this

import React, { useState } from 'react';
import './App.css';
import Dropzone from 'react-dropzone';

function App() {
  const [file, setFile] = useState(null);

  const handleFileSelect = (files) => {
    if (files.length > 0) {
      setFile(files[0]);
    } else {
      setFile(null);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Sample Slicer App</h1>
      </header>
      <main>
        <Dropzone onDrop={handleFileSelect} accept=".wav">
          {({ getRootProps, getInputProps }) => (
            <section>
              <div {...getRootProps()}>
                <input {...getInputProps()} />
                <p>Drag and drop a WAV file here, or click to select a file</p>
              </div>
            </section>
          )}
        </Dropzone>
        {file && <p>Selected file: {file.name}</p>}
      </main>
    </div>
  );
}

export default App;

Now I’ve got to install and figure out this Dropzone package. Dropzone it turns out it what lets you upload a file to an app.

So far, so good. I ask Chatgpt to add inputs for BPM and Key and it does that too. The app looks pretty nice! screenshot of the app

AI ADHD

Here’s where things start to go downhill…

So I’ve pretty much got the basic UX of the app set up, now I need to write code that actually chops and manipulates the uploaded sample.

ChatGPT loves to pull in outdated and sometimes deprecated packages from NPM, which isn’t ideal. These packages are like add-ons you need to install to make your app work.

It also loves to use different packages for every little function. And it loves to forget what it names variables and functions.

In the end it had me create 4 extra react components with incompatible functions and variables. It was a mess.

On the next episode of musical coding

Is my strategy to improve at prompting ChatGPT? No. It’s too tedious to constantly correct and coax it.

I am going to just pay the $20 for GPT-4, an upgraded language model. If I’m smart enough, I’ll figure out how to connect it to my code editor via API so it can more easily read my code.

Thanks for reading

That’s it for Devlog 1. Please share this article with your friends or on Twitter or Reddit if you enjoyed it! Stay tuned for part 2.