ブログ のお勧め記事

無料の中国語音声合成Text To SpeechをJavascriptで再生する(WordPressでTTS第2回)

2016/09/20

以前の記事で、無料のMicrosoft Transratorを使用してWordpressに中国語のTTS(Text to speech)を実装する方法を紹介しました。今回は実際にWordpressにTTSを実装していきたいと思います。

この記事でできること

今回の記事の仕上がり目標は、(你好の発音はここをクリック)←この形で音声再生されることです。

注意:この記事はHTML5限定です

この記事では、HTML5を使用した音声再生を紹介しています。

そのため、一部のブラウザや端末では再生できない可能性があります。

なお、2015年5月現在の各ブラウザのHTML5対応状況は以下のとおり(caniuse.comにて調査)、90%以上のカバー率となっていますので、趣味のブログであれば問題ないでしょう。

Chrome Legacy Window 20150505 232324.bmp

WordPress記事中にAUDIOタグ直打ちでTTSを埋め込む

それでは早速始めましょう。

まずは、AUDIOタグを直打ちして音声を埋め込んでみます。

最もシンプルなコード

適当な記事(固定ページでも可)の編集画面を開き、「テキスト」モードで以下のHTMLコードを書き込みます。

<audio src="/*PATH*/?source=你好" controls>
<p>音声の再生にはHTML5対応ブラウザをご利用ください</p>
</audio>

※/PATH/には第1回の記事(PHP(WordPress)で無料の中国語TTS(Microsoft Translator)を実装する)で作成したPHPファイルのパスを指定します。

下のように表示され、音声が再生できればOKです。

ちなみに、audioタグに「preload="true"」のオプションを指定すると、ページ読み込みと同時に音声の読み込みが行われるようになる場合があります。(実際に読み込みが行われるかどうかはブラウザによって動作が異なります)

JavascriptでTTSを再生させる

さすがにブラウザのプレーヤーそのままというのは見栄えが良くないので、適当なアイコンなどをクリックして再生できるようにしたいと思われるかもしれません。

Javascriptを使用して上のTTSを再生させる場合は、以下のように実装していきます。

AUDIOタグを隠し要素として貼付け、Javascriptで再生

まずは以下のコードを「テキスト」モードで書き込みます。

<audio id="tts1" src="/*PATH*/?source=你好" style="width:0;">
</audio>
<a href="javascript:void(0)" onclick="audio=document.getElementById('tts1');audio.play();return false;">
你好の発音はここをクリック
</a>

※/PATH/には前回の記事(PHP(WordPress)で無料の中国語TTS(Microsoft Translator)を実装する)で作成したPHPファイルのパスを指定します。

下のような形のリンクが現れて、リンクをクリックすると「你好」の音声が流れるようになったでしょうか。
你好の発音はここをクリック

もし、ページ内に複数のTTS音声を貼り付ける場合は、上のコードで「tts1」となっている場所(2ヶ所)を個別の名前になるように書き換えればOKです。
さて、ここまででひと通りTTS音声が流れるようになりました。

次回は、音声再生中のアニメーションを表示すること、Wordpressのショートコードを使ってもう少し簡単に音声再生コードを実装できるようにしていきたいと思います。

初心者にもおすすめのWordpress教科書

これからWordpressを勉強したいと思う方におススメの一冊です。

初心者でも、しっかり読み込んでいけば必ずできるようになりますよ!

WordPressレッスンブック HTML5&CSS準拠
WordPressレッスンブック HTML5&CSS準拠エビスコム

ソシム 2014-06-18

Amazonで詳しく見る by G-Tools

-ブログ

この記事を書いた人

C-STUDY管理人。フリーランスのプログラマー+中国語通訳翻訳+ブロガーをやってます。中国語は独学でHSK8級+中検準1級。中国・中華圏を中心に東アジア~東南アジアが活動範囲です。もっと詳しく

共有する

これは役に立つ!面白い!と思ったら共有してくださるとうれしいです。シェアしていただけると、がぜんやる気がでます^^

C-STUDYの定期読者になりませんか?

ブログの更新情報をメールでお届けします。購読は無料、解除も簡単です。 読者数:244人

関連記事