Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What is going on with this article?
@TakeshiNickOsanai

Web Speech API を 利用して 英単語の音声確認をするアプリを作る

More than 1 year has passed since last update.

最近音声認識や音声入力に興味があり、いろいろと調べています。

今回は Web Speech API に含まれる、音声合成APIを利用して、簡単なアプリを作ってみました。

やること

英単語などの発音を教えてくれるアプリ
フォームから英語を入力しボタンを押すと、ブラウザが英語の音声で発音を教えてくれる
Web Speech APIを利用

Web Speech API とは

W3C Community Final Specification Agreement(FSA)の下、Speech API Communityにより策定されている、JavaScript のAPI。

音声認識と、音声合成の2つの機能を持つ。

Speech API Community が公開している仕様文章はこちら。
https://w3c.github.io/speech-api

MDNのリファレンスはこちら。
https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API

音声合成のAPIは Web Speech Synhtesis API を利用する。

Web Speech Synthesis APIの記述とサンプルコード

SpeechSynthesisUtterance オブジェクトで発声させたい単語・文章を定義できる。

SpeechSynthesisUtterance.text

で、発声させたい単語を定義

SpeechSynthesisUtterance.lang

で、発声する言語を指定

SpeechSynthesisUtterance.lang = 'ja'

なら日本語で発声

SpeechSynthesisUtterance.lang = 'en-US'

なら英語で発声

SpeechSynthesis.speak() メソッドで音声の発生を行う。

https://w3c.github.io/speech-api/#examples-synthesis にサンプルコードがある。下記はサンプルの一つ。

<script type="text/javascript">
  speechSynthesis.speak(new SpeechSynthesisUtterance('Hello World'));
</script>

フォームに入力した英語の発音をチェックするアプリ

W3Cのサンプルを見ながら、簡単なアプリを作成してみました。
フォームに英単語を入力後、ボタンをクリックすると、英単語の発音が確認できます。


<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Web Speech API サンプル 2</title>
</head>
<body>
  <h1>英語の音声確認アプリ</h1>

  <div>
    <p>音声を確認したい単語を入力してください。</p>
    <input type="text" id="word"></form>
    <button id="button" onclick="pronounce()">発音を確認</button>
  </div>

<script type="text/javascript">

  'use strict'

  function pronounce() {

    let word = document.getElementById('word').value;
    let u = new SpeechSynthesisUtterance();
    u.lang = 'en-US';
    u.text = word;
    speechSynthesis.speak(u);

  }

</script>

</body>
</html>

実際に動くサンプルは下記です。

13
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
TakeshiNickOsanai
Developer Relation Manager, Sales Engineer/PreSales, User Community Supporter, CMS Engineer, AWS Certified Solutions Architect

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
13
Help us understand the problem. What is going on with this article?