clickイベントの伝播を途中で止められるとiOSでMMLが再生されない

[argentum384]

iOS用のWeb Audioアンロック処理はdocumentのclickイベントに紐づけられているが、以下のようにaddEventListenerの引数 useCapture (参考) を指定していないのでイベント伝播のバブリングフェーズで実行される。 https://github.com/argentum384/flmml-on-html5/blob/80515ebc6266f13bfca6e67d05a565a3d46928a5/project/flmmlonhtml5-raw.js#L273-L282 このため、同ページ内の何らかのDOM要素のclickイベントで event.stopPropagation() や return false (後者はイベントハンドラ内限定) が実行されるような状況では、キャプチャフェーズまたは下位要素のバブリングフェーズの途中でclickイベントの伝播が止まってしまい、Web AudioがアンロックされずMMLの再生が始まらない。 例えばFlMMLonHTML5がロードされているぺージ内で特定の要素 ( <div> でも <button> でも何でも) に対してクリックを無効にする処理が他にある場合などが該当。

対処としては以下2点両方の修正を入れ、他のDOM要素のclickイベントに影響を受けないようにする。

• 前述のaddEventListenerの引数 useCapture に true を指定し、キャプチャフェーズでアンロック処理を実行するようにする
• 紐づけるイベントをdocumentのclickイベントではなく、最上位のDOM要素であるwindowのclickイベントに変更する

[argentum384]

ついでにChromeでもアンロック処理が将来必要になるのでこの対策も行ってしまいます ( https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio )。