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

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

この方法で、下記の様なプレイヤーを記事内に表示させることができます。

 
特に難しい設定はありませんが、簡単な使い方やリストの作り方を紹介します。

使い方

基本的な使い方は、Audio ショートコード – WordPress Codex 日本語版を参考にして下さい。

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

サポートされている音声ファイルは、「mp3」「m4a」「ogg」「wav」「wma」の5つです。

音声ファイルをアップロードする

まず最初に、記事投稿画面から「メディアを追加」及び「記事編集画面に対象ファイルをドロップ」で音声ファイルをアップロードします(メディアにアップロードしても構いません)。

メディアを追加

メディアをアップロード

ここからは2種類の方法がありますので、使いやすい方を選択してください。

方法① 音声ファイルのURLで埋め込む

本文欄にアップロードした音声ファイルのURLを入力します。

この際、URLは独立した行に入力して下さい。また、リンクはつけないで下さい。

音声ファイルのURLを入力

音声ファイルのURLを入力

設定は以上です。これで冒頭で紹介したプレイヤーが表示されます。

方法② Audioショートコードで埋め込む

記事編集画面のメディアを追加「メディアを挿入」から設定します。

  1. 音声ファイルが選択されていることを確認
  2. 埋め込みまたはリンクを「メディアプレイヤーを埋め込む」に設定
  3. 投稿に挿入」をクリック
メディアを挿入

メディアを挿入

記事にAudioショートコードが挿入されます。

Audioショートコード

Audioショートコード

設定は以上です。

こちらの方法は、下記で紹介するオプションでカスタマイズすることもできます。

サポートされているショートコードのオプション

ショートコードにオプションを追加することで、プレイヤーをカスタマイズすることができます。

loop

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

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

autoplay

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

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

preload

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

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

音声プレイリスト

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

メディアをアップロードするまでの流れは最初と同じです。

  1. 記事編集画面の「メディアを追加」から「音声プレイリストを作成」をクリック
  2. リストに追加したい音声ファイルを選択
  3. プレイリストを新規作成」をクリック
音声プレイリストを作成

音声プレイリストを作成

  1. プレイリスト設定」で非表示にしたい項目のチェックを外す(初期設定推奨)
  2. 音声プレイリストを挿入」をクリック
音声プレイリストを編集

音声プレイリストを編集

記事に音声プレイリストのショートコードが挿入されます。

プレイリストショートコード

プレイリストショートコード

設定は以上です。

添付ファイルの詳細とアイキャッチ画像の設定

メディアから、「添付ファイルの詳細」を変更したい音声ファイルを選択します。

アイキャッチをつけたい音声ファイルを選択

アイキャッチをつけたい音声ファイルを選択

リストに表示する「タイトル」「アーティスト」「アルバム」名を変更することができます。「キャプション」はリスト一覧に表示されるタイトルです(空欄なら「タイトル – アーティスト」)。「説明」はメモです。デザインには影響しません。

これらの設定はリスト挿入時に入力することもできます。

アイキャッチ画像を挿入したい時は、「さらに詳細を編集」をクリックします。

添付ファイルの詳細とアイキャッチ画像の挿入

添付ファイルの詳細とアイキャッチ画像の挿入

画面右下の「アイキャッチ画像を設定」をクリックして、表示させたい画像を選択します。

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

アイキャッチ画像を設定

アイキャッチ画像を設定

以上で音声ファイルの編集は完了です。変更後リストの情報は自動で上書きされます。

最後に

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

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

スポンサーリンク
スポンサーリンク

2 件のコメント

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

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

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

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

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

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

  • コメントを残す

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