LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2020年5月1日金曜日

speechSynthesis.getVoices()で取得した中から特定のvoiceのindexを取得したい


セレクトボックス内の値をクリックした時にそのindexをアラート表示する。

デモ




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
<select id="voiceSelect"></select>

<script>
document.getElementById("voiceSelect").onclick = getVoiceIndex

speechSynthesis.onvoiceschanged = getVoices;

var voices;
function getVoices() {
  voices = speechSynthesis.getVoices();
  var select = document.getElementById("voiceSelect");
  var values = "";
  for(var i = 0; i < voices.length ; i++) {
    var option = document.createElement('option');
    var lang = voices[i].lang;
    var value = voices[i].name
    option.textContent = value;
    option.setAttribute('data-lang', voices[i].lang);
    option.setAttribute('data-name', voices[i].name);
    select.appendChild(option);
  }
  select.setAttribute('size', 12);
}

function getVoiceIndex() {
  var name = document.getElementById("voiceSelect").value;
  var voiceIndex;
  for(var i = 0; i < voices.length; i++) {
    if(voices[i]["name"] === name) {
      voiceIndex = i;
      break;
    }
  }
  alert(voiceIndex);
}

</script>
</body>
</html>



最新の投稿

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる

Pixel 5への機種変でSuicaが使えない人向けに書きました。 MISSION Pixel 5でSuicaを使えるようにする SOLUTION 旧端末で機種変更の設定を行う NFCをオンにする Google PayでSuicaを有効にする PROBLEMS 以前...