「技術的には可能です」と業務で何回か言った事があるのですが，先日
「技術的に不可能です」と初めて言ったので，その内容を紹介します．
背景
あるWebシステムの画面改修を依頼され，上からこんなことを言われました．
「この画面で特定の条件の時に通知音を出して欲しい．
条件を満たす場合は，画面を開いた直後に通知音を出して欲しい」
自分はさっそく業務に取り掛かりました．
実装1
画面で音を出すのは楽勝だと思っていた自分は，以下の実装しました．
<!doctype html>
<audio src=audio01.mp3 preload=auto></audio>
<script>
const audio = document.querySelector("audio"); // 通知音ファイルの読み込み
onload = () => {
audio.play(); // 画面を開いた直後に通知音を再生
setTimeout(() => { audio.play() }, 3000) // 画面を開いた3秒後に通知音を再生
};
</script>
色々省略しているのですが，これだけで画面から音を出せます．
通知音ファイルaudio01.mp3はindex.htmlと同じ場所に配置されるものとします．
問題
実装した画面ですが，何故か音が出る場合と音が出ない場合があると判明しました．
色々試してみると，音が出る/出ないの条件は以下の通りでした．
- 他のページからマウスクリックでページアクセスすると，最初から音が出る
- F5の画面更新をすると，最初の音が出ない
- F5の画面更新後に何もしないと，3秒後の音も出ない
- F5の画面更新後に適当に画面をマウスクリックすると，3秒後のみ音が出る
- URLを直接打ち込んで画面遷移した場合も音が出ない（=F5の画面更新と同じ症状）
調査した結果，プログラムの実装には問題がないことがわかりました．
つまり，技術では解決できない何かがあることがわかりました．
原因
音が出ない原因は，Webブラウザが音を消しているからでした．
これは「ブラウザの自動再生ポリシー」と呼ばれるもので，各ブラウザで定義されています．
Qiitaだと，以下の記事が参考になります．
簡単にまとめると，Web画面を開いた瞬間に爆音が流れる迷惑なサイトへの対策として，
2018年あたりにブラウザ側が音の再生を規制しました．
htmlファイルは，Webブラウザによって解釈・実行されます．
そのため，プログラム側でブラウザの規制・制限をすり抜けることは困難です．
対策
プログラム・実装側での対策は技術的に不可能であるということがわかりました．
そのため，要件あるいは設計を見直すことで対策する必要があります．
自分は以下の3案を検討し，チームメンバーに対して報告しました．
- 画面を開いた最初に「この画面では音が出ます」というポップアップ（モーダル）を表示し，了承ボタンをクリックして貰うことで，音が流れる条件を満たす
- 画面に🔕ボタンを配置し，ユーザーがボタンを押して🔔に変えた環境でのみ，音を出す
- 音が出せる場合はそのまま音を出し，音を出せない場合は画面端にポップアップを出す
利用ブラウザを指定する，ユーザーにブラウザ設定を変えて貰うなどの方法でも対策可能ですが，良い案とは言えません．
結果
チームで検討した結果，2番目の🔕ボタンを配置する案が採用となりました．
1番目の案は，他の画面との整合性の観点から却下となりました．
3番目の案は，ブラウザの自動再生ポリシーを説明する中で，ユーザーへの事前説明なく音が出るのは良くないという話になり，却下となりました．
今回，2番目の案が採用となった理由は，以下の通りです．
- 対象の画面には既に幾つかのボタンが配置されており，新しいボタンが追加されても違和感がない
- 画面にボタンを配置するための余白が十分にあり，UIの変更が最小限
- 音を出さない場合，既存の操作方法からの変更点がなく，マニュアルの変更箇所が小さい
- 3案の中でUX観点での変更が最も小さい
終わりに
「技術的に不可能です」と初めて言った話を紹介しました．
まさか「画面で音を出す」という簡単に思える改修でこの言葉を使う時が来るとは...驚きです．
また技術的に不可能な話が来たら，紹介したいと思います．