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

このブログでは、フリーランス5期目となる自身の実体験から、フリーランスエンジニアになるためのノウハウ、ブログや沖縄移住、スリランカの最新情報について発信します。

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

※記事内に提携先企業のアフィリエイト広告(リンク、バナー等)、Google広告を含む場合があります

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