はじめに
この記事でわかること
この記事では、サイト作成初心者が音声実装をする流れを簡単にまとめたものです。
この記事を読むことにより、自身のサイトに音声を実装できるようになります！
この記事の対象者
主に初心者、音声実装をしてみたい方々向けです。
htmlやjavascriptなどの言語の知識は前提条件とします。
また、この記事では、javascriptを用いた音声実装方法を解説しています。
動作環境・使用するツールや言語
- html(マークアップ言語)※webサイトに文字を表示するための言語です。
- js（動きをつける言語）※ほとんど皆無でも大丈夫です。
- 好きなエディタでどうぞ。（vscode推奨）
web speech apiとは
さて、音声実装をする際に、今回紹介するのはweb speech apiです。
このapiはW3C（World Wide Web Consortium）が策定したapiで、ネイティブapiのため、認証キー（apiキー）、料金が不要です。
※ネイティブapiとは、osにもとから入っているapiのこと
web speech apiの利用
では、実際にweb speech apiを利用すると以下のような音声を実装することが出来ます。
あくまで一例ですが、 一所懸命という言葉を音声として出るようにできるようになるのです！!
英語にすることも可能で、例えば、「hello」なども、、
できます！
調べてみると、多くの言語に対応しているようです！
コードの概要
コードを見ていきましょう！
まず、音声を出している部分のjavascriptのコードです。
const msg = new SpeechSynthesisUtterance();
msg.text = '一所懸命';//話させる内容の指定
msg.lang = 'ja';//言語の指定
msg.rate = 1;//話す速度の指定
speechSynthesis.speak(msg);
このコードを説明していきます。
音声実装の仕組み
speechSynthesis.speak(msg);←ここの話
speechSynthesis.speeek(msg);
speechSynthesis.speeek(msg);を用いて、音声を流しています。
「msg」は簡単に言うと話す内容、形式、速度などを調節するものです。
そのmsgは最初の4行分で指定しています。
「msg.text」
まず、「msg.text」で話す内容を指定しています。このサンプルコードの場合は、「一所懸命」にしていますが、自由に置き換えてください。
const msg = new SpeechSynthesisUtterance();
msg.text = '一所懸命';←ここの話
msg.lang = 'ja';//
「msg.lang」
次に、「msg.lang」です。ここでは言語を指定しています。日本語はja、アメリカ英語はen-USなど、言語コードについてはこれを以下を参考にしてください
[参考]国コード一覧
const msg = new SpeechSynthesisUtterance();
msg.text = '一所懸命';
msg.lang = 'ja';//←ここの話
「msg.rate」
最後に、「msg.rate」です、これは、喋る速さを指定しています。まあ、そんだけです、、
const msg = new SpeechSynthesisUtterance();
msg.text = '一所懸命';
msg.lang = 'ja';
msg.rate = 1;//←ここの話
おまけ（サンプルコード）
このコードをコピペしたら、「一所懸命」って表示され、音声が流れるものが作れます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>web speech api</title>
</head>
<body>
<h1>ｍ一所懸命</h1>
<script>
const msg = new SpeechSynthesisUtterance();
msg.text = '一所懸命';
msg.lang = 'ja';
msg.rate = 1;
speechSynthesis.speak(msg);
</script>
</body>
参考資料
おわりに・まとめ
いかがでしたでしょうか！
web speech apiを使って見ようと思えたら幸いです