htmlで音声実装


<!--

## 技術記事のタイトル

htmlで音声実装

### 【 】(墨付き括弧)

- 【言語やサービス】
    - 例1.【Python】すぐにpytestで単体テストを実行するまでの手順
- 【言いたいこと】
    - 例1.【必見】Objectはどこに消えた？
- 【前提】
    - 例1.【個人開発】○○を○○できるサービスをリリースしました
    - 例2.【初心者向け】Reactとはそもそも何なのか説明します
- 【続き物の番号】
    - 例1.【2024年版】新入社員向け研修資料を公開します
    - 例2.【環境構築編】Windows11でPythonを実行するまで

【前提】詳しいタイトル【言語やサービス】のように、複数を併用するパターンもあります。

-->

## はじめに


### この記事でわかること
<!--
読んだら何がわかるようになるのか、何ができるようになるのかを書きましょう。
-->

この記事では、サイト作成初心者が音声実装をする流れを簡単にまとめたものです。
この記事を読むことにより、自身のサイトに音声を実装できるようになります！


### この記事の対象者
<!--
誰に向けた記事なのかを明確にすることで読者に選んでもらいましょう。
-->

主に初心者、音声実装をしてみたい方々向けです。
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を利用すると以下のような音声を実装することが出来ます。
![Screen recording 2025-04-21 21.43.26.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4042749/eccfe983-bfd6-4530-8534-ed54a9aba55a.gif)
あくまで一例ですが、 一所懸命という言葉を音声として出るようにできるようになるのです！!
英語にすることも可能で、例えば、「hello」なども、、
![Screen recording 2025-04-21 21.46.09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4042749/b63ef143-bb0a-4185-be11-fc07c8703d32.gif)できます！
調べてみると、多くの言語に対応しているようです！
## コードの概要
コードを見ていきましょう！
まず、音声を出している部分のjavascriptのコードです。
```javascript:jsの部分
       const msg = new SpeechSynthesisUtterance();
       msg.text = '一所懸命';//話させる内容の指定
       msg.lang = 'ja';//言語の指定
       msg.rate = 1;//話す速度の指定

       speechSynthesis.speak(msg);

    
```
このコードを説明していきます。
## 音声実装の仕組み
```javascript:javascript
       speechSynthesis.speak(msg);←ここの話
```

#### speechSynthesis.speeek(msg);
speechSynthesis.speeek(msg);を用いて、音声を流しています。

「msg」は簡単に言うと話す内容、形式、速度などを調節するものです。

そのmsgは最初の4行分で指定しています。


#### 「msg.text」
まず、「msg.text」で話す内容を指定しています。このサンプルコードの場合は、「一所懸命」にしていますが、自由に置き換えてください。
```javascript:jsの部分
       const msg = new SpeechSynthesisUtterance();
       msg.text = '一所懸命';←ここの話
       msg.lang = 'ja';//
    
```
#### 「msg.lang」
次に、「msg.lang」です。ここでは言語を指定しています。日本語はja、アメリカ英語はen-USなど、言語コードについてはこれを以下を参考にしてください
[参考][国コード一覧](https://www.kanzaki.com/docs/html/lang.html)
```javascript:jsの部分
       const msg = new SpeechSynthesisUtterance();
       msg.text = '一所懸命';
       msg.lang = 'ja';//←ここの話
```
#### 「msg.rate」
最後に、「msg.rate」です、これは、喋る速さを指定しています。まあ、そんだけです、、
```javascript:jsの部分
       const msg = new SpeechSynthesisUtterance();
       msg.text = '一所懸命';
       msg.lang = 'ja';
        msg.rate = 1;//←ここの話
```
## おまけ（サンプルコード）
このコードをコピペしたら、「一所懸命」って表示され、音声が流れるものが作れます
```html:sample.html
<!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>
    
```










## 参考資料
https://engineering.webstudio168.jp/2023/03/web-speech-api/

https://www.kanzaki.com/docs/html/lang.html

https://answers.microsoft.com/ja-jp/microsoftedge/forum/all/webspeechapi%E3%81%AF%E5%95%86%E7%94%A8%E5%88%A9/8caeffc3-83ed-4cb6-b262-8317381e0f4f
## おわりに・まとめ
いかがでしたでしょうか！
web speech apiを使って見ようと思えたら幸いです