EDIT: Before you can access the data from a song you need to have user input. additional note: the song plays at normal speed but the recorder runs at 1-2 fps. So the animation is short and fast.

I'm working in p5.js to make a music visualization, I have a playlist of mp3's I want to make clips for, and I am using frameCount to reset the capturer when the song is over.

I've included all code that would be relevant as to the why song.duration() returns zero.

var song

// var songs = []

var fft

var particles = []

var backgroundimage

var focus

var s


function preload() {

  // for(var i = 0; i < 20; i++) {

  //   songs.push(loadSound('audio/audio'+(i+1)+'.mp3'))

  //   console.log(songs[i].duration())

  // }


  song = loadSound('audio1.mp3')

  console.log(song.duration())

  img = loadImage('picture/image.png')

}


function setup() {

  createCanvas(1920, 1080)

  fft = new p5.FFT()

  imageMode(CENTER)

  angleMode(DEGREES)

  focus = {x: 250, y: 250}

  s=0

  //backgroundimage = new AnimatedImage(img)

}

function draw() {

  //This is to test why the array of songs have no duration()

  if( frameCount === 1){

    capturer.start()

    song.play()

  } else if (frameCount === timetoframes(song.duration())) {

    capturer.stop()

    capturer.save()

    noLoop()

  }


  // if (frameCount === songs[s].duration() * 24) {

  //   capturer.stop()

  //   capturer.save()

  //   frameCount = 1

  //   s++

  // } 

  // if( frameCount === 1 ) {

  //   capturer.start()

  //   songs[s].play()

  // }