WordPressで音声ファイル(MP3)を再生する方法

WordPressで音声ファイル(MP3)を再生する方法

WordPressで音声ファイル(MP3)を再生する方法を紹介します。

scofield
WordPressのVer.3.6以降「音声ファイルのURL」及び「Audioショートコード」で音声ファイルを記事内に埋め込める様になりました。プラグインは不要です。

サポートされているファイル拡張子

詳細はAudio ショートコード – WordPress Codex 日本語版を参考にして下さい。

今回紹介する方法では、下記の様なオーディオプレイヤーを記事内に表示させることができます(サポートされている音声ファイルは、「mp3」「m4a」「ogg」「wav」「wma」の5つです)。

基本的な使い方

記事投稿画面で「メディアを追加」をクリックします。

記事投稿画面で「メディアを追加」をクリック

記事投稿画面で「メディアを追加」をクリック

音声ファイルをアップロードして、「投稿に挿入」をクリックします(埋め込みまたはリンクが「メディアプレイヤーを埋め込む」になっていることを確認)。

音声ファイルをアップロードして「投稿に挿入」をクリック

音声ファイルをアップロードして「投稿に挿入」をクリック

オーディオショートコードが挿入されれば完了です。

オーディオショートコードが挿入される

オーディオショートコードが挿入される

これで記事にオーディオプレイヤーが表示されます。

scofield
アップロードしたメディアファイルのURLを直接入力する方法もあります。

ショートコードのオプション

デフォルト推奨ですが、ショートコードにオプションを追加してカスタマイズすることもできます。

loop

デフォルトは「off」です。

loop="off" ループ再生無効
loop="on" ループ再生有効

autoplay

デフォルトは「off」です。

autoplay="off" ユーザーがプレイをクリックすると再生
autoplay="on" メディアの準備ができ次第自動再生

preload

デフォルトは「none」です。

preload="none" ページ読み込み時にオーディオを読み込まない
preload="auto" ページ読み込み時にオーディオ全体を読み込む
preload="metadata" ページ読み込み時にメタデータだけを読み込む

音声プレイリスト

音声プレイリストを作成すれば、リスト付きのオーディオプレイヤーを表示させることができます。

 
メディアを追加から、「音声プレイリストを作成」をクリックして、リストに追加したい曲を全て選択します(追加した曲は画面の下に表示されます)。

曲を全て追加したら、「プレイリストを新規作成」をクリックします。

音声プレイリストを作成

音声プレイリストを作成

音声プレイリスト編集画面が表示されるので、「トラックの順序変更」「曲名の編集」「リストに表示させる項目」を選択して、「音声プレイリストを挿入」をクリックします。

音声プレイリストを編集

音声プレイリストを編集

音声プレイリストが挿入されれば完了です。

音声プレイリストが挿入される

音声プレイリストが挿入される

これで記事にオーディオプレイリストが表示されます。

scofield
リストに表示される「曲名」「アーティスト名」「画像」はメディアの編集から変更可能です。メディアを編集すれば、リストの項目も自動で置き換えられます。

メディアの編集

ダッシュボードの「メディア」から、編集したい音声ファイルの「編集」をクリックします。

音声ファイルの編集をクリック

音声ファイルの編集をクリック

リストに表示させたい「曲名」「アーティスト名」「アルバム名」を入力します。

画像を表示させたい時は、「アイキャッチ画像を設定」から設定することができます。

この際、画像は自動で縮小されますが、表示される画像のサイズは「60×60」の正方形になっているので、縦横比率1:1の画像を使うと見栄えがよくなります。

メディアの編集

メディアの編集

他の項目「キャプション」はリスト一覧に表示されるタイトルです(空欄なら「タイトル – アーティスト」で表示される)。また、「説明」はメモみたいなものなので、デザインには影響しません。

メディアファイルの編集後、リストの情報は自動で置き換えられます。

最後に

Audioショートコードを使えば、YouTube等の動画投稿サイトを利用せず、自分のサイトで簡単に音声ファイルを再生することができるので、知っておくと便利な機能だと思います。

但し、著作権で保護された音声ファイルを無断で公開することだけは絶対にしないで下さい。

YouTubeやニコ動でも使える!無料の音楽素材サイト一覧

YouTubeやニコ動でも使える!無料の音楽素材サイト一覧

2016.03.22
スポンサーリンク
スポンサーリンク
wordpress

僕が一眼を購入してから訪れた場所を紹介しています
「インスタ映えするかも!?」

4 件のコメント

  • 【御礼】
    昨年末からブログをはじめました。
    記事の中にBMGを埋め込みたいと思い探していたところ
    御サイトに行きつきました。
    早速、参考にさせていただきました。

    私のブログは、日常の些細なことを日記形式で綴っているだけの
    他愛もない内容ではありますが、よろしければ一度ご覧いただければと思います。

    ブログ名:【不可解な日々】シーホースの小さな疑問
    アドレス: http://soliloquence.net/blog/

    ありがとうございました。

    • この記事がお役に立てたなら幸いです。

      ブログやホームページ作成の知識をお持ちなのだと思いますが、綺麗にまとまっていて素晴らしいです。後、写真はいいですよね!僕は物撮りばかりなのですが、そろそろ風景も撮りたいと思っていたところです。また、遊びに行かせてもらいますね。

  • 記事の情報が古いわ。更新するか、削除するかしろ。
    もしくは、検索上位に出てくるな。迷惑じゃ。ボケ。消えてなくなれクソ記事

    • お役に立てず申し訳ありません。

      ただ、この記事は今月更新したばかりなので、情報が古くなっているなんてことはないはずです。更新日も掲載していますし、全て僕自身が検証済みの情報を掲載しています。

      もし、「Gutenberg Editor」の解説記事を求めているのであれば(僕のサイトは全て「Classic Editor」での解説)、検索する際に「Gutenberg」のキーワードを追加してみてはどうでしょうか?

      また、阿部さんが書かれた記事が上位表示されなくて納得できないのであれば、恐らく「Classic Editor」と「Gutenberg Editor」の需要の差だと思います。現状、WordPressの情報を検索すると、「Classic Editor」の解説記事の方が圧倒的に多いと思いますが(上位表示されている)、今後「Gutenberg Editor」の需要が上がれば、おのずと「Gutenberg Editor」の解説記事が検索結果の上位になるはずです。

      僕は基本的に批判的なコメントは嫌いではないので、自由にコメントして頂いて構わないのですが、できれば具体的に書いて頂けると助かります。そうでないと、憶測で返信することしかできません。

  • コメントを残す

    メールアドレスが公開されることはありません。