ブログ のお勧め記事

Javascriptで音声再生中にアニメーションさせるには(WordPressでTTS第3回)

2016/09/20

これまでの記事で、PHPで無料の中国語音声合成Text To Speech(TTS)を実現する方法について解説してきました。今回は、このTTSを再生中に画像をアニメーションさせ、再生終了と同時にアニメーションを終了させる方法を紹介します。

この記事でできること

この記事では、「你好吗」この形式でTTSの再生ができるようにします。

おさらい:JavascriptでTTSを再生させる

まずは、前回の記事(JavascriptでTTS音声を再生させる)で作成した、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/には第1回の記事(PHP(WordPress)で無料の中国語TTS(Microsoft Translator)を実装する)で作成したPHPファイルのパスを指定します。

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

再生前の画像(アイコン)と再生中の画像を用意する

次に、再生前に表示させるアイコン(このサイトではこの画像を使っています)と、再生中にアニメーションさせる画像(このサイトではこの画像を使っています)を用意します。

画像を作るのや探すのが面倒という方は上の2つの画像を右クリックしてダウンロードすれば、とりあえず作業を進めることができます。

Javascriptで画像を切り替える

以下のコードを、</BODY>タグの直前に貼り付けます。
その際、2箇所のPATHにはそれぞれ、再生中と再生待ちの画像へのPATHを指定します。

<script>
function tts(id){
	var ended; // イベントリスナの2重呼び出しを防止するためのフラグ
	// 再生終了に際してアニメーションを終了させるためのイベントリスナを設定する
	document.getElementById('aud_'+id).addEventListener('ended',terminate);
	// Androidのバグ対策
	document.getElementById('aud_'+id).addEventListener('stalled',terminate);
	// アニメーション画像に切り替える
	document.getElementById('img_'+id).src='/*再生中画像のPATH*/';
	// 音声を再生する
	document.getElementById('aud_'+id).play();
	// 関数の実行を終了する(実際には下のイベントリスナが待機し続ける)
	return false;
	// 音声の再生終了を検知するイベントリスナ
	function terminate(){
		// 2重呼び出し防止
		if(ended)return;
		ended=true;
		// アイコンを元に戻す
		document.getElementById('img_'+id).src='/*再生待ち画像のPATH*/';
		// もう一度再生される時のために再生位置を戻しておく
		document.getElementById('aud_'+id).load();
	}
}
</script>

次に、実際に音声を再生させたい箇所に以下のコードを貼り付けます。
その際、2箇所のPATHにはそれぞれ、再生待ち画像と、TTS再生のために作成したPHPファイルのパスを指定します。

<audio id="aud_2" src="/*TTS再生プログラムのPATH*/?source=你好吗" style="width:0;">
</audio>
你好吗の発音は右のアイコンをクリック<a href="javascript:void(0)" onclick="tts('2')">
<img src="/*再生待ち画像のPATH*/" id="img_2"/>
</a>

Androidでの不具合に対応する

Androidでは、audioファイルの再生の終了が検知できないというバグがあるようです。
そのため、stalledイベントにもコールバック関数を設定することで、確実にアニメーションが終了するようにしています。

中国語の音声合成は意外と簡単

このように、意外と簡単に、自分のWordpressサイトに中国語TTSを実装することができます。

ぜひ、ご自分のサイトでも試してみてください。

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

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

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

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

ソシム 2014-06-18

Amazonで詳しく見る by G-Tools

-ブログ

この記事を書いた人

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

共有する

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

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

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

関連記事