iPhoneのSafariはメディアリソースを自動で読み込まない.js
2024-09-17
holorhysm ver0.5.2に対して、developer team内から「iPhoneだとセッション(プレイ)が始まらない」と報告があり調査したら発覚 Before
code:main.js
// 前略。これはある関数(async)の一部で、その関数はセッションを始めるときに呼び出されます
await new Promise((resolve) => {
audioUnit.element.addEventListener("canplaythrough", resolve, { once: true });
// audioUnit.element がHTMLMediaElement(HTMLAudioElement)です
});
// 後略。このあと、セッション中の処理を担当する関数にaudioUnitを渡して、そちらで audioUnit.element.play() を実行します。
手元にデバッグで使えるiPhoneの実機がないので気づかなかった
検証
code:main.js
await new Promise((resolve) => {
audioUnit.element.addEventListener("canplaythrough", resolve, { once: true });
setInterval(() => { console.log(audioUnit.element.readyState) }, 1000);
});
code:log.txt
1
1
1
︙
は？？？？？？？？
1(HAVE_METADATA)？？？？？？？？？
ということで、そもそもメディアリソースの読み込みをしていませんでした
こっちは4(HAVE_ENOUGH_DATA)になるのを待ってるのにそもそも読み込みが始まってないのあほすぎる
After
code:main.js
await new Promise((resolve) => {
audioUnit.element.addEventListener("canplaythrough", resolve, { once: true });
audioUnit.element.load(); // ←追加
});
ところで、なんでiPadとiPhoneで挙動が違うんですか？？？？？？？？？？？？？