WordPressプラグインなしでも音声・音楽プレイヤーが記事内に埋め込めるようになってました

WordPressで作ったサイトやブログでMP3などの音声（音楽）データを再生できるようにするとき、以前はプラグインを導入していましたが、最近、プラグインなしでもWordPressで対応して再生できるようにしてくれていることに気がついたので、どんなことができるのか確認したときのメモです。

やりたいこと

WordPressで作っているブログやサイト上で音楽を再生できるようにしたい

WordPressでできること（やってみたらできちゃったこと）

音楽を再生したページの投稿・編集画面で、写真を追加するときと同様の手順で音声データを追加すればOKです。

投稿するときの手順

「メディアを追加」ボタンを押して、

メディアを選ぶ画面で、音声データをアップロードもしくは、すでにアップロードされているものを選択して、投稿に挿入ボタンを押します。

※そのときに、添付ファイルの表示設定を「メディアプレイヤーを埋め込む」にしておきます

そうすると、記事内に「audio」のショートコードが入ります。

これを実際のサイトやブログで見るとこんな感じになります。再生ボタンや音量調整ボタンもちゃんとついてて、見ためもよいです。

ちなみに、たくさん並べるとこんな感じです。

iPhoneでも表示・再生できました。

メディアの編集やプレビュー

音声データは、写真などの画像データと同じように、「メディアライブラリ」でプレビューやタイトルなどの編集もできます。

WordPress Version 3.6から対応してるようです

いつから対応しているのだろうと思ってちょっと調べてみたら、WordPressのVersion 3.6で対応してくれたようです。つい最近のことでした。

Version 3.6 – WordPress Codex 日本語版

このページをよく見たら、「オーディオとビデオに対応したよ」と書いてありました。

もっとくわしいことはこちらに書いてあります（英語）。
WordPress › Audio / Video support in Core « Make WordPress Core

まとめ

いままでプラグインを使っていたところが、デフォルトで対応してくれていて、見ためもすっきりしているし、とても便利になったなぁと思いました。動画のデータでも同じようにできるようになってるようなので、Youtubeなどではなくて、自前のサイトだけで公開したいときなどにも、手間が少なくなりそうでいいですねぇ。

追記（2014/02/03）

その後、いろいろなサイトやブログをつくるなかで、気づいたことがありましたので、追記します。

メディアプレイヤーの埋め込みがうまくいかない場合

配布・販売されているWordPressのテーマをつかう場合、そのテーマにあらかじめオーディオファイルを再生するためのメディアプレイヤー・lightbox系のjQueryなどが設定されていると、上記の方法と競合して動作・表示されないことがありました。うまく動作しない場合は、それを確認してみるとよいと思われます。

ファイル形式について

私の環境では、Firefoxだと「m4a」形式の音声ファイルが再生できないことがありました。
※いまのところ、私は自分の以下の環境で再生できている「mp3」形式でファイルをアップしていますが、いまあらためて確認したところ、このあたりはいろいろむずかしいようです……

• Mac OSX 10.9.1
  • Firefox 26.0
  • Google Chrome 32.0
  • Safari 7.0.1
• Windows 7
  • Internet Explorer 10
  • FireFox 26.0
  • Google Chrome 32.0
• iOS 7.0.4
  • Google Chrome（2014/1/31時点での最新Ver）
  • Safari（2014/1/31時点での最新Ver）

ご参考
→　HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット – HTML | MDN

追記（2014/05/12）

WordPress3.9から、プラグインなしで音声プレイリストも表示できるようになりました。詳細はこちらの記事をご覧ください。
[icon-box icon=’arrow-right-2′ size=16 color=gray width=full]WordPress3.9でプラグインなしで音声プレイリストが作れるようになっていたので試してみました | nekonomemo.net[/icon-box][clear]