# 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:** 1\
**Showing post:** 3

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

}

```

---

_[View the full topic](https://discourse.processing.org/t/p5js-sound-and-safari/20880)._