ウェブサイトにレコードプレーヤーを置こう。 Codrops's Record Player ディストリビューション

先日、CodropsにてInteractive Record Playerが公開されました。

このレコードプレーヤーは、mp3音源を読み込み、レコードプレーヤー型のUIを使って再生をするのですが、独特のノイズ、トーンアームの動きや再生位置の変更など、本物をリアルに再現しています。

この記事では、Codropsのライセンスのもとで、ソースコードをカスタマイズし、
簡単に曲やレコード情報を変更できるようにした、
　・WEB用のテンプレート
　・WordPress用のテンプレート
を作成・再配布しています。

1. レコードプレーヤーを置いてみよう。
2. 動作環境
3. WEB用テンプレートの使い方
4. WordPress用テンプレートの使い方
5. 最後に.

1. レコードプレーヤーを置いてみよう。

まずはデモからどうぞ。

使い方は直感的で、レコードプレーヤーにさわったことがなくても操作ができます。
大雑把にですが、使用イメージは下のgifを参考に。

レコード一覧から再生画面まで

再生位置の変更、A面B面の切り替え
gif5

レコードノイズのON/OFF、リバーブ(反響)エフェクトのON/OFF
gif5

2. 動作環境

Mac Chrome/Firefoxで動作確認済みです。
実験段階の技術が使われているため、一部のブラウザでは正常に動作しない可能性があります。

3. WEB用テンプレートの使い方

WEB用テンプレートを使用する場合、ブラウザからアクセスできるところならどこでも、レコードプレーヤーを設置可能です。

gif2-iloveimg-compressed

※ 最終的な完成イメージ

今回は、ローカル開発環境にレコードプレーヤーを配置しながら、使い方をみていきましょう。

1. テンプレートのダウンロードと配置

まずはテンプレートをダウンロードします。
※クリックするとダウンロードが始まります。

ダウンロード後、解凍したフォルダには
　・RecordPlayer （WEB用のテンプレート)
　・RecordPlayerWP （Wordpress用のテンプレート)
が入っています。

今回はWEB用のテンプレートのみ使用するので、
はじめに、RecordPlayerフォルダを好きな場所(ブラウザからアクセス可能な場所)に設置しましょう。

今回はドキュメントルート直下に配置。

今の段階でブラウザからアクセスすると、曲情報などの項目が未設定なので、グリーンの画面が表示されます。

続いて、見出しなどの設定項目を書いていきましょう。

2. 見出し & 小見出しの設定

このセクションでは、見出しと小見出しを設定していてきます。
まずはテキストエディタで、テンプレートフォルダ内の index.htmlを開きましょう。

l.20~ に以下の部分が見つかります。

var info = {
	"title" 	: "",
	"subTitle" 	: ""
};

見出しは “title” の横の空欄へ、小見出しは “subtitle” 横の空欄へと入力していきます。

今回は
　見出し： VIP Records
　小見出し： Your classic record shop. Sell your old vinyls to us.
としたいので、以下のようにindex.htmlを編集します。

var info = {
	"title" 	: "VIP Records",
	"subTitle" 	: "Your classic record shop. Sell your old vinyls to us."
};

※カンマやクオーテーションが消えてしまうと正しく表示できなるので、要注意です。

これで、再度ブラウザからアクセスすると、入力した見出しが表示されるようになっています。

3. カバーアート画像の設置

次に、カバーアート用の画像を設置していきましょう。

はじめに、使用したい画像を用意します。
album1
※ サイズは1000×1000くらいあると大きい画面でも綺麗に表示されます。

画像の名前は好きなものでOKです。今回はわかりやすくalbum1.jpgという名前をつけました。

画像が用意できたら設置していきましょう。
まずはalbum1.jpgを、imgフォルダへ移動します。

※ album0.jpg,vinyls.svgは別の場所で使用しています。消したり上書きしないように注意です。

補足
今回は画像を、テンプレートフォルダ内のimgフォルダに入れて管理していますが、別の場所にあるファイルを利用することも可能です。その際は、設定の書き方が異なるので注意しましょう。
詳しくは>5. レコード情報の設定で解説しています。

4. 音源の設置

次に、再生したい音源を設置していきましょう。

はじめに、使用したい音源を用意します。
※ファイル形式は、mp3/wavに対応しています。

