Sound stops on iOS 15.0.2

[prubie]

We've had customers report issues with sound in the latest version of iOS. Sound stops at unpredictable times. Myself and a colleague can reproduce by clicking the buttons on the Pixi sound demo page: https://pixijs.io/sound/examples, though it can take some time to occur.

[bigtimebuddy]

This is so frustrating Apple! Ugh. We've had lots of issues on WebGL in iOS 15. Does this behavior show up on any other audio libraries, like Howler?

[prubie]

I haven't tried anything else I'm afraid. Is there any hope that it might be looked into soon? Thanks for the reply.

[teejayhh]

We have and iOS app with webview content were we use pixijs for a bunch of interactives. Unfortunately we have issues with sound as well, but they are more related to changes in the audio output. If you have headphones on and unplug/disconnect them the canvas app loses sound almost all the time and I am forced to reload the entire page, which is bad because progress is can be lost. Old createjs interactives (canvas games) do not suffer the issue.

The issue is reproducible on the https://pixijs.io/sound/examples page. Just use headphones and play the sounds, then disconnect and you won't be able to play the sound anymore. (that in ios14 btw)

[bigtimebuddy]

Are you able to isolate if this is a webaudio issue? Like, if you can find another pure webaudio example that still behaves incorrectly?

[teejayhh]

Well I tried howlr examples with an iPad and headphones and there its the same problem. Switching to headphones works, going back to speakers doesnt. In howlr I tried the Music Player where I need to press pause and play again to regain sound. It doesnt do that automatically.

[bigtimebuddy]

Looking at the howler issues on GitHub, seems like a lot of the same: tons of iOS 15 issues. If forcing HTML Audio works, that might have to be a workaround for the moment.

[manico]

Have the same issue of not being able to play sounds in iphone 15.3.
Any workaround?

[JoeMGomes]

I have the same problem. Works in an iPad 6th generation iOS 15.5 but not in iPhone7 iOS 15.7.3. Works correctly with Howler.js.

EDIT: Scratch that, the physical sound button was turned to silence mode >:(

[zj12357]

import { PlayOptions, Sound, sound } from '@pixi/sound';
import { isIOS, pageVisibilityChange } from '@shared/utils/tools';
import { gsap } from 'gsap';
import { resolveAndKillTweens } from './animation';

/**

• @description 处理背景音乐，一次只循环播放一个音频文件，如果请求播放新的音乐，则淡出/停止当前音乐。不改变其他声音的音量。
  */
  class BGM {
  // 当前播放音乐的别名
  private _currentAlias?: string;
  // 当前正在播放的音乐实例
  private _current?: Sound;
  // 当前设置的音量
  private _volume = 0.5;

  constructor() {
  // 禁用自动暂停
  sound.disableAutoPause = true;
  }

  /**

  • @description: 修复ios切换后台声音消失问题
    */
    private _fixIosSound() {
    if (isIOS()) {
    pageVisibilityChange(
    () => {
    this._current.context.audioContext.resume();
    },
    () => {
    this._current.context.audioContext.suspend();
    },
    );
    }
    }

  /**

  • @description: 播放背景音乐，如果有正在播放的音乐，则淡出并停止之前的音乐
    */
    public async play(alias: string, options?: PlayOptions) {
    // 如果请求播放的音乐已经在播放，则不做任何操作
    if (this._currentAlias === alias) return;
    // 淡出然后停止当前音乐
    if (this._current) {
    const _current = this._current;
    resolveAndKillTweens(_current);
    gsap.to(_current, {
    volume: 0,
    duration: 1,
    ease: 'linear',
    onComplete: () => {
    _current.stop();
    },
    });
    }
    // 找出要播放的新实例
    this._current = sound.find(alias);
    // 播放并淡入新音乐
    this._currentAlias = alias;
    this._current.play({ loop: true, ...options });
    this._volume = this._volume ?? options?.volume;
    this._current.volume = 0;
    resolveAndKillTweens(this._current);
    gsap.to(this._current, {
    volume: this._volume,
    duration: 1,
    ease: 'linear',
    onComplete: () => {
    this._fixIosSound();
    },
    });
    }

  /**

  • @description: 获取背景音乐的音量
    */
    public getVolume() {
    return this._volume;
    }

  /**

  • @description: 设置背景音乐的音量
    */
    public setVolume(value: number) {
    this._volume = value;
    if (this._current) {
    this._current.volume = this._volume;
    }
    }

  /**

  • @description: 暂停当前背景音乐
    */
    public pause() {
    if (this._currentAlias) {
    const currentSound = sound.find(this._currentAlias);
    if (currentSound) {
    currentSound.pause();
    }
    }
    }

  /**

  • @description: 恢复当前背景音乐
    */
    public resume() {
    if (this._currentAlias) {
    const currentSound = sound.find(this._currentAlias);
    if (currentSound) {
    currentSound.resume();
    }
    }
    }
    }

我已经修复好了

[zj12357]