[JavaScript] Web Speech APIの音声出力対応の、スマフォブラウザについて

下記のコードのように、Web Speech APIのSpeechSynthesisUtteranceインターフェイスを利用して単純に、文字列「hello world」をボタンを押したときに、音声として出力します。パソコンでの確認では対応しているブラウザChromeやfireboxでは、音声を確認できますが、スマフォの確認で、比較的新し目の、Safari 9.0と　Android7.0で確認しましたが、音声が出力されません。原因がわからないので、こちらで尋ねるに至りました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<script>
$(function(){
    'use strict';

    function audioWord(word) {
         var synthes = new SpeechSynthesisUtterance(word);
         synthes.volume = 1.0;
         synthes.rate = 1.0;
         synthes.pitch = 1.0; 

        synthes.lang = 'en-US';
        speechSynthesis.speak(synthes);

      }
      
      $('button').click(function(){
        audioWord('hello world');
      })
    
});
</script>

<button>音声テスト (Hello World!)</button>

</body>
</html>

行動規範の内容に同意します

回答2件

touchstartを追加してみては？(未検証)

js
1$('button').on('click touchstart', unction(){
2    audioWord('hello world');
3});

投稿2018/02/21 12:08

turbgraphics200

総合スコア4267

xjaPANDA

2018/03/01 09:26

ありがとうございます。原因は使用しているブラウザにありました。OSで使えるブラウザ全てで音が鳴るわけではなく、ブラウザの種類によって動作が異なることが分かりました。検証用に使っていたブラウザは、Chromeだと思い込んでしましたが、Chromeではなく、Chromeに変えたところ音がでたので、初歩的な検証ミスでした。。。

行動規範の内容に同意します