スリ飯屋Malankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

【safari】safariでclickイベントが動かないのは、非対応であるWebSpeechAPIのコードが残っていることが原因だった

【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はクセがあって大変ですね。。