・モヤさまのショウ君にいろいろ喋らせるVBAマクロ(1)
//www.ka-net.org/blog/?p=4714
・モヤさまのショウ君にいろいろ喋らせるVBAマクロ(2)
//www.ka-net.org/blog/?p=4718

で紹介した「VoiceText Web API」を、今度はGoogle Apps Scriptから使ってみました。

※ APIキーの申請や利用方法については上記記事をご参照ください。

※ Webアプリケーションとしてスクリプトを作成する方法は「[Google Apps Script]Webアプリケーションを作成する。」をご参照ください。

※ 拡張サービスを使用しているので、「[Google Apps Script]拡張サービスを使用する。」を参考にDrive APIを有効にしてください。

・コード.gs

function doGet() {
  return HtmlService.createTemplateFromFile('page').evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

function getVoice(api_key, txt) {
  var file_name = "tts_file.wav";
  var fol = DriveApp.getRootFolder();
  
  //wavファイルを事前に削除
  try {
    fol.removeFile(fol.getFilesByName(file_name).next());
  } catch(e) {
    //何もしない
  }
  
  //VoiceText Web API呼び出し
  var url = "https://api.voicetext.jp/v1/tts";
  txt = encodeURIComponent(txt);
  var dat = "text=" + txt + "&speaker=show";
  var opt = {
    "contentType" : "application/x-www-form-urlencoded",
    "method" : "POST",
    "headers" : {
      "Authorization" : " Basic " + Utilities.base64Encode(api_key + ":")
    },
    "payload" : dat
  }
  
  //Google ドライブにwavファイル保存
  var res = UrlFetchApp.fetch(url, opt);
  var file = fol.createFile(res.getBlob());
  file.setName(file_name);
  file.setSharing(DriveApp.Access.ANYONE, DriveApp.Permission.VIEW); //権限設定(誰でも閲覧可)
  
  return file.getUrl();
}

・page.html

<style>
* {
  padding: 5px;
}
td {
  border-style: none;
}
</style>
<table>
  <tr>
    <td>APIキー</td>
    <td><input id="txtKey" type="text" size="30" value=""></td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td><textarea id="txtTarget" cols=40 rows=4>こんにちは。</textarea></td>
  </tr>
  <tr>
    <td colspan="2"><input id="btnCall" type="button" value="VoiceText Web API呼び出し"></td>
  </tr>
  <tr><td colspan="2">&nbsp;</td></tr>
  <tr>
    <td colspan="2"><div id="divWav"></div></td>
  </tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
  $(function(){
    $("#btnCall").click(function(){
      $(this).attr("disabled", "disabled");
      $("#divWav").empty();
      google.script.run.withSuccessHandler(onSuccess).getVoice($("#txtKey").val(), $("#txtTarget").val());
    });
  });
  
  function onSuccess(dat) {
    $("#divWav").append('<a href="' + dat + '" target="_blank" title="wavファイル">リンクをクリックするとwavファイルのダウンロードページが表示されます。</a>');
    $("#btnCall").removeAttr("disabled");
  }
</script>

動作としては、

1. VoiceText Web APIを呼び出します。
2. 返ってきたwavファイルをGoogle ドライブに保存します。
3. Google ドライブに保存したwavファイルを開いて再生します。

といった流れになっています。

■ 使い方

1. Webアプリケーションを実行します。
2. APIキーと読み上げるテキストを入力し、「VoiceText Web API呼び出し」ボタンをクリックします。



3. wavファイルへのリンクをクリックします。



4. Google ドライブ上のファイルが開かれます。このときMusic Player for Google Driveを使うと、ローカルにダウンロードすることなく、直接wavファイルを再生することができます。

Google Apps ScriptはUrlFetchApp.fetchメソッドを使うと簡単にWeb APIが呼び出せるので便利です。

・・・上記スクリプト、本当は下記のように動的にaudio要素を追加してwavファイルを再生(wavファイル受取 → Base64エンコード → data URI Schemeでソース指定)する予定でした。

・コード.gs

// Script-as-app template.
function doGet() {
  return HtmlService.createTemplateFromFile('page').evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

function getVoice(api_key, txt) {
  var url = "https://api.voicetext.jp/v1/tts";
  txt = encodeURIComponent(txt);
  var dat = "text=" + txt + "&speaker=show";
  var opt = {
    "contentType" : "application/x-www-form-urlencoded",
    "method" : "POST",
    "headers" : {
      "Authorization" : " Basic " + Utilities.base64Encode(api_key + ":")
    },
    "payload" : dat
  }
  var res = UrlFetchApp.fetch(url, opt);
  return Utilities.base64Encode(res.getContent());
}

・page.html

<style>
* {
  padding: 5px;
}
td {
  border-style: none;
}
</style>
<table>
  <tr>
    <td>APIキー</td>
    <td><input id="txtKey" type="text" size="30" value=""></td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td><textarea id="txtTarget" cols=40 rows=4>こんにちは。</textarea></td>
  </tr>
  <tr>
    <td colspan="2"><input id="btnCall" type="button" value="VoiceText Web API呼び出し"></td>
  </tr>
  <tr><td colspan="2">&nbsp;</td></tr>
  <tr>
    <td colspan="2"><div id="divAudio"></div></td>
  </tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
  $(function(){
    $('#btnCall').click(function(){
      google.script.run.withSuccessHandler(onSuccess).getVoice($("#txtKey").val(), "こんにちは。");
    });
  });
  
  function onSuccess(dat) {
    $("#divAudio").empty();
    var audio = $('<audio />', {
      autoPlay : 'autoplay',
      controls : 'controls'
    });
    $('<source />').attr('src', 'data:audio/wav;base64,' + dat).appendTo(audio);
    $("#divAudio").append(audio);
  }
</script>

が、「Issue 1601 – google-caja – HTML5 audio element integration」にもあるように、Cajaが余計なことをしてくれたばっかりに、audio要素での再生ができず、結局、Google ドライブにwavファイル保存 → 再生、というワンクッション置く形になりました・・・orz