読者です 読者をやめる 読者になる 読者になる

ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

ブラウザでテキスト読み上げるコンポーネント: react-voice-components

テキスト読み上げをしてくれるReactコンポーネントの存在を知りました。grvcoelho/react-voice-components

ブラウザで音声を使って何かしたいと思っていたので、試しに触ってみて、GitHub Pageにあげてみました。 以下ちょっと苦労したので、メモです。

Reactを動かせる環境の作成

半年前くらいに作ったコンパイルの環境がかなり古くなっていたので、facebookincubator/create-react-appで作り直しました。インストールに少々時間がかかりましたが、とても便利ですね。

npmで入れたreact-voice-componentsが動かない?

npmで入れたreact-voice-componentsだと、create-react-appで作った環境との相性なのか、コンパイルされずブラウザエラーが発生して動きませんでした。webpackの設定ファイルを上書けばいいようですが、とりあえず、git submoduleリポジトリコンパイル対象のディレクトリにクローンして使用することにしました。せっかくなので、本当に問題があるのなら、いずれ修正を送ってみようかと思います。

書いたコードです;

ushumpei/play-with-react-voice-components

GitHubページを公開する

GitHubページの公開方法は3つあるようで、mastergh-pagesブランチのindex.htmlからか、master/docsを使うか、だそうです。

今回はdocsを作成して公開しました。静的リソース(cssjs)の指定が絶対パスだったため、読み込まれなくて困りました。

感想

  • テキストから音声ファイルとして吐き出すことはできるか気になりました。
  • Reactで綺麗に書けるようになりたいです。
  • GitHubはとても太っ腹です。
  • リポジトリの作者がすでにデモページを作成してくださっているようです。。。