【AudioContext】メディアプレイヤーを騙してAppleの消音モードを貫通させる

問題

JavaScript の AudioContext 、便利ですよねぇ。
一度くらいは使ったことがあるかもしれません。（というか、この記事を読んでいる時点でそうでしょう。）

AudioContext はメディアではないですから、<audio> タグと異なり、iPhone や iPad では、消音モード（マナーモード）有効化中には残念ながら音声が再生されません。

.js

button.addEventListener('click', () => {   // ユーザーの操作がないとそもそも再生されない
    const real = new Float32Array([0,1]);
    const imag = new Float32Array([0,0]);
    const ac = new AudioContext();
    const osc = ac.createOscillator();
    const wave = ac.createPeriodicWave(real, imag, { disableNormalization: true });
    osc.setPeriodicWave(wave);
    osc.connect(ac.destination);
    osc.start();                           // 消音モードでは聴こえない
});

原因

iOS 、iPadOS の仕様です。

解決策

短い無音の音声ファイルを同時に鳴らしましょう。

.html

<audio id='silentAudio' src='slient.wav'></audio>  <!--bodyに追記する-->

.js

button.addEventListener('click', async () => {
    const silentAudio = document.getElementById('silentAudio');
    const real = new Float32Array([0,1]);
    const imag = new Float32Array([0,0]);
    const ac = new AudioContext();
    const osc = ac.createOscillator();
    const wave = ac.createPeriodicWave(real, imag, { disableNormalization: true });
    osc.setPeriodicWave(wave);
    osc.connect(ac.destination);
    await silentAudio.play();              // 追記する
    osc.start();                           // 聴こえるようになる
});

ちなみに、あんまり短いと認識されないので、1秒くらいのファイルを用意しましょう。
（Audacityなどを使うと簡単に作成できます。）