[Site] 音声機能 その2

タグ :

作成サイト「koweboo」についてまとめるシリーズです。
今回はユーザーがアップロードする「音声」の処理についてまとめます。
かなり長くなるので何回かに分けて書きます。
今回は前記事に続いて「音声一覧表示」についてです。

作成サイト内の関連箇所 — 「こうぇ一覧

一覧の内容

音声の一覧には以下の内容を表示します。

  • お題タイトル
  • 音声タイトル
  • アップロードユーザー名
  • 音声再生機能
  • ジャンル
  • …etc

お題タイトルは、「このお題に対してアップロードされた音声ですよ」っていうのを知らせる為に表示しています。
別に無くてもいいと思われるかもしれませんが、音声を聞くときに「どんなお題に対しての音声なのか」という情報は必要です。

音声再生機能については、JavaScript を用いて実現します。
HTML5 には audio タグというものが用意されており、簡単に音声再生が実行できるようになっています。
今回はその audio タグを JavaScript で操作する方法で再生機能を作成します。
組み込む JaveScript には「audio.js」を用います。

ジャンルは、URLのパラメータで指定することにします。
例えば「~/index/1」であれば「セリフ」のみの音声を表示します。
ジャンルについては「お題」に付随するデータなので、過去記事「お題投稿機能」を参照してください。

audio.jsの設定

まずは、サイトからダウンロードします。
ダウンロードしたファイルは以下の構成になっています

[audiojs]
 - audio.min.js
 - audiojs.swf
 - player-graphics.gif
[includes]
 - index.css
index.html
LICENCE

このファイルで使用するのは「audiojs」フォルダにあるファイルのみです。
audio.jsを「/app/webroot/js/」内へコピーします。
audiojs.swfは「/app/webroot/files/」内へコピーします。
player-graphics.gifは「/app/webroot/img/」内へコピーします。

後は ctp ファイル(できればレイアウトの head タグ内)へ以下を記述して準備完了です。

<script src="/cake/app/webroot/js/audio.js"></script>
<script>
audiojs.events.ready(function() {
	audiojs.createAll();
});
</script>

準備が整ったら、ctp ファイルの音声機能の表示する箇所に以下を記述します。

<audio src="(音声ファイル名のパス)"; ?> preload="auto"></audio>

記述の「(音声ファイル名のパス)」というのは、「音声ファイルを保存しておくフォルダパス」と「データベースから取得したファイル名」と「拡張子」の3つを記述します。
フォルダパスと拡張子は、規定値で良いと思うので、定数として設定しておきましょう。
定数定義については過去記事「小ネタ2」を参照してください。
ファイル名の取得はコントローラでやります。

一覧の作成

一覧表示のビューのソースコードは以下になります。

<div class="voices index">
<h3><?php echo __('Genre'); ?></h3>
<ul>
<a href="<?php echo PAGE_VOICE ?>">すべて</a>
<a href="<?php echo PAGE_VOICE.'/index/1' ?>">セリフ</a>
<a href="<?php echo PAGE_VOICE.'/index/2' ?>">歌</a>
<a href="<?php echo PAGE_VOICE.'/index/3' ?>">朗読</a>
<a href="<?php echo PAGE_VOICE.'/index/4' ?>">BGM</a>
</ul>
<h2><?php echo __('Voice List'); ?></h2>
<?php foreach ($voices as $voice): ?>
<p>タイトル:<?php echo $this->Html->link($voice['Voice']['title'], array('action' => 'view', $voice['Voice']['id'])); ?></p>
<p>投稿者:<?php echo $this->Html->link($user[$voice['Voice']['user_id']]['name'], array('controller' => 'users', 'action' => 'view', $voice['Voice']['user_id'])); ?></p>
<audio src=<?php echo VOICE_FILEPATH.$voice['Voice']['filename'].VOICE_FILEEXT; ?> preload="auto"></audio>
<?php endforeach; ?>
</div>

3行目〜9行目ではジャンル別表示のリンクを表示しています。

11行目〜15行目で音声表示をループにて一覧としています。

コード内の
「PAGE_VOICE」というのは、音声一覧ページの URL が入ります。
「VOICE_FILEPATH」というのは、音声ファイル保存場所を、
「VOICE_FILEEXT」というのは、今回は .mp3 という文字列が入ります。
このように定数として設定しておくことで後々便利に記述できます。

データ取得処理

続いてデータ取得処理をコントローラ(VoicesController.php)内の「index()」へ記述します。

public function index($genre_id = null) {
	// 音声情報取得
	$this->Voice->recursive = 0;
	$param = array();
	if($genre_id) {
		// ジャンル指定
		$param += array(
			'conditions' => array(
				'Request.genre_id' => $genre_id
			)
		);
	}
	$this->paginate = $param;
	$voices = $this->paginate();
	if(empty($voices)) {
		$this->Session->setFlash(__('投稿がありません。'));
	}
	$this->set('voices', $voices);
	$this->set('genre_id', $genre_id);
	// 初期化
	$voice_id = array();
	foreach ($voices as $voice) {
		$voice_id[$voice['Voice']['id']] = $voice['Voice']['id'];
	}
	// ユーザーID取得
	$this->Voice->contain('User');
	$user_id = $this->Voice->find('list', array(
		'conditions' => $voice_id,
		'fields' => 'user_id'
	));
	// ユーザー名取得
	$this->Voice->User->contain('Profile');
	$users = $this->Voice->User->find('all', array(
		'conditions' => array('User.id' => $user_id),
		'fields' => 'id'
	));
	// まとめ
	$data = array();
	foreach($users as $user) {
		$data[$user['User']['id']] = array(
			'id' => $user['Profile'][0]['user_id'],
			'name' => $user['Profile'][0]['name']
		);
	}
	$this->set('user',$data);
}

1行目の引数にてジャンルのIDを取得しています。

3行目〜14行目にて voices テーブルのデータを取得しています。
取得時にパラメータにてジャンルIDで指定したデータのみを取得するようにしています。
ジャンルIDは、お題テーブルにある情報なので、指定時に「’Request.genre_id’」とします。

26行目〜44行目では、音声をアップロードしたユーザー名を取得しています。
極力取得データを軽くするため、22行目〜24行目にて音声IDをリスト化しておき、それを28行目の find オプションにて条件指定しています。
そうすることで音声をアップロードしたユーザーのみの情報を取得するので、全てのユーザーを取得しなくても済みます。
この処理の最後には扱いやすくするために、まとめ処理をしていますが、詳しくは過去記事「ユーザーIDをユーザー名に変更」を参照してください。

これにより表示される結果は以下になります。

site_voice_index_1

再生機能のボタンをクリックしてみると、アップロードした音声が再生されるはずです。

この一覧では音声タイトルとユーザー名だけですので、一覧表示の情報をもっと増やしたいと思いますが、続きは次回に。。。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed