WordPress3.9でプラグインなしで音声プレイリストが作れるようになっていたので試してみました
WordPress3.9にアップデートしてみたところ、音声ファイルをプレイリスト形式で表示できる機能が新たに追加されていました。さっそく試してみたので、メモします。
できること
WordPress3.9に追加された機能を使うと、こんなかんじの音声プレイリストがつくれるようです。
[alert]WordPress3.9の詳細は、公式サイトで見られます。
→ WordPress › 日本語 « WordPress 3.9 “Smith”[/alert]
やりかた
ということで、さっそくやってみました。
※動画のプレイリストもつくれるようですが、今回は音声ファイルのみで試してみました。
音声プレイリストのつくりかた
では、記事内に音声プレイリストをつくってみます。
まず、あらかじめ音声ファイルを複数用意しておきます。
[alert]音声ファイルの形式は特にこだわりがなければ「mp3」でよいかと思います。「m4a」形式だと、firefoxで下記画像のようなかんじで表示されてしまいますので、よろしくないです。
このことについては、以前記事にしておりますので、よろしければこちらをご覧ください。
→ WordPressプラグインなしでも音声・音楽プレイヤーが記事内に埋め込めるようになってました | nekonomemo.net[/alert]
次に、WordPressの記事投稿（編集）画面を開いて、用意した音声ファイルを本文入力部分あたりにドラッグ＆ドロップすると、
「メディアを挿入」と書かれた画面が開くので、ファイルのアップロードが終わっていることを確認して、「音声プレイリストを作成」リンクをクリックします。
「音声プレイリストを作成」画面で、プレイリストに入れたい音声ファイルにチェックが入っていることを確認して、「プレイリストを新規作成」ボタンをクリック。
「音声プレイリストを編集」画面が開くので、以下の項目を設定・編集（任意）して、「音声プレイリストを挿入」ボタンをクリックします。
- プレイリストに並ぶ曲の順番
- プレイリスト設定
- トラックリストを表示するか
- トラックリストにアーティスト名を表示するか
- 画像を表示するか
→ 音声ファイルにジャケット画像などが紐付いている場合
- 曲名
→ 下のキャプチャ画像の「aaaaaaaaa」とか「bbbbbbbbb」のところ
そうすると、記事本文中に下記のようなショートコードが入ります。記事内のこのショートコードの箇所にプレイリストが表示されます。
見ため＆つかいかた
次に、作成したプレイリストがサイトやブログでどのように表示されるかを見てみます。
※テーマによってあらかじめCSSで見ためが調整される場合があるので、今回は、例として「Twenty Fourteen」テーマを適用したブログの記事内にプレイリストを表示してみました。
先ほどつくったプレイリストはこんなかんじで表示されました。ページを開いてすぐのデフォルトの状態だと、リスト内の1曲めが選択された状態で（太字になってる）、再生ボタンを押すとそれが再生されます。
リスト内の3曲めを選んだときはこんな感じ。
曲のタイトルを日本語にしても、問題なく表示されました。
以上、このようになかなかきれいなプレイリストが簡単に作れるようになってました！
まとめ
バンドやアーティストさんのWebサイトを作るときに、「アルバム内の複数の楽曲を試聴できるようにしたい」というような要望があると、いままでは、WordPressの機能を使って1曲ごとのプレイヤーをリストで並べて掲載していました。ただ、この方法だとプレイヤーがずらずらとたくさん並んでしまうので、jQueryでアコーディオン表示させてみたり、いろいろ手間がかかるので、もうちょっとうまいことできないもんかなぁと思っていたのですが、今回の「音声プレイリスト」機能があれば、複数の音声ファイルをスマートに再生できるので、とってもたすかります。見ためもすっきりしますし、プレイリストの作りかたもかんたんなので、WordPressを使い慣れてない人に運用してもらう場合にもよさそうですね。
