let imgBtn2 = [];

let img = [];

let phototext = [];

let audio = [];

let audioBtn = [];

let photoNum = 5,

    audioNum = 5;

let photoState = [false, false, false, false, false];

let audioState = [false, false, false, false, false];

let stopBtn;

let readspeechBtn;

let readspeechState=false;

let cnv;

​

function preload() {

    for (let i = 0; i < photoNum; i++) {

    imgBtn[i] = createImg(`assets/photo${i+1}.jpg`);

    phototext[i] = loadSound(`assets/photo${i+1}text.m4a`);

    audio[i] = loadSound(`assets/audio${i+1}.mp3`);

    audioBtn[i] = createButton("audio"+str(i+1));

    }

}

​

function setup() {

    cnv = createCanvas(300, 225);

    background(200, 200, 220, 255);

    textAlign(CENTER);

    textSize(18);

    text("choose a picture on the right", width / 2, height / 2 - 30);

    text("and an audio on the below", width / 2, height / 2);

    text("to tell your personal story", width / 2, height / 2 + 30);    

    for (let a = 0; a < photoNum; a++) {

        imgBtn[a].style("height:100px");

        imgBtn[a].position(width + 10, 10 + 100 * a);

        imgBtn[a].mousePressed(function() {

            loadImage(imgBtn[a].elt.src, function(img) {

                image(img, 0, 0, cnv.width, cnv.height)

            });

            photoState[a] = !photoState[a];

            if (readspeechState) {

                phototext[a].setVolume(0.5);

                for (let aa = 0; aa < a; aa++) {

                    phototext[aa].stop();

                }

                for (let aaa = a + 1; aaa < photoNum; aaa++) {

                    phototext[aaa].stop();

                }

                if (photoState[a]) {

                    phototext[a].play();

                };

                if (!photoState[a]) {

                    phototext[a].stop();

                }

            };

        });

    };

    for (let j = 0; j < 3; j++) {

        audioBtn[j].position(10 + 80 * j, height + 20);}

        for (let j = 3; j < audioNum; j++) {

        audioBtn[j].position(-230 + 80 * j, height + 80);}

    for (let j = 0; j < audioNum; j++) {

        audioBtn[j].class("myButton");

        audio[j].setVolume(0.3);

        audioBtn[j].mousePressed(function() {

            audioState[j] = !audioState[j];

            for (let jj = 0; jj < j; jj++) {

                audio[jj].stop();

            }

            for (let jjj = j + 1; jjj < audioNum; jjj++) {

                audio[jjj].stop();

            }

            if (audioState[j]) {

                audio[j].play()

            };

            if (!audioState[j]) {

                audio[j].stop()

            };

        });

    }

​

    // stopBtn = createButton("STOP the AUDIO");

    // stopBtn.id("stopBtn");

    // stopBtn.position(10, height + 160);

    // stopBtn.mousePressed(function() {

    //  for(let i=0;i<audioNum;i++){

    //      audio[i].stop();

    //  }

    // });

​

    readspeechBtn = createButton("READ SPEECH (for the photos)");

    readspeechBtn.id("readspeech");

    readspeechBtn.position(10, height + 150);

    readspeechBtn.mousePressed(function() {

        readspeechState = !readspeechState;

        //print(readspeechState);

    });

}

​

function draw() {}

​

// function windowResized(){

//   resizeCanvas(windowWidth, windowHeight);

// }