先日、CodropsにてInteractive Record Playerが公開されました。
このレコードプレーヤーは、mp3音源を読み込み、レコードプレーヤー型のUIを使って再生をするのですが、独特のノイズ、トーンアームの動きや再生位置の変更など、本物をリアルに再現しています。
この記事では、Codropsのライセンスのもとで、ソースコードをカスタマイズし、
簡単に曲やレコード情報を変更できるようにした、
・WEB用のテンプレート
・WordPress用のテンプレート
を作成・再配布しています。
目次
1. レコードプレーヤーを置いてみよう。
まずはデモからどうぞ。
使い方は直感的で、レコードプレーヤーにさわったことがなくても操作ができます。
大雑把にですが、使用イメージは下のgifを参考に。
レコード一覧から再生画面まで
再生位置の変更、A面B面の切り替え
レコードノイズのON/OFF、リバーブ(反響)エフェクトのON/OFF
2. 動作環境
Mac Chrome/Firefoxで動作確認済みです。
実験段階の技術が使われているため、一部のブラウザでは正常に動作しない可能性があります。
3. WEB用テンプレートの使い方
WEB用テンプレートを使用する場合、ブラウザからアクセスできるところならどこでも、レコードプレーヤーを設置可能です。
※ 最終的な完成イメージ
今回は、ローカル開発環境にレコードプレーヤーを配置しながら、使い方をみていきましょう。
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. カバーアート画像の設置
次に、カバーアート用の画像を設置していきましょう。
はじめに、使用したい画像を用意します。
※ サイズは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までと同じ要領で可能です。試しにもう1枚追加してみましょう。
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フォルダを使用中のテーマフォルダ内へアップロードしましょう。
※ 今回はデフォルトテーマの 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. カバーアート画像の設置
次に、カバーアート用の画像を設置していきます。
はじめに、使用したい画像を用意します。
※ サイズは1000×1000くらいあると大きい画面でも綺麗に表示されます。
画像の名前は好きなものでOKです。今回はわかりやすくalbum1.jpgという名前をつけました。
画像が用意できたら設置していきましょう。
まずはalbum1.jpgを、先ほどアップロードしたRecordPlayerWP内のimgフォルダへUPします。
※ 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フォルダへ移動します。
音源を移動後はこんな感じです。
※ 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]" // }, };
コメントアウトされている部分は記入例です。
これにそって、レコード情報を入力していきましょう。
※ []で囲まれている部分を、これから入力します。記入の際[]は消しましょう。
今回は
タイトル : 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枚現れて、再生までできるようになっています。
※うまく動かない場合は、カンマ/クオーテーションが消えていないか、全角スペースがどこかに混じっていないか、などチェックしてみましょう。
7. もう一枚レコードを追加してみよう
アルバムの追加は、3~5までと同じ要領で可能です。試しにもう1枚追加してみましょう。
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枚分設定してあるのでこちらもご利用ください。
最後に.
今回のレコードプレーヤー、いかがでしたか?
音楽制作をしている方、レーベルを運営している方など、紹介したい曲がある方は是非、トライしてもらえると嬉しいです。
また、ローカル開発環境では、著作権を気にせずに使えるので、好きな曲をいれて音楽プレーヤーとして使うのもオススメです。
デモで使用した音源
今回のデモでは、パブリックドメインの楽曲を利用させていただきました。
音源はすべて、以下のリンクから視聴・ダウンロード可能です。
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