今回は以下のmp3ファイル
　Fouler_lhorizon.mp3
　Le_Grand_Village.mp3
　Champ_de_tournesol.mp3
　Un_dsert.mp3
を使用します。
※ ファイル名は再生中に曲名として表示されるので、ファイル名は曲名にしておきましょう。

続いて、画像と同じく音源を設置していきます。
上の4つのファイルを、mp3フォルダへ移動します。

音源を移動後はこんな感じです。

※ noise.mp3とroom1~3.mp3はレコードノイズとリバーブエフェクトのための音源です。上書きしないように注意です。

補足
画像と同じく、音源はテンプレートフォルダ内のmp3フォルダに入れて管理していますが、別の場所にあるファイルを利用することも可能です。その際は、設定の書き方が異なるので注意しましょう。
詳しくは5. レコード情報の設定で解説しています。

5. レコード情報の設定

次に、タイトルやアーティスト、音源の場所など、レコードの情報を設定していてきます。
再びテキストエディタで、テンプレートフォルダ内の index.htmlを開きましょう。

l.28~ に以下の部分が見つかります。

var records = {
// 	"[title]" : {
// 			"artist" : "[artist]",
// 			"year"   : "[year]",
// 			"sideA"  : "[url_to_sideA]",
// 			"sideB"  : "[url_to_sideB]",
// 			"cover"  : "[url_to_cover_art]"
// 	},
};

コメントアウトされている部分は記入例です。

これにそって、レコード情報を入力していきましょう。
※ []で囲まれている部分を、これから入力します。記入の際[]は消しましょう。

今回は
　タイトル： It’s time for adventure !
　アーティスト： Komiku
　リリース年： 2016
とつけたいので、記入例のコメントアウトを外して、以下のように直します。

var records = {
	"It's time for adventure !" : {
			"artist" : "Komiku",
			"year"   : "2016",
			"sideA"  : "[url_to_sideA]",
			"sideB"  : "[url_to_sideB]",
			"cover"  : "[url_to_cover_art]"
	},
};

続いて、音源ファイルを指定していきます。
音源はA面、B面にそれぞれ1曲~何曲でも設定することが可能です。

今回は
　”sideA” に Fouler_lhorizon.mp3, Le_Grand_Village.mp3 の2曲
　”sideB” に Champ_de_tournesol.mp3, Un_dsert.mp3 の2曲
を設定します。

この部分は、ファイル名だけではなく、ファイルのURLを入力する必要があります。
なので、
　・mp3フォルダに音源がある場合 : mp3/Fouler_lhorizon.mp3
　・同ドメイン内に音源がある場合 : /path/to/Fouler_lhorizon.mp3
　・外部に音源がある場合 : http://xxx.com/path/to/Fouler_lhorizon.mp3
など、使用する音源の場所に合わせてURLを変更しましょう。

ここでは、mp3フォルダを利用したので、一番上のmp3/Fouler_lhorizon.mp3形式を利用します。

また、片面に複数曲設定する場合は曲と曲を間をカンマ(,)で区切って記述します。
今回は、A/B面ともに2曲ずつなので以下のようになりました。

var records = {
	"It's time for adventure !" : {
			"artist" : "Komiku",
			"year"   : "2016",
			"sideA"  : "mp3/Fouler_lhorizon.mp3,mp3/Le_Grand_Village.mp3",
			"sideB"  : "mp3/Champ_de_tournesol.mp3,mp3/Un_dsert.mp3",
			"cover"  : "[url_to_cover_art]"
	},
};

カバーアートも、音源と同じく、
　・imgフォルダに画像がある場合 : img/album1.jpg
　・同ドメイン内に画像がある場合 : /path/to/album1.jpg
　・外部に画像がある場合 : http://xxx.com/path/to/album1.jpg
など、使用する画像の場所に合わせてURLを変更しましょう。
今回は、imgフォルダを利用したので、一番上のimg/album1.jpg形式を利用します。

記入後はこんな感じです。

var records = {
	"It's time for adventure !" : {
			"artist" : "Komiku",
			"year"   : "2016",
			"sideA"  : "mp3/Fouler_lhorizon.mp3,mp3/Le_Grand_Village.mp3",
			"sideB"  : "mp3/Champ_de_tournesol.mp3,mp3/Un_dsert.mp3",
			"cover"  : "img/album1.jpg"
	},
};

