Audio Issue: Safari and iOS

p5.js Libraries
1

I’ve just been working on a simple p5.js script and thought it was working well as in Chrome things are fine:

now.danieljwilson.com

However I just get Loading... when I try to view it on Safari or on Chrome on my iPad.

I have updated to the latest versions of p5.js (v0.7.2) and p5.sound.js (v0.3.8).

I am using an ogg audio snippet.

The error is:

 The error stack trace includes: 
preload@http://now.danieljwilson.com/Schedule_Web.js:15:20

Line 15 of the script is:
sound = loadSound('assets/Electronic_Chime.ogg');

And the full script is below. Any ideas greatly appreciated!

var sched_h = [ 8, 8, 9, 9,11,11,12,12,15,16,18,18,19,20,21]; //need to add pomodoro breaks
var sched_m = [ 0,45,30,45,15,30,15,45,45, 0, 0,30,30,30,30];
var sched_event = ["STATS/MATH", "PROGRAMMING","BREAK","WORK 1/WRITE","BREAK","READ","LUNCH","WORK 2", "BREAK", "WORK 3", "COMMUTE", "DINNER", "RESEARCH", "SING/STRETCH"];
var color_array = [0,0,1,0,1,0,1,0,1,0,2,2,2,2];

var sound;
var previous_event = 0;

var myFont;
function preload() {
  myFont = loadFont('assets/Hasklig-ExtraLight.otf');
  sound = loadSound('assets/Electronic_Chime.ogg');
}

function setup() {
  createCanvas(displayWidth, displayHeight);
  noStroke();
  // Set text characteristics
  textFont(myFont);
  textSize(32);
  textAlign(CENTER, CENTER); 
}

function draw() {
  background(204);
  var s = second();
  var m = minute();  // Values from 0 - 59
  var h = hour();    // Values from 0 - 23
  
  for (var i = 0; i<sched_event.length; i = i+1){
    var task_time_start = (sched_h[i] * 60 + sched_m[i]) * 60; // in seconds
    var task_time_end = (sched_h[i+1] * 60 + sched_m[i+1]) * 60; // in seconds

    var current_time = s + 60*(m + 60*h);
    
    if (current_time >= task_time_start && current_time < task_time_end){
      var current_task = sched_event[i];
      var duration = task_time_end - task_time_start;
      var elapsed = current_time - task_time_start;
      var colour = color_array[i];
      var current_event = i;
    }
  }
  print("current_event: " + current_event)
  print("previous_event: " + previous_event)
  if (current_event != previous_event) {
    sound.play();
  }
  previous_event = current_event;

  // color: 0/1/2 -> work/break/self
  if (colour == 0){
    fill(66,158,244, 60);
  }
  if (colour ==1){
    fill(118,219,107, 60);
  }
  if (colour ==2){
    fill(216,168,34, 60);
  }
  
  rect(0,0,width,height);
  rect(0, 0, elapsed * width/duration, height);
  
  textSize(60);
  fill(0);
  text(current_task, width/2, height/2);
 
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    var fs = fullscreen();
    fullscreen(!fs);
    sound.play();
  }
}

function windowResized() {
  resizeCanvas(displayWidth, displayHeight);
}
1 Like
2

Daniel,
Hi there. Did you ever this to work? I wasn’t sure from the URL. I’m having the exact same issue with an .mp3 audio file. Plays fine in the browser but not in Safari on an iPad.

Also using sound = loadSound();
Thanks,
Dermot

3

i not know how much that little bit ?old? post is still valid,
-a- you use different file type
-b- there is a new p5.js version

please test again your 2 browser/devices:
https://editor.p5js.org/p5/sketches/Sound:_Amplitude_Analysis
as there code and song file is available to all who want help you
and also test that on their systems.
( pls can download and check, it uses the latest p5.js 0.9.0, p5.sound.min.js v0.3.11 )

also pls report more exact: systems and version numbers