Vue3でVOICEVOX動かしてみる

Vue.js (Vue3) からVOICEVOX engineを使ってみます。
こんな感じのシンプルアプリを作ります。

VOICEVOX engine は以下の記事で動かしてます。
VOICEVOXエンジンをDockerコンテナで動かす

Vue3プロジェクト作成

Node.jsとVue3はインストールされているものとして。

> npm create vue@latest

Vue.js - The Progressive JavaScript Framework

? Project name: » voicevox-app	■プロジェクト名を入力。
? Add TypeScript? » No / Yes	■JavaScriptを使用するのでNo。
? Add JSX Support? » No / Yes	■スクリプトの中にタグを書けるようします。Noで。
? Add Vue Router for Single Page Application development? » No / Yes
								■Vue2にもあったRouterですね、今回はいらないのでNoで。
? Add Pinia for state management? » No / Yes
								■Vue2にあったVuex(store)の代替機能です。状態管理ツール。Noで。
? Add Vitest for Unit Testing? » No / Yes
								■Viteの単体テストフレームワークです。Noで。
? Add an End-to-End Testing Solution? » - Use arrow-keys. Return to submit.
>   No							■E2Eテストフレームワークです。Noで。
    Cypress
    Nightwatch
    Playwright
? Add ESLint for code quality? » No / Yes
								■ソース整形/チェック用のESLintですね。Noで。
? Add Prettier for code formatting? » No / Yes
								■コード整形ツール。Noで。

VOICEVOXのWebAPI呼び出しのためにaxiosを追加します。

> cd voicevox-app
> npm install
> npm install axios vue-axios

axiosを使えるように main.js を以下のように書き換えます。

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios, axios)
app.mount('#app')

UIとプログラム作成

テキストボックスにボタン一個、再生用の<audio>タグのみの簡単な画面を作成する。
App.vueを書き換えます。

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const text = ref('')
const audio_data = ref(null)
const audio = ref(null)

// VOICEVOXにテキストの音声データをリクエスト
async function request() {
  await axios
    .post(
      encodeURI('http://localhost:50021/audio_query?text=' + text.value + '&speaker=1'), 
      null, 
      { headers: { 'Content-Type': 'application/json; charset=UTF-8'} }
    )
    .then(async (response) => {
      await axios
        .post(
          encodeURI('http://localhost:50021/synthesis?speaker=1&enable_interrogative_upspeak=true'),
          response.data,
          { headers: { 'Content-Type': 'application/json; charset=UTF-8'}, responseType: 'arraybuffer' }
        )
        .then((response2) => {
          // 音声データを<audio>のsrcに投入
          var blob = new Blob([response2.data],  { type: 'audio/wav' })
          audio_data.value = URL.createObjectURL(blob)
        })
    })
 }

 // 再生準備完了
 function canplay() {
    audio.value.play()    // 再生させます。
 }

</script>

<template>
  <div>
    <p>テキスト <input v-model="text" /> <button @click="request">再生</button></p>
    <audio controls :src="audio_data" ref="audio" type="audio/wav" @canplay="canplay" />
  </div>
</template>

実行

以下で実行します。

> npm run dev

http://localhost:5173/ にアクセスすると以下の画面が出てきます。

適当な文字列を入力して再生ボタンで再生できます。

・・・StackEditのコードハイライトだとVueサポートされてないのかな。