ここまで記入できたら、準備は完了です。
保存をしてブラウザからアクセスしてみましょう。

記入に問題がなければアルバムが1枚現れて、再生できるようになっています。

※うまく動かない場合は、カンマ/クオーテーションが消えていないか、全角スペースがどこかに混じっていないか、などチェックしてみましょう。

6. もう一枚レコードを追加してみよう

アルバムの追加は、3~5までと同じ要領で可能です。試しにもう１枚追加してみましょう。

2枚目のレコードには
カバーアートに、album2.jpg

音源に
　Spanish_BEEEYYAAACHHH.mp3
　El_Burrito.mp3
　The_plot.mp3
　The_Queen.mp3″
を使用します。

まずは、画像をimgフォルダ、音源をmp3フォルダへ移動します。
移動後のフォルダはこんな感じ。

2枚目は
　タイトル： #malaventura04
　アーティスト： Malaventura
　リリース年： 2015
としたいので、1枚目のしたに同じ要領でレコードの情報を記入していきます。

var records = {
	"It's time for adventure !" : {
			"artist" : "Komiku",
			"year"   : "2016",
			"sideA"  : "mp3/Fouler_lhorizon.mp3,mp3/Le_Grand_Village.mp3",
			"sideB"  : "mp3/Champ_de_tournesol.mp3,mp3/Un_dsert.mp3",
			"cover"  : "img/album1.jpg"
	},
	"#malaventura04" : {
			"artist" : "Malaventura",
			"year"   : "2015",
			"sideA"  : "[url_to_sideA]",
			"sideB"  : "[url_to_sideB]",
			"cover"  : "[url_to_cover_art]"
	},
};

続いて、音源ファイルを指定していきます。
今回は
　”sideA” に Spanish_BEEEYYAAACHHH.mp3, El_Burrito.mp3 の2曲
　”sideB” に The_plot.mp3, The_Queen.mp3 の2曲
を設定します。

ファイルはmp3フォルダにあるので、mp3/Spanish_BEEEYYAAACHHH.mp3と頭にmp3/をつけて記入します。

var records = {
	"It's time for adventure !" : {
			"artist" : "Komiku",
			"year"   : "2016",
			"sideA"  : "mp3/Fouler_lhorizon.mp3,mp3/Le_Grand_Village.mp3",
			"sideB"  : "mp3/Champ_de_tournesol.mp3,mp3/Un_dsert.mp3",
			"cover"  : "img/album1.jpg"
	},
	"#malaventura04" : {
			"artist" : "Malaventura",
			"year"   : "2015",
			"sideA"  : "mp3/Spanish_BEEEYYAAACHHH.mp3,mp3/El_Burrito.mp3",
			"sideB"  : "mp3/The_plot.mp3,mp3/The_Queen.mp3",
			"cover"  : "[url_to_cover_art]"
	},
};

最後にカバーアート画像も指定します。
画像はimgフォルダにあるので、img/album2.jpgと頭にimg/をつけて記入します。

var records = {
	"It's time for adventure !" : {
			"artist" : "Komiku",
			"year"   : "2016",
			"sideA"  : "mp3/Fouler_lhorizon.mp3,mp3/Le_Grand_Village.mp3",
			"sideB"  : "mp3/Champ_de_tournesol.mp3,mp3/Un_dsert.mp3",
			"cover"  : "img/album1.jpg"
	},
	"#malaventura04" : {
			"artist" : "Malaventura",
			"year"   : "2015",
			"sideA"  : "mp3/Spanish_BEEEYYAAACHHH.mp3,mp3/El_Burrito.mp3",
			"sideB"  : "mp3/The_plot.mp3,mp3/The_Queen.mp3",
			"cover"  : "img/album2.jpg"
	},
};

これで、再度ブラウザから読み込むと2枚目が追加されています。

3枚目以降も同じ流れで追加することができます。
デモに使用したテンプレートでは、初めから6枚分設定してあるのでそちらもごご利用ください。

4. WordPress用テンプレートの使い方

このチャプターでは、固定ページを利用してレコードプレーヤーをWordpressの中に設置していきます。
後半は2.WEB用テンプレートの使い方と少し重複しますが、順番に見ていきましょう。

1. テンプレートのダウンロードと配置

