iOS14.5以上で他アプリのバックグラウンド再生が止まってしまう問題を解消するPull Requestを出そうとしています

ご挨拶

はじめまして、flmml-on-html5 を使わせて頂いている t_hazawa と申します。素晴らしいプロダクトを公開していただき、誠にありがとうございます。
Pull Request を送信しようと考えています。

問題と Pull Request について

問題の背景

iOS14.5 以上において、AudioContext が生成されたタイミングで、他アプリのバックグラウンド再生を停止させる挙動となったようです。

問題点

このため、 flmml-on-html5 を読み込んだ段階で、iOS14.5以上では、他のアプリのバックグラウンド再生が停止されてしまっていました。
サイト訪問者からすると、サイトを開いただけで他アプリのバックグラウンド再生が止まってしまう、という問題点がありました。
- サイト内のFlMMLプレイヤーで再生を開始したタイミングで、他アプリのバックグラウンド再生が止まるのは問題なさそうです。

動的インポートではダメそう

なお、 ES2020 からは「動的インポート」がありますが、 https://qiita.com/pentamania/items/2c568a9ec52148bbfd08 に示されている理由(※)で、動的インポートでは、この問題点を解決することはできませんでした。
- ※: ユーザーイベントでも、途中で非同期処理(=動的インポート) を挟むとアンロックできないという点です。

私が出そうとしているPull Request の内容

そこで、私は、プレイヤーで再生する直前に AudioContext を生成するように flmml-on-html5 に修正を加えました。
- 下記の箇所に変更を入れています。
  - https://github.com/argentum384/flmml-on-html5/blob/master/src/flmmlonhtml5-raw.js#L256-L270
  - https://github.com/argentum384/flmml-on-html5/blob/master/src/flmmlonhtml5-raw.js#L49
  - 具体的には、元々の実装では、「JS読み込み時にAudioContextを生成し、画面のどこかをクリック時にアンロック」されていたのを、「HTML上でプレイヤーを表すDOMに専用のクラスをつけ、そのクラスがクリックされたときに生成&アンロック」を行うようにしました。
  - どのDOMがプレイヤーかを指定するセレクタを外から渡せるように、これから改良して、その後 Pull Ruquest を送信しようと考えています。
修正後には、iOSで上記の問題がなくなり、Windows10, Mac, iPhone, Android の主要ブラウザで問題なく動作をさせられました。
この問題は一般性があるかと思い、Pull Requestを送信しようと考えています。
- 上記の手直ししたい箇所があるため、一週間後頃に提出できるかと思います。
- 作業がかぶらないように事前に連絡させて頂きました。
Pull Request 送信後、もしよかったらレビューや取り込みをして頂けますと幸いです。

以上となります。どうぞよろしくお願いいたします。

@t-hazawa ご連絡ならびに調査いただきありがとうございます。私の環境でも iPadOS 14.7 の Safari で同現象を確認しました。もともと #11 で対応した window のクリックイベントでアンロックというのも (楽ではありますが) 強引だったので、よい機会かなとも思います。

対処の方向としてもご提案頂いたこちらの手法に賛成します。

具体的には、元々の実装では、「JS読み込み時にAudioContextを生成し、画面のどこかをクリック時にアンロック」されていたのを、「HTML上でプレイヤーを表すDOMに専用のクラスをつけ、そのクラスがクリックされたときに生成&アンロック」を行うようにしました。

どのDOMがプレイヤーかを指定するセレクタを外から渡せるように、これから改良して、その後 Pull Ruquest を送信しようと考えています。

セレクタを渡す API の形など、具体的なところは実装を拝見してからご意見させて頂きます。

本件は後方互換性のない修正が見込まれますので、メジャーアップデートになる想定です。ちょうど現在別件で大きめの変更を含んだ次バージョン v2.0.0 の作業中ですので、本件は v2.0.0 でのリリースとさせていただきます。

