こんにちは。Tomicciです。
僕が思いつくまま好きなように開発している「おと風景」の実験室なんですが、「プレイリスト」機能を実装しました。
去年とある音楽サービスの運営会社のCTOの方とお話しする機会がありまして、プレイリスト機能と、同じ音源でも異なる尺(特に長尺で2時間、3時間…)を再生できるといいですよねとアドバイスを頂きました。お問い合わせフォームからもいろいろと意見を頂くことがあるんですが、本当にありがたいです！
基本一人で孤独にサイトの開発も音源の収録や編集もやってるんで、意見をもらえるとかなり参考になるんですよね。むしろそういう反応が何もないとやっていけない…w
ようやくまずはプレイリスト機能を公開した感じです。まだまだ調整中で、とりあえずPCのみ対応という形にしていますが、iPhoneでも一応は音源を再生できる点を確認しています。
もしも需要があれば、いずれはログイン機能を持たせて、プレイリストを保存したり、共有できたりしたいなー(しかも世界中のユーザーが)なんて思っていますが、現段階ではオーバースペックに思えます。とりあえずは、セッションで一時的にブラウザにプレイリストを保存できるようにもできたらいいなと考えています。
クリックでジャンプ
プレイリスト機能の説明
ごちゃごちゃした雑な説明画像なんですけども、今回の機能はこんな感じになっています。
キャプチャ画像はPCでの表示です。
プレイリストや、楽曲選択欄の楽曲が多い場合はスクロールできます。
また、プレイリスト欄はドラッグ&ドロップで曲を並び替えることが可能！
曲順を自由に設定して再生
今までは、おと風景のサイト上では同ジャンルの音源しかプレーヤーに表示されていなかったんですが、今回の機能を使用すれば、ジャンルをまたいでいろんな音源の再生順を自由に並び替えて聴くことができるようになったわけです。
出社時にプレイリストを9時間分とかで作成しておけば、仕事中、ずっとかけっぱなしにできます。
技術的なお話
今回のプレイリスト機能は、「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」はいい感じに動作してくれるので、利用したい方は是非チャレンジしてみてくださいね。
