How to customize button appearance or make button an image?

Clova

I need to to make an audio file play when clicking a button, such as in Dan Schiffman's example: var song; var button;

function setup() { createCanvas(200, 200); song = loadSound("rainbow.mp3", loaded); button = createButton("play"); button.mousePressed(togglePlaying); background(51); }

function togglePlaying() { if (!song.isPlaying()) { song.play(); song.setVolume(0.3); button.html("pause"); } else { song.stop(); button.html("play"); } }

function loaded() { console.log("loaded"); }

However, what if I wanted the button to be red instead of grey, or circular instead of rectangular, or larger? Or positioned somewhere specific? Or more preferably, how could I replace the button with an image that plays the song when clicked? I need multiple buttons, and I want them all to look different and play different audio files when clicked.

I've already seen examples where you can click ellipses to change the color or something, but I can't find or figure out how to make it work specifically for audio. I'm extremely new to p5.js and don't understand much of it.

Thank you

NoName

please apply Ctrl + O to your code