LINEbotで音声出力する方法 - VOICE VOX APIとクイックリプライの活用




# LINEbotで音声出力する方法 - VOICE VOX APIとクイックリプライの活用

LINEbotを活用して、ユーザーに音声メッセージを出力する方法を探していますか？VOICE VOX APIとLINEのクイックリプライを組み合わせることで、簡単に実現することができます。この記事では、その手順を詳しく解説します。
![Screenshot_20230820-185422_Original.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486826/6b2f6521-f21e-6497-7351-3258d36a6247.jpeg)

この記事では以下の記事の無料部分を元にしております。

https://chatgpt-lab.com/n/n55257c082a9d?gs=4802798cc0b6

:::note warn
- 本記事の方法では、ユーザーにapiKeyが知られてしまいます。
- 個人での使用をお勧めします。
:::
## 本記事の特徴
1.  **ストレージ不要**: 音声データを保存するためのストレージは不要です。これにより、サーバーの容量やコストを気にせずにサービスを運用することができます。
  
1.  **音声ファイルの変換不要**: 音声ファイルを変換する手間が省けます。直接、テキストを送信し、リアルタイムで音声を取得することができます。
  
1.  **簡単な操作**: ユーザーは「読み上げる」ボタンを押すだけで、WEB版のVOICE VOXのURLリンク(音声ファイル)が直接開き、音声を再生することができます。


## VOICE VOX APIの準備

VOICE VOXは、テキストを音声に変換するサービスです。このAPIを利用することで、LINEbotからのメッセージを音声出力することができます。以下は、VOICE VOX APIを利用するための手順です。

### WEB版VOICE VOXのサイトへのアクセス

まず、WEB版VOICE VOXの公式サイトにアクセスします。

https://voicevox.su-shiki.com/su-shikiapis/

### APIキーの取得

APIキーを取得します。このキーは、VOICE VOX APIを呼び出す際に必要となりますので、大切に保管してください。

### 利用上の注意

APIのリクエスト制限や利用条件についても、公式ドキュメントで確認しておきましょう。

### 話者の選択
キャラクターに合わせた話者を選びましょう。speaker=9の数字を変えると、話すキャラクターが変わります。{apiKey}の部分を貴方のapiKeyに変えてください
```
https://api.su-shiki.com/v2/voicevox/audio/?text=こんにちは&key={apiKey}&speaker=9
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486826/be22c825-b3a7-0349-f690-a1c8c3c74f9c.png)
![Screenshot_20230821-154945_Original.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486826/b11097fa-1dc7-2631-4bc1-3200f6ccf84d.jpeg)



## LINEbotの設定

### クイックリプライの設定

クイックリプライを設定することで、ユーザーが特定のメッセージを選択するだけで、音声出力をリクエストできるようになります。

- メッセージの内容を入力
- クイックリプライのオプションを追加
- リンクを忍ばせて、読み上げるボタンを作成

### コードの変更
以下のコードを書き換えてください。
- 音声のURLを作ります
- 読み上げるテキストは改行文字などを削除しています
- 便宜上、VOICEVOX_APIKEYをそのまま書いています。セキュリティの問題のため、適宜スクリプトプロパティなど使用してください。

#### コードの変更対象
```javascript:引用 https://chatgpt-lab.com/n/n55257c082a9d?gs=4802798cc0b6

UrlFetchApp.fetch('https://api.line.me/v2/bot/message/reply', {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + props.getProperty('LINE_ACCESS_TOKEN'),
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': event.replyToken,
      'messages': [{
        'type': 'text',
        'text': text,
      }]
    })
  })
```
#### コードの変更後

```javascript 
  const VOICEVOX_APIKEY='あなたのapiKey';
  const VOICEVOX_SPEAKER=話者のID; 
  let textTrimed = text.replace(/[\s\t\n]/g," ");
  let voiceUrl = "https://api.su-shiki.com/v2/voicevox/audio/?text="+ textTrimed +"&key=" + VOICEVOX_APIKEY + "&speaker=" + VOICEVOX_SPEAKER; 


  UrlFetchApp.fetch('https://api.line.me/v2/bot/message/reply', {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + props.getProperty('LINE_ACCESS_TOKEN'),
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': event.replyToken,
      'messages': [{
        'type': 'text',
        'text': text,
        'quickReply':{
          'items':[{
            'type':'action',
            'action':{
              'type': 'uri',
              'label':'読み上げて',
              'uri': voiceUrl
            }
          }]
        }
      }]
    })
  });

```

## まとめ
これで、VOICE VOX APIの設定手順から取得までの詳細を把握することができました。このAPIとLINEbotを組み合わせることにより、お気に入りのキャラクターに音声で話してもらうような楽しいエクスペリエンスを提供することが可能となります。ユーザーにとって、愛着のあるキャラクターからの音声メッセージは特別な喜びをもたらすでしょう。この新しい体験を通じて、ユーザーエンゲージメントの向上を目指してみてはいかがでしょうか。

## 参考
whisper apiと組みわせることで、音声入力、音声出力共に行うことができます。
推しとお話できます！

https://qiita.com/CurryPrince/items/3bd03ff6ae1388eb0a3b