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

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

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

WordPressでは、mp3m4aoggwavwmaの音声ファイルがサポートされています。

目次

ブロックエディター

ブロックエディターでは、下記の様なオーディオプレイヤーを挿入できます。

記事に挿入する

エディターを開いて、「音声」ブロックを追加します。

「音声」ブロックを追加

一覧から音声ファイルの追加方法を選択します(画像同様にドラッグ&ドロップでアップロード可)。

「アップロード」を選択

音声ファイルを選択して、「選択」をクリックするとオーディオプレイヤーが挿入されます。

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

音声設定

音声ブロックの「音声設定」からは、詳細設定を変更することができます(初期設定推奨)。

音声設定

スクロールできます
詳細
自動再生 ページにアクセスした際に音声を自動再生
ループ 音声ファイルを繰り返し再生
プリロード(デフォルト) ユーザーの使用するブラウザーに依存
プリロード(自動) ページ読み込み時に音声ファイル全体を読み込む
プリロード(メタデータ) ページ読み込み時にメタデータだけを読み込む
プリロード(なし) ページ読み込み時に音声ファイルを読み込まない

自動再生とループはオフ推奨、ページの読み込み速度を上げるなら「プリロード(なし)」がおすすめです。

他にも、「HTMLアンカー」と「追加CSSクラス」を設定することができます。

クラシックエディター

クラシックエディターでは、下記の様なオーディオプレイヤーを挿入できます。

記事に挿入する

エディターを開いて、「メディアを追加」をクリックします。

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

音声ファイルを選択して、「投稿に挿入」をクリックするとオーディオプレイヤーが挿入されます。

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

他にも、メディアファイルのURLを直接入力して挿入することもできます。

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

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

スクロールできます
効果
loop="off" ループ再生無効
loop="on" ループ再生有効
autoplay="off" ユーザーがプレイをクリックすると再生
autoplay="on" メディアの準備ができ次第自動再生
preload="none" ページ読み込み時に音声ファイルを読み込まない
preload="auto" ページ読み込み時に音声ファイル全体を読み込む
preload="metadata" ページ読み込み時にメタデータだけを読み込む

初期設定では、全て「off(none)」に設定されています。

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

ウィジェットに配置

ウィジェットに設置したい時は、「音声」ウィジェットで追加します。

「音声」ウィジェット

記事に挿入する時同様、「音声ファイルを編集」から詳細設定も変更できます。

最後に

WordPressのVer.3.6以降、音声ファイルはプラグインなしで挿入できるようになりました。

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

あわせて読みたい
WordPressの記事に音声プレイリストを挿入する WordPressの記事に音声プレイリストを挿入する方法をまとめておきます。 【音声プレイリスト】 音声プレイリストを使うと、下記の様なオーディオプレイヤーを表示させる...
あわせて読みたい
YouTubeで使える登録不要で無料のBGM素材サイト一覧 YouTubeで使える無料のBGM素材サイトをまとめてみました。 基本的に登録不要で無料ですが、商用利用を検討されている方は必ず規約に目を通して下さい。 【音楽素材サイ...
スポンサーリンク
スポンサーリンク

スポンサーリンク

この記事を書いた人

このブログでは、管理人が学んだこと、体験したこと、購入した商品を好き勝手レビューしています。また、できるだけ正確な情報を伝えるよう心がけてはいますが、古い情報や間違った情報を掲載している可能性があります。

気づかれましたら、遠慮なくコメントして頂けるとうれしいです。

関連コンテンツ

コメント

コメント一覧 (4件)

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

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

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

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

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

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

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

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

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

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

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

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

コメントする

目次
閉じる