Pull Request につきましてはご案内遅くなってしまい恐縮ですが、先ほどブランチ 2.0.0 で本件に関わりそうな部分の下地は整いましたので、 PR はこちらのブランチを基に作成いただけますと幸いです。
ただ現行 v1.x 系とは別物同然に変わっている部分も多くありますので、v2.0.0 向けに PR を作成いただくにあたり、手戻りが大きくご負担を強いてしまうかもしれません。
その場合は、別途本件専用の v1.x を基にしたブランチをこちらで切り、そちらに PR を投げて頂くことも可能ですので、改めてご相談下さい。

改築中につきややこしい事情になっておりお手数おかけしますが、何卒よろしくお願いいたします。

@t-hazawa 遅ればせながら確認になりますが、プレイヤーを指定するセレクタを外から渡す以外の変更は

https://github.com/argentum384/flmml-on-html5/blob/master/src/flmmlonhtml5-raw.js#L256-L270

https://github.com/argentum384/flmml-on-html5/blob/master/src/flmmlonhtml5-raw.js#L49

の2箇所のみのご想定でしたでしょうか。もしそうでしたら、生成した AudioContext のサンプルレート (ユーザーのオーディオ再生環境に依存) をシーケンサに渡す前にシーケンサの初期化を行うこととなりますが、その場合正しいサンプルレートがシーケンサに渡らないのでは、という懸念があります。

このことを考慮するとシーケンサの初期化タイミングも AudioContext 生成後に延ばすなどの変更の必要があり、Worker 側も巻き込むような修正を予想していました。
そのため、いくつかの別件の修正を止めていますが、このまま上記を考慮したご対応をお任せしてしまっても問題ないでしょうか？
あるいは本件を度外視した修正分のみの Pull Request を送信いただいても問題ありません。

(本件すでに認識されていましたら失礼しました)

@argentum384 お世話になっております。Pull Requestの提出が遅くなっていて申し訳ありません。ちょっとのんびりしすぎていました。

Pull Request を出すのに本腰を入れて、今週末には出したいと思います。

自分の実装では、 https://github.com/argentum384/flmml-on-html5/blob/master/src/flmmlonhtml5-raw.js#L49 の箇所で、 FlMMLonHTML5.audioCtx.sampleRate がなかったら、とりあえず 48000 を決め打ちで渡すようにしています。

直後に this.setInfoInterval(125); があるので、 FlMMLonHTML5.audioCtx.sampleRate が変更されたら、125ミリ秒以内にworker に伝わるかな、と思っていたのですが、いま見てみると、まったくそんなことはないですね。。 (48000じゃない時に動作しなさそう。。)

…そういうわけで、自分の修正だと、サンプリングレートが48000 のときにしか動かなさそうです！うーん、ちょっと自分の修正をそのまま取り込んで頂くのは難しい気がしてきました。。

一応、prをお送りしますが、申し訳ありませんが、良い形にして頂いて取り込んで頂ければ幸いです。

早期(今日か明日くらい)に提出できればと思いますので、どうぞよろしくお願いいたします :bow:

@t-hazawa ご確認ありがとうございます。今後の動きのため、取り急ぎ状況だけ確認させて頂きたかったのですが、急かすようになってしまい申し訳ありません。

そうですね、 FlMMLonHTML5.audioCtx.sampleRate を Worker に伝えるタイミングはまさに https://github.com/argentum384/flmml-on-html5/blob/9436b7e2fb72c7c6dedfe24ced182fc28c806dd4/src/flmmlonhtml5-raw.js#L47-L51 このタイミングしかないので、ご想定の実装ではサンプリングレート 48000 Hz 以外だと再生速度が速かったり遅かったりしそうです。このあたりの対処はこちらでよしなにさせて頂きますね。

なおマージ先ブランチはあらためて

master をもとに修正頂いていれば 1.x_to_2.x
2.0.0 をもとに修正頂いていれば 2.0.0

にしていただければ幸いです。(前者の場合もコミットが残るよう、最終的にはこちらで 2.0.0 に手動マージします)

お手数ですが、よろしくお願いいたします。

argentum384 / flmml-on-html5