おと風景にプレイリスト機能を実装しました

こんにちは。Tomicciです。

僕が思いつくまま好きなように開発している「おと風景」の実験室なんですが、「プレイリスト」機能を実装しました。

おと風景にプレイリスト機能を実装しました

去年とある音楽サービスの運営会社のCTOの方とお話しする機会がありまして、プレイリスト機能と、同じ音源でも異なる尺(特に長尺で2時間、3時間・・・)を再生できるといいですよねとアドバイスを頂きました。お問い合わせフォームからもいろいろと意見を頂くことがあるんですが、本当にありがたいです!

基本一人で孤独にサイトの開発も音源の収録や編集もやってるんで、意見をもらえるとかなり参考になるんですよね。むしろそういう反応が何もないとやっていけない・・・w

ようやくまずはプレイリスト機能を公開した感じです。まだまだ調整中で、とりあえずPCのみ対応という形にしていますが、iPhoneでも一応は音源を再生できる点を確認しています。

もしも需要があれば、いずれはログイン機能を持たせて、プレイリストを保存したり、共有できたりしたいなー(しかも世界中のユーザーが)なんて思っていますが、現段階ではオーバースペックに思えます。とりあえずは、セッションで一時的にブラウザにプレイリストを保存できるようにもできたらいいなと考えています。

プレイリスト機能の説明

ごちゃごちゃした雑な説明画像なんですけども、今回の機能はこんな感じになっています。

キャプチャ画像はPCでの表示です。

プレイリストや、楽曲選択欄の楽曲が多い場合はスクロールできます。

また、プレイリスト欄はドラッグ&ドロップで曲を並び替えることが可能!

曲順を自由に設定して再生

今までは、おと風景のサイト上では同ジャンルの音源しかプレーヤーに表示されていなかったんですが、今回の機能を使用すれば、ジャンルをまたいでいろんな音源の再生順を自由に並び替えて聴くことができるようになったわけです。

出社時にプレイリストを9時間分とかで作成しておけば、仕事中、ずっとかけっぱなしにできます。

技術的なお話

今回のプレイリスト機能は、「Music Portfolio Template with HTML5 and jQuery」というプラグインをカスタマイズして作成しました。

Music Portfolio Template with HTML5 and jQuery

「Download source」と書かれたボタンからソースをダウンロードすることができます。

配布されているソースで使用されているjQueryのバージョンが「1.4.2」と古いため、新しいバージョンを使用する際には注意が必要です。

jQueryのバージョンが「1.8.3」であれば動作するようです。それ以上新しいものを使用する場合には、スクリプトの修正が何箇所か必要でしょう。

jQueryのバージョンを「1.8.3」とする場合には、使用するjQuery UIのバージョンも「1.11.4」などに変更しないと動作しないようです。

「Music Portfolio Template」はいい感じに動作してくれるので、利用したい方は是非チャレンジしてみてくださいね。

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景