P5js sound and Safari

p5.js Libraries
3

Hi Sven,
thanks a lot for your reply. I didn’t know that but It might be the reason, indeed.
I looked around for other options, even using hidden HTML5 elements like createAudio and autoplay didn’t work.
mouseMoved() didn’t work either as interaction, so I eventually had to create an initial mouseReleased() action… for this project is not important but it is a bit annoying anyways.

I am sharing the workaround in case this post could be useful to anyone else…

thanks! :slight_smile:

var canvas;
var canvSize = 512;

var tracks = [];
var soundfolders = 'sounds/';
tracksTitles = ['01.mp3','02.mp3'];
var trackCounter = 0;

var page;


function preload() {
  soundFormats('mp3', 'ogg');
  for (var i = 0; i < tracksTitles.length; i++) {
    tracks.push(createAudio(soundfolders+tracksTitles[i]));
  }
}

function setup(){

	canvas = createCanvas(canvSize,canvSize);
	// playMusic();
  page = 'click';

}

function draw(){
  background(255);
  noStroke();
  textSize(50);
  textAlign(CENTER,CENTER);
  switch (page){

    case 'click':
      text(page, width/2,50);
      fill(0);
      ellipse(width/2,200,100,100);
    break;

    case 'track':
    text(page + " " + trackCounter, width/2,50);
    fill(0,255,120);
    ellipse(width/2,200,100,100);

    break;
  }

}


function playMusic() {
  shuffle(tracks, true);
  for (var t of tracks)  t.onended(playNext);
  tracks[trackCounter].play(); 
}

function playNext() {
  tracks[trackCounter = (trackCounter + 1) % tracks.length].play();
}

function mouseReleased(){

  switch (page){

    case 'click':
      playMusic();
      page = 'track';
    break;

    case 'track':
      tracks[trackCounter].stop(); 
      playNext();

    break;
  }

}
2 Likes