let startA = 0;

//Replace with the end frame of state A

let endA = 61;

//Replace with the start frame of state B

let startB = 61;

//Replace with the end frame of state B

let endB = 120;

let didPlay = false;

let anim

let lottie;

​

let x = 0;

​

let animData;

let soundA;

​

function preload() {

  animData = loadJSON('play_pause.json');

  soundA = loadSound('yawn.wav');

  soundB = loadSound('charge.ogg');

}

​

function setup() {

  // createCanvas(800, 600);

  // background(255, 0, 0);

  lottie = createDiv();

  let params = {

    container: lottie.elt,

    loop: false,

    autoplay: false,

    animationData: animData,

    renderer: 'svg',

  };

  anim = bodymovin.loadAnimation(params);

  lottie.mousePressed(animate);

  lottie.position(0, 0);

  anim.setSpeed(1);

}

​

// function draw() {

//   fill(255, 50);

//   ellipse(random(width),random(height), 32);

// }

​

function animate() {

  soundA.play();

  let targetFrames = [0, 0];

  if (!didPlay) {

    didPlay = true;

    targetFrames = [startA, endA];

  } else {

    soundA.stop();

    soundB.play();

    didPlay = false;

    targetFrames = [startB, endB]

  }

  anim.playSegments([targetFrames], true);

}