P5js sound and Safari

p5.js Libraries
1

Hi,
I am experiencing some problems with p5.sound on Safari.
I simply can’t hear the sound but the files are loaded and they seem to be played when I check in the console inspector. I just don’t hear the sound and yes, I unmuted my speakers…
p5js and p5.sounds are updated as per this link here.
I also tried with ogg files. same result. The examples on p5js sound page work though…
No idea of what exactly is going on. Anyone experiencing similar things? I can’t understand what I am doing wrong.

Safari version is 12.1.2 by the way.

thanks and stay safe!!

here is some code

var canvas;
var canvSize = 512;

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


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

function setup(){
	canvas = createCanvas(canvSize,canvSize);
	playMusic();
}


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();
}
1 Like
2

Hello @antocreo,

I think you’ve stumbled upon the user-must-interact-before-sound-can-be-played-feature. :blush:

1 Like
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