Advertisement

record_eye

 

 

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

 

 

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

 

 

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

 

 

 

目次

 

 

 

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

 

まずはデモからどうぞ。

 

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

 

 

レコード一覧から再生画面まで
gif4-iloveimg-compressed-1

 

 

再生位置の変更、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フォルダを好きな場所(ブラウザからアクセス可能な場所)に設置しましょう。

 

 

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

pic1

 

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

 

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

 
 

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

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

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

 

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

 
 

画像が用意できたら設置していきましょう。
まずはalbum1.jpgを、imgフォルダへ移動します。
pic6
※ 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フォルダへ移動します。

 

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

 

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

 

 

5. レコード情報の設定

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

 

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

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

 

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

 

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

 

 

続いて、音源ファイルを指定していきます。
音源は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曲ずつなので以下のようになりました。

 

 

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

 

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

 

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

 

記入に問題がなければアルバムが1枚現れて、再生できるようになっています。
gif1-iloveimg-compressed
※うまく動かない場合は、カンマ/クオーテーションが消えていないか、全角スペースがどこかに混じっていないか、などチェックしてみましょう。

 

 

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

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

 

2枚目のレコードには
カバーアートに、album2.jpg
 
音源に
 Spanish_BEEEYYAAACHHH.mp3
 El_Burrito.mp3
 The_plot.mp3
 The_Queen.mp3″
を使用します。

 

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

 

 

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

 

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

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

 

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

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

 

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

 

 

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

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

 

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

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

 

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

 

 

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

 

2. 固定ページの作成

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

 
 

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

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

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

 

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

 
 

画像が用意できたら設置していきましょう。
まずはalbum1.jpgを、先ほどアップロードしたRecordPlayerWP内のimgフォルダへUPします。
pic7
※ album0.jpg,vinyls.svgは別の場所で使用しています。消したり上書きしないように注意です。

 

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

 

 

5. 音源の設置

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

 

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

 

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

 

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

 

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

 

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

 

 

6. レコード情報の設定

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

 

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

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

 

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

 

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

 

 

続いて、音源ファイルを指定していきます。
音源は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曲ずつなので以下のようになりました。

 

 

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

 

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

 

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

 

記入に問題がなければアルバムが1枚現れて、再生までできるようになっています。
gif1-iloveimg-compressed
※うまく動かない場合は、カンマ/クオーテーションが消えていないか、全角スペースがどこかに混じっていないか、などチェックしてみましょう。

 

 

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

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

 

2枚目のレコードには
カバーアートに、album2.jpg
 
音源に
 Spanish_BEEEYYAAACHHH.mp3
 El_Burrito.mp3
 The_plot.mp3
 The_Queen.mp3″
を使用します。

 

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

 

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

 

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

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

 

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

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

 

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

 

 

最後に.

今回のレコードプレーヤー、いかがでしたか?
音楽制作をしている方、レーベルを運営している方など、紹介したい曲がある方は是非、トライしてもらえると嬉しいです。

 

また、ローカル開発環境では、著作権を気にせずに使えるので、好きな曲をいれて音楽プレーヤーとして使うのもオススメです。

 

 

デモで使用した音源

今回のデモでは、パブリックドメインの楽曲を利用させていただきました。
音源はすべて、以下のリンクから視聴・ダウンロード可能です。
Komiku – It’s time for adventure !
Malaventura – #malaventura04
microSong Challenge – microSong Entries
Goto80 and the Uwe Schenk Band – The Ferret Show
Masters Remastered – Masters Remastered
Various Artists – Party Fun With Recorders – Volume One