0

Пишу WebGL-приложение с использованием Three.js. В приложении есть фоновая loop-мелодия, а так же при клике на некоторые интерактивные элементы воспроизводится звук (иногда по 5-7 секунд).

Все работает идеально, но в Safari на IOS со временем перестает играть фоновая мелодия и возвращается через 5-45 секунд. Погуглив я нашел такую особенность Safari под IOS:

Одно из самых серьезных ограничений мобильной версии Safari состоит в том, чтоединовременно может воспроизводиться только один аудиопоток. Медиаэлементы HTML5в mobile Safari являются синглтонами, поэтому может воспроизводиться лишь один потокHTML5 audio (и HTML5 video).

Однако несколько звуков одновременно воспроизводятся и какое-то время все работает нормально.

Так же Safari дает воспроизвести звук только если юзер кликнул по странице:

userInteraction(){
    if(!this.listener){
      this.listener = new this.THREE.AudioListener();

      // HACK FOR IOS
      const mediaElement = new Audio( './sounds/soundtrack.mp3' );
      mediaElement.loop = true;
      mediaElement.play();

      this.mainTheme = new this.THREE.Audio( this.listener );
      this.mainTheme.setMediaElementSource(mediaElement);
      this.mainTheme.setVolume( Math.ceil(this.musicVolume) / 100 );
      this.mainTheme.setLoop( true );
      this.mainTheme.play();
    }
  }

mainTheme добавлено через mediaElement, ибо иначе звук не работает вообще, можно сказать хак, не знаю.

После добавления mediaElement остальные звуки работают и вызываются вот так:

  playSound(key){
    const sound = new this.THREE.AudioExt( this.listener );
    sound.setBuffer( this.sounds[key] ); // SO: this.sounds - загруженные звуки
    sound.setVolume( Math.ceil(this.effectVolume) / 100 );
    sound.play();
  }

Собственно, почему mainTheme перестает играть и как это исправить?

P.S. На Android и ПК в Firefox/Chrome все работает прекрасно.

3
  • Сами же написали - особенность Safari под IOS. Как сделать? Никак. 28 мар 2019 в 5:09
  • @StepanKasyanenko я видел приложения, которые работают без этой проблемы, значит решение есть. К сожалению в минифицированном коде сложно разобраться, пока я увидел особенность, что в основном для каждого звука добавляют элемент <audio> в DOM и уже с ним оперируют, но у меня это не решает проблему.
    – RTK
    28 мар 2019 в 10:00
  • 2
    Я не знаю, поможет ли это вам, но как минимум посмотрите в сторону WebAudioContext. Там вы можете микшировать аудио данные, что позволит вам использовать один аудио поток на выходе, но с неограниченным количеством входящих аудио потоков. 28 мар 2019 в 11:40

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.