WordPressの記事に音声ファイルを挿入する

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

WordPressの記事に音声ファイルを挿入する&再生できる様にする方法をまとめておきます。

記事に音声ファイルを挿入する

サポートされているファイル
mp3 , m4a , ogg , wav , wma

ブロックエディター

記事編集画面で、「音声」ブロックを追加します。

「音声」ブロックを追加

「音声」ブロックを追加

一覧から「アップロード」を選択します(アップロード済みの時は「メディアライブラリ」から)。

「アップロード」を選択

「アップロード」を選択

パソコンからアップロードするファイルを選択すれば、オーディオプレイヤーが挿入されます。

記事に音声プレイヤーが挿入される

記事に音声プレイヤーが挿入される

クラシックエディター

記事編集画面で、「メディアを追加」ボタンをクリックします。

「メディアを追加」をクリック

「メディアを追加」をクリック

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

音声ファイルを選択して「投稿に挿入」をクリック

音声ファイルを選択して「投稿に挿入」をクリック

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

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

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

他にも、メディアファイルのURLを直接入力する方法もあります(こちらはカスタマイズ不可)。

メディアファイルのURLを直接入力する

メディアファイルのURLを直接入力する

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

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

参考:Audio (音声) ショートコード | WordPress.org 日本語

loop

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

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

autoplay

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

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

preload

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

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

最後に

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

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

ただ、この方法ではオーディオプレイヤーしか表示させることができないので、曲名やアーティスト名を一緒に表示させたい時は、音声プレイリストを利用して下さい。

WordPressの記事に音声プレイリストを挿入する

WordPressの記事に音声プレイリストを挿入する

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

YouTubeで使える登録不要で無料のBGM素材サイト一覧

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

4 件のコメント

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

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

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

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

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

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

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

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

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

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

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

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

  • コメントを残す

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