document.title = '音声で秒数をカウントダウン';
var i = 60;
var id;
var input;
var voices = window.speechSynthesis.getVoices();
var voiceJa = voices[3];
var voiceEn = voices[3];
var audio = new Audio('0.mp3');

setTimeout(function(){
  initVoice();
}, 99);

$(function(){
  $('body').css({overflow:'hidden'});
  input = $('<input>',{type:'number',min:0}).val(i);
  btn = $('<button>').text('START');
  input.css({borderStyle:'none',width:'100%',height:'80vh',fontSize:'50vw',textAlign:'center'});
  btn.css({borderStyle:'none',width:'100%',height:'20vh',fontSize:'8vw',textAlign:'center'});
  input.on('dblclick', function(){
    $(this).val(60).trigget('change');
  });
  input.on('change', function(){
    i = Number($(this).val());
  });
  btn.on('hover', function(){
    $(this).css({color:'#666'});
  });
  btn.on('click', function(){
    if(!$(this).hasClass('a')){
      $(this).text('STOP');
      clearTimeout(id);
      count();
    } else {
      $(this).text('START');
      clearTimeout(id);
    }
    $(this).toggleClass('a');
  });
  $('#demo').append(input);
  $('#demo').append(btn);
});

function count(){
  id = setTimeout(function(){
    v = i;
    if(i>19){
      v = 'あと,'+i+' 秒';
    }
    if(i>-1 && i<11 || i%10 === 0){
      talk(v);
    }
    if(i===0){
      audio.play();
    }
    if(i>-1){
      input.val(i);
      count();
      i--;
    }
  },1000);
}

function initVoice(){
  voices = window.speechSynthesis.getVoices();
  console.log(voices);
  var isFindvoiceJa = false;
  var isFindvoiceEn = false;
  voices.forEach(function(v){
    if(!isFindvoiceJa){
      if(v.lang.match(/ja-JP/)){
        console.log(v);
        voiceJa = v;
        isFindvoiceJa = true;
      }
    }
    if(!isFindvoiceEn){
      if(v.name.match(/en-US/)){
        console.log(v);
        voiceEn = v;
        isFindvoiceEn = true;
      }
    }
  });
  voices.forEach(function(v){
    console.log(v);
    if(!isFindvoiceJa){
      if(v.name.match(/日本/) || v.name.match(/Japan/) || v.name.match(/Kyoko/)){
        voiceJa = v;
        isFindvoiceJa = true;
      }
    }
    if(!isFindvoiceEn){
      if(v.name.match(/Eng/) || v.name.match(/アメリカ/)){
        voiceEn = v;
        isFindvoiceEn = true;
      }
    }
  });
  
  console.log(voiceJa);
  console.log(voiceEn);
}

function talk(v, lang='ja', voiceName){
  var utter = new SpeechSynthesisUtterance(v);
  if(lang === 'en'){
    utter.voice = voiceEn;
  } else {
    utter.voice = voiceJa;
  }
  utter.volume = 1;
  utter.rate = 1;
  if(v<10){
    utter.rate = 3;
  }
  utter.pitch = 1;

  if(voiceName){
    for(var i = 0; i < voices.length; i++){
      if(voices[i].name == voiceName){
        utter.voice = voices[i];
      }
    }
  }
  window.speechSynthesis.speak(utter);
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-countdown-voice/