まずはテンプレートをダウンロードします。
※クリックするとダウンロードが始まります。

ダウンロード後、解凍したフォルダには
　・RecordPlayer （WEB用のテンプレート)
　・RecordPlayerWP （Wordpress用のテンプレート)
が入っています。

今回はWordpress用のテンプレートのみ使用するので、
FTPクライアントなどを使って、RecordPlayerWPフォルダを使用中のテーマフォルダ内へアップロードしましょう。
dir1
※ 今回はデフォルトテーマの Twenty Sixteeen を使用していますが、他のテーマでも問題ありません。

2. 固定ページの作成

今度はwordpressへログインし、レコードプレーヤー用の固定ページを作成しましょう。

まずは、固定ページ -> 新規作成 をクリックして新しい固定ページを作成します。変更が必要な箇所はタイトルとテンプレート欄のみです。

下のgifを参考に、好きなタイトルを設定し、テンプレートを”Record Player”へと変更しましょう。

設定が終わったら、公開を押します。

この段階でこの固定ページへアクセスすると、曲情報などの項目が未設定なので、グリーンの画面が表示されます。

続いて、見出しなどの設定項目を書いていきましょう。

3. 見出し & 小見出しの設定

このセクションでは、見出しと小見出しを設定していてきます。
まずはテキストエディタで、Wordpress用テンプレートフォルダ内の record-player.phpを開きましょう。

l.24~ に以下の部分が見つかります。

var info = {
	"title" 	: "",
	"subTitle" 	: ""
};

見出しは “title” の横の空欄へ、小見出しは “subtitle” 横の空欄へと入力していきます。

今回は
　見出し： VIP Records
　小見出し： Your classic record shop. Sell your old vinyls to us.
としたいので、以下のようにrecord-player.phpを編集します。

var info = {
	"title" 	: "VIP Records",
	"subTitle" 	: "Your classic record shop. Sell your old vinyls to us."
};

※カンマやクオーテーションが消えてしまうと正しく表示できなるので、要注意です。

できたら一旦保存し、先ほどアップロードしたフォルダへと上書きします。

これで、再度固定ページへアクセスすると、入力した見出しが表示されるようになっています。

4. カバーアート画像の設置

次に、カバーアート用の画像を設置していきます。

はじめに、使用したい画像を用意します。
album1
※ サイズは1000×1000くらいあると大きい画面でも綺麗に表示されます。

画像の名前は好きなものでOKです。今回はわかりやすくalbum1.jpgという名前をつけました。

画像が用意できたら設置していきましょう。
まずはalbum1.jpgを、先ほどアップロードしたRecordPlayerWP内のimgフォルダへUPします。

※ album0.jpg,vinyls.svgは別の場所で使用しています。消したり上書きしないように注意です。

補足
今回は画像を、テンプレートフォルダ内のimgフォルダに入れて管理していますが、別の場所にあるファイルを利用することも可能です。その際は、設定の書き方が異なるので注意しましょう。
詳しくは6. レコード情報の設定で解説しています。

5. 音源の設置

次に、再生したい音源を設置していきましょう。

はじめに、使用したい音源を用意します。
※ファイル形式は、mp3/wavに対応しています。

続いて、画像と同じく音源を設置していきます。
上の4つのファイルを、RecordPlayerWP内のmp3フォルダへ移動します。

音源を移動後はこんな感じです。

※ noise.mp3とroom1~3.mp3はレコードノイズとリバーブエフェクトのための音源です。上書きしないように注意です。

補足
画像と同じく、音源はテンプレートフォルダ内の”mp3″フォルダに入れて管理していますが、別の場所にあるファイルを利用することも可能です。その際は、設定の書き方が異なるので注意しましょう。
詳しくは6. レコード情報の設定で解説しています。

6. レコード情報の設定

次に、タイトルやアーティスト、音源の場所など、レコードの情報を設定していてきます。
再びテキストエディタで、テンプレートフォルダ内の record-player.phpを開きましょう。

l.32~ に以下の部分が見つかります。

var records = {
// 	"[title]" : {
// 			"artist" : "[artist]",
// 			"year"   : "[year]",
// 			"sideA"  : "[url_to_sideA]",
// 			"sideB"  : "[url_to_sideB]",
// 			"cover"  : "[url_to_cover_art]"
// 	},
};