Safari блокирует звук при большой загрузке холста - PullRequest
Новая
       10

Safari блокирует звук при большой загрузке холста

0 голосов
/ 25 января 2019

Я запускаю экземпляр P5 для создания анимированного canvas фона.Однако я обнаружил, что у Safari возникают проблемы с уровнем детализации, и, когда детализация слишком высока, он полностью прекращает потоковую передачу звука.

Это код P5: 

function sketch(p) {

  let x = 100;
  let y = 100;

  p.setup = function() {

  p.createCanvas( window.innerWidth,  window.innerHeight );   
  p.fill(0);
  p.stroke(2,2,2);
  p.strokeWeight(1);


  };


let t = 0; // time variable


p.draw = function () {

  for (let x = 0; x <=  p.width; x = x + 80 + t) {

    for (let y = 0; y <=  p.height; y = y + 60 + t) {
      // starting point of each circle depends on mouse position
      let xAngle =  p.map( p.mouseX, 0,  p.width, -4 *  p.PI, 4 *  p.PI, true);
      let yAngle =  p.map( p.mouseY, 0,  p.height, -4 *  p.PI, 4 *  p.PI, true);
      // and also varies based on the particle's location
      let angle = xAngle * (x /  p.width) + yAngle * (y /  p.height);

      // each particle moves in a circle
      let myX = x + 60 *  p.cos(2 *  p.PI * t + angle);
      let myY = y + 20 *  p.sin(2 *  p.PI * t + angle);

      p.polygon(myX, myY, 5, 6); 

    }

  }

  t = t + 0.01; // update time
};


p.polygon = function(x, y, radius, npoints) {
  var angle =  p.TWO_PI / npoints;
   p.beginShape();
  for (var a = 0; a <  p.TWO_PI; a += angle) {
    var sx = x +  p.cos(a) * radius;
    var sy = y +  p.sin(a) * radius;
     p.vertex(sx, sy);
  }
   p.endShape( p.CLOSE);
};


};

var myp5 = new p5(sketch, "P5");

Итакэто работает нормально, и я могу добавить audio элементы с Javascript, и они играют хорошо.Но если я увеличу количество фигур на экране, то Safari просто откажется воспроизводить потоковое аудио (но не выдаст ошибок).Firefox и Chrome не отображают это поведение, они воспроизводят звук независимо от того, что.

Следующие изменения достигают точки, когда Safari работает неправильно: 

for (let x = 0; x <=  p.width; x = x + 30 + t) {

for (let y = 0; y <=  p.height; y = y + 30 + t) {

Я предполагаю, что этоSafari - что-то вроде защиты памяти, но могу ли я обойти это?Рисование холста на самом деле не кажется слишком интенсивным, поэтому я не уверен, почему это может вызвать проблемы с памятью.

...