Google関連

Google Apps ScriptでVoiceText Web APIを呼び出す。

・モヤさまのショウ君にいろいろ喋らせる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>

GAS_VoiceTextWebAPI_01

動作としては、

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

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

■ 使い方

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

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

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

    GAS_VoiceTextWebAPI_05

    GAS_VoiceTextWebAPI_06

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

関連記事

  1. Google関連

    [Google Apps Script]Webアプリケーションを作成する。

    Google Apps Scriptではスプレッドシートや文書上で動く…

  2. Google関連

    [Google Apps Script]別のアドレスからメールを送信する。

    Google Apps Scriptでメール送信するGmailApp.…

  3. Google関連

    [Google Apps Script]insertTextBoxメソッドでスライドにテキストボック…

    昨年の9月にスライド上にテキストボックスを挿入するスクリプトについて記…

  4. Google関連

    [Google Apps Script]メニューの追加と確認ダイアログの表示

    Google Apps Scriptで新規メニューを追加し、メニューか…

  5. Office関連

    Google スライドで新規プレゼンテーションを作成するVBAマクロ

    ここ数日PowerPointのマクロに加え、Google Apps S…

コメント

    • GAS万歳!
    • 2018年 11月 26日

    VoiceText Web APIは使っていませんが、
    “`

    “`
    でMP3の再生を試したところうまくいきました。

    お試しなので、Base64のデータは以下のサイトで用意しました。
    Base64エンコード(ファイル)(Base64 Encode Binary)|Web便利ツール@ツールタロウ
    https://tool-taro.com/base64_encode_binary/

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP