Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #3 Web Speech APIを使った音声機能実装編

2017年9月24日 By KD コメントを書く

[Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #3 Web Speech APIを使った音声機能実装編

[Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #3 Web Speech APIを使った音声機能実装編

コーヒー豆が尽きた時にインスタントにするのですが味気ない。。。自分はそんなにコーヒーの味にうるさい方では無いのですが、ドリップしたての香りがたまらないのです。買いに行こうかな。新しいものを買うことは常にメリットがあります。選択できるからです。今まで使っていた商品か新しい商品かを選択できるチャンスです。そして、大抵新しい商品を買って後悔します。コーヒーの場合はね(笑)

前回は「文章を話すデスクトップアプリ」の基本機能まで作りました。今回はメイン機能である音声機能を作りましょう。音声機能の実装には、Chromeに搭載されているWeb Speech APIを利用します。使ったことがある人なら余裕でElectronとインテグレーションできます。

見出し

  • 1 前回のおさらい
  • 2 1. Web Speech APIとは?
  • 3 2. 音声機能を追加しよう!
    • 3.1 2-1. 今回追加する機能の確認
    • 3.2 2-2. Speak機能のコーディング
    • 3.3 2-3. 全体のソースコード
    • 3.4 3. 動かしてみましょう!
  • 4 最後に
    • 4.1 環境
    • 4.2 関連記事

前回のおさらい

  • 一流たるもの我慢強くなければならない
  • Electronのウィンドウ間のデータ通信方式にはIPCシステムが使われている
  • Electronアプリ作成はやってみると結構簡単。てか、楽しい

1. Web Speech APIとは?

Web Speech APIとは、音声合成(Text-to-Speech)と音声認識(Asynchronous Speech Recognition)から成る音声機能APIです。各ブラウザで実験的に実装が開始されており、ChromiumからできているElectronでもこの実験的な機能を利用することができます。今回はこのAPIの音声合成機能を使っていきます。(ちなみに、音声認識機能に関しては使うまでに少しハードルがあります。使うには、現時点でchromium-devグループへの参加とGoogle API Keyの取得が求められ、かつ、50回/日の制限付きです。ですが、この機能も面白いので試してみたい方は調べてみて下さい。ハードルをクリアした上でElectronで実行する場合は、「GOOGLE_API_KEY=XXXX npm run electron」のように渡してあげれば良いです。)

その他に、GoogleはGoogle Cloud Speech APIという有料のクラウドサービスを開始しています。無料なオープン展開を基本としているGoogleにしては残念なサービスですが、サポートもあるのでお金がある人にとってはいいかもしれません。

2. 音声機能を追加しよう!

それでは作っていきましょう。

2-1. 今回追加する機能の確認

まずは今回追加する機能を確認します。前回のUIイメージを思い出してください。残っている機能は?

そうです!Speakボタンが残っていました。このボタンをクリックした時に文章を読み上げてほしいのです。さらに、文章読み上げ中に中断できるように同じボタンをクリックすると音声が停止する機能も一緒に作りましょう。

2-2. Speak機能のコーディング

一応前回のフォルダ構成を見てみましょう。

$ cd speak-sentences
$ ls
index.html         index.js           input.html         node_modules/      package-lock.json  package.json

今回編集するのはindex.htmlだけです。

body部分に追加

  <button id="speak-sentences">Speak/Stop</button>

scripts部分に追加

    const speak = document.getElementById('speak-sentences');

    // Speak sentences through SpeechSynthesis in Web Speech API.
    const synth = window.speechSynthesis;
    speak.addEventListener('click', (event) => {
      // Stop.
      if (synth.speaking) {
        synth.cancel();
        return;
      }
      // Speak.
      const sentences = Array.from(document.querySelectorAll('#sentences p'))
        .map((sentence) => {
          return sentence.firstChild.nodeValue;
        });
      sentences.forEach((sentence) => {
        const message = new SpeechSynthesisUtterance(sentence);
        message.lang = 'ja-JP';
        synth.speak(message);
      });
    });

2-3. 全体のソースコード

全体のコードは以下のようになります。

index.js

const electron = require("electron");
const { app, BrowserWindow, ipcMain } = electron;

let mainWindow;
let inputWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 500,
    height: 500
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", () => app.quit());
});

function createInputWindow() {
  inputWindow = new BrowserWindow({
    width: 300,
    height: 300
  });
  inputWindow.loadURL(`file://${__dirname}/input.html`);
  inputWindow.on("closed", () => (inputWindow = null));
}

// Create a input window.
ipcMain.on("inputWindow:create", event => {
  createInputWindow();
});

// Send a sentence to a main window.
ipcMain.on("sentence:insert", (event, sentence) => {
  mainWindow.webContents.send("sentence:insert", sentence);
  inputWindow.close();
});

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Speak Sentences</title>
</head>

<body>
  <h1>Speak Sentences</h1>

  <button id="input-sentence">Input</button>
  <button id="clear-sentences">Clear</button>
  <button id="speak-sentences">Speak/Stop</button>

  <div id="sentences"></div>

  <script>
    const electron = require('electron');
    const { ipcRenderer } = electron;

    const sentences = document.getElementById('sentences');
    const insert = document.getElementById('input-sentence');
    const clear = document.getElementById('clear-sentences');
    const speak = document.getElementById('speak-sentences');

    // Request a input window.
    insert.addEventListener('click', (event) => {
      ipcRenderer.send('inputWindow:create');
    });

    // Clear sentences.
    clear.addEventListener('click', (event) => {
      sentences.innerHTML = '';
    });

    // Insert sentence.
    ipcRenderer.on('sentence:insert', (event, sentence) => {
      if (sentence.trim() === '') {
        return;
      }
      const text = document.createTextNode(sentence);
      const p = document.createElement('p');
      p.appendChild(text);
      sentences.appendChild(p);
    });

    // Speak sentences through SpeechSynthesis in Web Speech API.
    const synth = window.speechSynthesis;
    speak.addEventListener('click', (event) => {
      // Stop.
      if (synth.speaking) {
        synth.cancel();
        return;
      }
      // Speak.
      const sentences = Array.from(document.querySelectorAll('#sentences p'))
        .map((sentence) => {
          return sentence.firstChild.nodeValue;
        });
      sentences.forEach((sentence) => {
        const message = new SpeechSynthesisUtterance(sentence);
        message.lang = 'ja-JP';
        synth.speak(message);
      });
    });
  </script>
</body>

</html>

input.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Input Text</title>
</head>

<body>
  <form>
    <div>
      <label>Text: </label>
      <input autofocus />
    </div>
    <button type="submit">Enter</button>
  </form>

  <script>
    const electron = require('electron');
    const { ipcRenderer } = electron;

    // Insert text.
    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();
      const { value } = document.querySelector('input');
      ipcRenderer.send('sentence:insert', value);
    });
  </script>
</body>

</html>

3. 動かしてみましょう!

最後に実行して動作確認をしてみましょう。

$ npm run electron

以下の画面が表示され、Speakボタンで文章を読み上げてくれれば、成功です!

なかなか日本語の発音が良いですよね(笑)

最後に

今回で一通りの機能実装は完了しました。これで終わり?とんでもない。それに、味気ない。次回からは周辺の小さい機能を追加していきます。ヒントはメニューバーです(笑)それでは。

環境

  • OS: macOS Sierra 10.12.6
  • NodeJS: v8.4.0
  • NPM: 5.4.0
  • Electron: 1.7.6
The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #2 基本機能実装編

    アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are p…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

    最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日…

カテゴリ : 技術 Tips & Tutorials タグ : electron, tumblr-imported, tutorial, webspeech

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法
    AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • Google Adsense(アドセンス広告)で収益を受け取るまでの手順
    Google Adsense(アドセンス広告)で収益を受け取るまでの手順
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Heroku上にNginxでリバースプロキシを構築する方法
    Heroku上にNginxでリバースプロキシを構築する方法
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #2 基本機能実装編

    アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are p…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

    最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes