【safari】safariでclickイベントが動かないのは、非対応であるWebSpeechAPIのコードが残っていることが原因だった
背景
音声合成を使うため、WebSpeechAPIを使っていました。
が、safariは非対応だった。
WebSpeechAPI
Web Speech API - Web API | MDN
そのため、safariの場合は Amazon Polly を使って音声合成を実現しようとしました。
Amazon Polly
https://docs.aws.amazon.com/ja_jp/polly/latest/dg/polly-dg.pdf
が、chromeではAmazonPollyの実行をclickイベントで行えるのに、なぜかsafariでは実行出来ない。。。
調査すると、WebSpeechAPIのコードが同html上に存在すると、clickイベントが動かなくなる ということでした。
具体的には以下のコードが残っていることでエラーになっていました。
// SpeechRecognitionのインスタンスを作成 SpeechRecognition = webkitSpeechRecognition || SpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'ja'; // 日本語を解析 recognition.interimResults = true; // マイクから拾った暫定の判定内容を取得 recognition.continuous = true; // 音声認識を常にON 何も音声入れないと1分くらいで切れる
これらのコードを削除するとエラーが無くなり、clickイベントが発生するようになりました。
そりゃブラウザ非対応なんだから当然ですよね。。
safariでdevtool使って確認すれば良かった話でした。
デバッグを面倒くさがった報いです。。
safariのdevtoolについて
デフォルトではdevtoolが無効になっているので下記の手順で有効にしてください。
MacのSafariで「開発」メニューのデベロッパツールを使用する - Apple サポート (日本)
safariはクセがあって大変ですね。。
