# P5js sound and Safari

**URL:** <https://discourse.processing.org/t/p5js-sound-and-safari/20880>\
**Category:** Libraries\
**Created:** [May 14, 2020, 6:07pm UTC](https://discourse.processing.org/t/p5js-sound-and-safari/20880 "2020-05-14T18:07:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![antocreo](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@antocreo](https://discourse.processing.org/u/antocreo)\
**Post date:** [May 14, 2020, 6:07pm UTC](https://discourse.processing.org/t/p5js-sound-and-safari/20880/1 "2020-05-14T18:07:57Z")

</div>

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](https://github.com/processing/p5.js-sound/issues/383).  
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

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 14, 2020, 6:29pm UTC](https://discourse.processing.org/t/p5js-sound-and-safari/20880/2 "2020-05-14T18:29:16Z")

</div>

Hello @antocreo,

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

> [@Getting sounds to play in mobile?](https://discourse.processing.org/t/getting-sounds-to-play-in-mobile/20673/2):
>
> Hello @calfish, Some browsers, like Safari on iOS, won’t play audio unless the user interacts with the page first, like tapping a button. To successfully play audio in those browsers, you could add a “Press to play” button and start playing audio after the user tapped it. From [Apple’s Safari HTML5 Audio and Video Guide](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html#//apple_ref/doc/uid/TP40009523-CH6-SW1): Note: On iOS, the Web Audio API requires sounds to be triggered from an explicit user action, such as a tap.

---

<div class="post-metadata">

**Author:** ![antocreo](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@antocreo](https://discourse.processing.org/u/antocreo)\
**Post date:** [May 15, 2020, 1:53pm UTC](https://discourse.processing.org/t/p5js-sound-and-safari/20880/3 "2020-05-15T13:53:58Z")

</div>

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! 🙂

```auto
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;
  }

}

```