p5.js Safari play() pause() jump() problem

Question

I am trying to make an audioplayer using the p5.js Javascript Library and Soundcloud API. Most of it works well, but I am encountering some minor problems in the Safari Browser.

This is the website and the javascript file with all the functions is sketch.js.

There is a progressbar on the website and when clicked it should jump to a point in the song.

var progressBar = document.getElementById('progressBar');

progressBar.addEventListener("click", function(progbar) {
  var percent = (progbar.offsetX / this.offsetWidth);
  sound.jump(sound.duration() * percent);
  sound.onended(endSong);
}, false);

In Firefox it works as expected as long sound.playMode('restart') is set. But Safari creates an InvalidStateError

When sound.playMode('sustain') is set both Firefox and Safari equally jump to a point in the song but the song is played twice.

Does anybody have a clue what might be wrong here?

From the sound of what you are doing, restart should be the mode to use. I believe the behaviour you are seeing for sustain is expected, judging from documentation. — vs97, Jul 24 '19 at 09:40
I found out that there might be a bug in the p5.sound file: https://github.com/processing/p5.js-sound/issues/372 — Joep, Jul 25 '19 at 17:00

score 0 · Accepted Answer · answered Dec 11 '19 at 23:30

I have the following workaround for Safari, Firefox and Chrome:

progressBar.addEventListener("click", function(progbar) {
  percent = (progbar.offsetX / this.offsetWidth);
  setTimeout(function(){
    Object.assign(sound, {_playing: true});
    sound.playMode('restart');
  }, 100);
  sound.stop();
  sound.playMode('sustain');
  sound.jump(sound.duration() * percent);
}, false);

p5.js Safari play() pause() jump() problem

1 Answers1