How to customize button appearance or make button an image?

edited October 2017 in p5.js Library Questions

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

Answers

Sign In or Register to comment.