Start running SpeechSynthesis API on my Android and Safari devices

问题

I'm trying to make a web app with the SpeechSynthesis API to run my program after one click on start button and then start listening to the user on my Android and iOS devices. The user could speak anything to run the program. After that, I can play my audio files every three seconds. Below is my code so far. Is my logic wrong? I can't start my program after the click and hear any sound.

Another question is this SpeechSynthesis API could support Android and iOS devices, but when I saw some event such as 'soundstart event', it doesn't support Safari Mobile. What are their relationships? I got really confused. And the SpeechRecognition API only supports for Chrome browser but don't I need to user some event like soundstart?

Thank you for help in advance. I really appreciate it.

 <p id="msg" align="center"></p>

    <script>
        var utterance = new SpeechSynthesisUtterance("Hello");
        //window.speechSynthesis.speak(utterance);

        var supportMsg = document.getElementById('msg');

        if ('speechSynthesis' in window)
        {
            supportMsg.innerHTML = 'Your browser <strong>supports</strong> speech synthesis.';
            console.log("Hi");

            utterance.onstart = function(event) 
            {
                console.log('Hhhh')
            };


            var playList = ["1_hello", "2_how_old", "3_what_did_you_make"];
            var dir = "sound/";
            var extention = ".wav";
            audio.src = dir + playList[audioIndex] + extention;
            audio.load();

            var audioIndex = 0;
            setTimeout(function(){audio.play();}, 1000);


            window.speechSynthesis.speak(utterance);

        } 
        else 
        {



            supportMsg.innerHTML = 'Sorry your browser <strong>does not support</strong> speech synthesis.<br>Try this in <a href="https://www.google.co.uk/intl/en/chrome/browser/canary.html">Chrome Canary</a>.';
        }

        //window.speechSynthesis(utterance);

    </script>
    <div class="container">
        <button id="runProgram" onclick='utterance.onstart();' 
        class="runProgram-button">Start</button>
    </div>

回答1:

Does this work for you?

function playAudio() {
  var msg = new SpeechSynthesisUtterance('Help me with this code please?');
  msg.pitch = 0;
  msg.rate = .6;
  window.speechSynthesis.speak(msg);



  var msg = new SpeechSynthesisUtterance();
  var voices = window.speechSynthesis.getVoices();
  msg.voice = voices[10]; // Note: some voices don't support altering params
  msg.voiceURI = 'native';
  msg.volume = 1; // 0 to 1
  msg.rate = 1.2; // 0.1 to 10
  msg.pitch = 2; //0 to 2
  msg.text = 'Sure. This code plays "Hello World" for you';
  msg.lang = 'en-US';

  msg.onend = function(e) {
    var msg1 = new SpeechSynthesisUtterance('Now code plays audios for you');
    msg1.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
   msg1.pitch = 2; //0 to 2
   msg1.rate= 1.2; //0 to 2
    // start your audio loop.
    speechSynthesis.speak(msg1);
    console.log('Finished in ' + e.elapsedTime + ' seconds.');
  };

  speechSynthesis.speak(msg);
}

<div class="container">
  <button id="runProgram" onclick='playAudio();' class="runProgram-button">Start</button>
</div>

来源：https://stackoverflow.com/questions/45178008/start-running-speechsynthesis-api-on-my-android-and-safari-devices