In this example, you can control the speed of music in a simple way with the interaction of an image classification machine learning model.
Since ml5.js runs on the browser you need to include the scripts to the header of your html file, including p5.js:
Add the music into your html file, in this example I am playing The Symphony №5 in C minor of Ludwig van Beethoven.
Let’s create the model
Teachable Machine is a fast and easy way to create machine learning models for your sites, you just need to collect your examples, then train the model and export the model.
For my model, I have created 3 clasess, left, right and nothing:
Left: to play slow
Right: to play fast
Nothing: no action
Once finished the training, get the model as a sharable link.
Add the model to your js file
First, create some variables for video and model:
Now, let’s create the functions:
- In preload() function, we load the model to be sure is ready before we can apply the image classification.
- In setup() function we create the canvas and flip the video so it is rendered as a mirror.
- In classifyVideo() function, we classify the flipped video again. In gotResult() function, we use two parameters, one to log the error if there is an error or to return the results of the classifier.
- In draw() function, we render the video, the labels and the commands to set the rate at which the media is being played back.