WordPressにMP3オーディオファイルを追加する方法(簡単な3つの方法)

ここで驚くかもしれませんが、オーディオファイルをサイトに追加しようとする多くのWordPressユーザーは、訪問者を引きつけるどころか遠ざけてしまっています。

原因は通常、サイトを遅くする巨大なファイル、壊れた音楽プレーヤー、モバイルデバイスで機能しないオーディオです。

WordPressウェブサイトの所有者の音声に関する問題を修正するのを手伝っている中で、このパターンを何度も見てきました。

広範な調査とテストの結果、WordPressにMP3ファイルを追加するための優れたオプションが3つ見つかりました。それらは、WordPressの組み込みオーディオブロック、HTML5オーディオプレーヤー、およびEasy Digital Downloadsです。

この記事では、初心者の方でもこれらのツールを使ってWordPressウェブサイトに音声ファイルを簡単に追加する方法をご紹介します。

WordPressにMP3オーディオファイルを追加する方法

WordPressにMP3オーディオファイルを追加する理由

WordPressウェブサイトでオーディオファイルを共有することは、人々を引きつけ、より多くの時間を費やすように促す素晴らしい方法です。

Webサイトのエンゲージメントが高い場合、訪問者はあなたのブランドを記憶しやすくなります。また、購入したり、メールニュースレターにサインアップしたりするなどの行動をとる可能性もあります。

ここがポイントです:訪問者がウェブサイトを探索する時間が長くなると、検索エンジンにとってプラスのシグナルになります。

その結果、サイトのSEOランキングが向上し、より多くのトラフィックを獲得できます。

これを踏まえて、ブログ記事、ポッドキャストエピソード、ウェビナー録音、またはウェブサイト上の楽曲のMP3音声バージョンを共有するのは良い考えです。これらの音声ファイルを販売することもできます。🛒

このガイドでは、WordPressウェブサイトにMP3オーディオファイルを追加する方法を説明します。特定のメソッドに興味がある場合は、リンクをクリックして記事の先頭にスキップできます。

さあ、始めましょう。

方法1. 内蔵オーディオブロックを使用してMP3ファイルを追加する方法(ストリーミングプラットフォームに対応)

MP3音声ファイルを埋め込む最も簡単な方法は、WordPressの組み込みオーディオブロックを使用することです。

このシンプルなブロックには、再生/一時停止ボタン、音量コントロール、再生速度を変更するボタンなど、すべての重要な再生コントロールが含まれています。

より高度な機能が不要な場合は、「オーディオ」ブロックが良い選択肢です。「オーディオ」ブロックを使用して、WordPressメディアライブラリから任意のMP3ファイルを再生できます。

⚠️ 重要: ほとんどのユーザーにとって、WordPressサイトで再生するためにMP3をアップロードすることは推奨しません。これは、大きなオーディオファイルやビデオファイルをアップロードすると、多くのスペースを占有し、Webサイトが遅くなる可能性があるためです。

WordPressに動画をアップロードしてはいけない理由に関するガイドで詳細をご確認いただけます。

または、SpotifyやSoundCloudなどの人気のサードパーティオーディオプラットフォームからMP3を埋め込むこともできます。

ただし、一部のプラットフォームではオーディオクリップのみを埋め込むことができることに注意してください。また、次の画像のように、訪問者にサイトを離れてプラットフォームで完全なMP3を聴くように促す場合もあります。

WordPressに埋め込まれたSpotifyプレイリスト

WordPressウェブサイトにMP3オーディオファイルを追加するには、任意のページまたは投稿を開きます。次に、「+」アイコンをクリックします。

ポップアップが表示されます。

「オーディオ」と入力して、適切なブロックを見つけてください。次に、「オーディオ」ブロックをクリックするだけで、ページに追加できます。

WordPressの組み込みオーディオブロック

新しいMP3ファイルをアップロードしたい場合は、「アップロード」をクリックする必要があります。

その後、コンピューターからアップロードしたいオーディオファイルを選択してください。

既存のMP3ファイルを使用したい場合は、「メディアライブラリ」をクリックしてください。その後、WordPressのメディアライブラリからオーディオファイルを選択できるようになります。

WordPress ウェブサイトにオーディオファイルをアップロードする

外部サイトからMP3を埋め込みたい場合は、代わりに「URLから挿入」をクリックする必要があります。

オーディオファイルが配置されている場所のURLを貼り付けるだけです。

WordPress への Spotify オーディオの埋め込み

それが完了したら、「オーディオ」ブロックをクリックして、設定できるさまざまな設定を確認することをお勧めします。

📝 注意: 表示される設定は、メディアライブラリからMP3を追加する場合と、サードパーティのサイトからオーディオを埋め込む場合とで異なる場合があります。

例えば、「自動再生」スイッチをクリックすることで、オーディオを自動再生できるようにすることができます。

ただし、ページを読み込んだらすぐに再生が始まるオーディオは、特に訪問者の音量が大きい場合、迷惑になる可能性があります。これを念頭に置いて、「自動再生」は訪問者のエクスペリエンスを何らかの形で向上させる場合にのみ有効にしてください。

オーディオブロックの自動再生設定

「ループ」スイッチをクリックすることで、オーディオファイルを無限ループで再生できる場合もあります。

この設定は、あまり邪魔にならないオーディオで最も効果的です。たとえば、バックグラウンドノイズを提供したり、雰囲気を設定したりするインストゥルメンタルトラックに使用できます。

あるいは、アルバム全体のような、訪問者が何度も聞きたい長いオーディオのためにループを有効にすることもできます。

WordPressオーディオブロックを使用してMP3オーディオファイルをループする

ページまたは投稿の設定が完了したら、公開または更新できます。

これで、MP3がWebページにライブで表示されるはずです。これは、訪問者がブロックの再生コントロールボタンを使用してオーディオを無料で聴くことができることも意味します。

方法2. WordPressプラグインを使用してMP3オーディオファイルを追加する方法(よりカスタマイズ可能)

標準の「オーディオ」ブロックは、サードパーティプラットフォームからのコンテンツの埋め込みを含め、WebサイトにMP3オーディオを追加する簡単な方法です。ただし、オーディオプレーヤーの外観や動作のカスタマイズに関しては、非常に限られています。

WordPressメディアライブラリからオーディオファイルを追加したい場合は、HTML5 Audio Playerの方がはるかにカスタマイズ可能です。

これはWordPress向けの最高のオーディオプレーヤープラグインの1つであり、MP3を含むいくつかの異なるオーディオ形式をサポートしています。ただし、このプラグインを使用してサードパーティのストリーミングサービスからコンテンツを埋め込むことはできないことに注意してください。

まず、プラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化すると、オーディオプレイヤーを作成し、そのプレイヤーにMP3ファイルを追加する必要があります。

開始するには、Html5 Audio Player » Html5 Audio Playerにアクセスしてください。ここから、「Add Audio Player」ボタンをクリックするだけです。

WordPressウェブサイトにオーディオプレーヤーを追加する

それが終わったら、次にオーディオプレーヤーの名前を「タイトルを追加」フィールドに入力します。

これは参照用ですので、好きなタイトルを使用できます。

プラグインを使用してオーディオプレーヤーウィジェットを作成する

その後、「プレーヤー設定」セクションまでスクロールします。

ここで、「オーディオを追加」ボタンをクリックしてWordPressメディアライブラリを起動します。次に、使用したいMP3ファイルを選択します。

HTML5プレーヤーにオーディオファイルを追加する

MP3を選択したら、オーディオプレーヤーをカスタマイズする準備ができました。

デフォルトでは、訪問者はオーディオを再生するために「再生」ボタンをクリックするだけで済みます。これはほとんどの訪問者が期待するオーディオプレーヤーの動作方法なので、通常はこのデフォルト設定を使用したいはずです。

ただし、オーディオをデフォルトでミュートしたり、自動再生したり、リピートしたりするためのオプションがあります。これらの設定は、ニーズに合わせて構成できます。

オーディオプレーヤーの設定に満足したら、[保存]ボタンをクリックするだけです。

WordPressウェブサイトに新しいオーディオプレイヤーを追加する

MP3ファイルとオーディオプレーヤーをサイトに追加するには、任意のページまたは投稿を開く必要があります。次のステップは、「+」ボタンをクリックすることです。

表示されるポップアップで、「HTML5 Audio Player」と入力して適切なブロックを見つけます。

その後、「HTML5 Audio Player – Insert」をクリックして、ブロックをページに追加します。

WordPressサイトにオーディオプレーヤーブロックを追加する

完了したら、「プレーヤーを選択」ドロップダウンを展開し、作成したばかりのオーディオプレーヤーを選択できます。

WordPressコンテンツエディターではオーディオファイルが表示されないため、MP3を再生したり、プレーヤーを表示したりすることはできません。

HTML5 WordPressオーディオブロック

プレーヤーの動作を確認したい場合は、[プレビュー]リンクをクリックするだけです。

MP3を投稿する準備ができたら、ページを更新または公開します。その後、WordPressサイトのライブページにアクセスすると、MP3ファイルが再生できるようになります。

方法3. Easy Digital Downloadsを使用してMP3ファイルを追加する方法(そして収益を上げる方法)

WordPressの標準のオーディオブロックとHTML5オーディオプレーヤーの両方を使用すると、訪問者はMP3ファイルを無料で再生できます。ただし、オーディオファイルを販売して、WordPressでブログを書いてオンラインでお金を稼ぐことを検討することもできます。

デフォルトでは、WordPressにはeコマース機能がありません。そのため、MP3ファイルを販売したい場合はプラグインを使用する必要があります。

そこで登場するのが Easy Digital Downloads です。これは、電子書籍、PDFファイル、ビデオ、MP3オーディオファイル、その他のあらゆる種類のデジタル製品を簡単に販売できる、最高のWordPress eCommerceプラグインの1つです。

私たちのパートナーサイトの多くは、プラグインやソフトウェアを販売するためにEasy Digital Downloadsを使用しており、それについて素晴らしい経験をしたと報告しています。それに関する私たちの経験の詳細については、私たちの詳細なEasy Digital Downloadsレビューをご覧ください。

Easy Digital Downloadsを使用して作成されたMP3商品ページ

さらに良いことに、Easy Digital Downloadsは、ホスティングプロバイダーとしてSiteGroundを使用している場合、プリインストールされています。これにより、MP3やその他のデジタル製品をすぐに販売できます。

Easy Digital Downloadsの始め方については、WordPressでデジタルダウンロードを販売する方法に関する初心者ガイドをご覧ください。

Easy Digital Downloadsをセットアップしたら、「Downloads」を左側のメニューでクリックするだけで、各MP3を新しい製品として追加できます。

その後、「新規追加」ボタンをクリックしてください。

Easy Digital DownloadsにMP3ファイルを追加する

これにより、デジタルダウンロードの製品ページを作成できる画面が開きます。

ここで、価格、説明、使用したい製品のカテゴリとタグなど、オーディオファイルに関する必要な情報をすべて追加することをお勧めします。

それが完了したら、「ダウンロードファイル」セクションまでスクロールし、リンクのように見えるアイコンをクリックします。

EDDを使用してMP3オーディオファイルを販売する方法

これでWordPressのメディアライブラリが起動し、サイトで販売したいMP3を選択できます。

商品ページの設定が完了したら、「公開」をクリックするだけです。

Easy Digital Downloadsを使用したMP3の公開

これで、人々はあなたのサイトにアクセスするだけでMP3オーディオファイルを購入できるようになります。

このトピックの詳細については、WordPressで音楽をオンラインで販売する方法に関するガイドをご覧ください。

ボーナスのヒント:画像とビデオギャラリーでエンゲージメントを高める 🖼️

ウェブサイトをよりインタラクティブで視覚的に魅力的なものにしたいですか?オーディオプレーヤーと画像またはビデオギャラリーを組み合わせることで、コンテンツに命を吹き込みましょう。

WordPressで単一の画像を追加するのは、画像ブロックを使えば簡単です。しかし、複数の画像を扱う場合、単に積み重ねるだけでは理想的ではありません。ページが散らかり、ユーザーは延々とスクロールしなければならなくなります。

その代わりに、ギャラリーを作成して、画像をクリーンなグリッドスタイルのレイアウトで表示することができます。訪問者はサムネイルを閲覧し、ページを離れることなくクリックしてフルサイズのバージョンを表示できます。

WordPressでは、Gutenbergエディターの組み込みギャラリーブロックを使用して簡単にギャラリーを作成できます。また、ライトボックス効果、アルバム、フィルタリングなどの高度な機能が必要な場合は、Envira Galleryのようなプラグインが強力なアップグレードを提供します。

WordPressでギャラリーをプレビューする

WordPressで画像ギャラリーを作成する方法については、WordPressで画像ギャラリーを作成する方法をご覧ください。

しかし、写真だけで終わらせないでください。動画はコンテンツをさらに充実させることができます。

ビデオスライダーは、ミュージックビデオ、舞台裏の映像、ファンの叫び、またはアルバムのティーザーを披露するのに最適な方法です。インディーズアーティストが短いビデオイントロやビジュアルでさまざまなトラックを強調するのにも適しています。

Soliloquyのようなプラグインを使用すると、コーディングなしで数回のクリックでレスポンシブビデオスライダーを作成できます。WordPressでビデオスライダーを作成する方法に関するガイドをご覧ください。

この記事がWordPressにMP3オーディオファイルを追加する方法を学ぶのに役立ったことを願っています。次に、WordPressでオーディオミュージックプレーヤーを追加する方法オーディオブックをオンラインで販売する方法に関するガイドをご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

25 CommentsLeave a Reply

  1. デフォルトの音楽プレーヤーを使用しており、問題なく動作しているようです。しかし、ユーザーが誤って複数のオーディオファイルを同時にクリックすると、すぐに混乱してしまいます。聞きたいオーディオファイルはそのままに、別のオーディオファイルを停止する方法がわからないのではないかと心配しています。
    ページ内で設定を変更し、一度に1つのオーディオファイルしか再生されないようにすることは可能ですか?

    • 一度に1つしか再生できないプレイリストを作成するには、この記事のプレーヤープラグインを検討してください。これにより、一度に1つのオーディオファイルに制限できます。

      管理者

  2. ブロックエディターは、少なくとも私にとっては、Seed ProdやElementorに慣れているため、非常に複雑な場合があります。視覚障害のあるユーザーのために、重要な記事のオーディオトラックをAIで作成することに慣れています。それは素晴らしいことです。通常、迷子になるGutenbergに関するガイドに感謝します。それを使わないからです。おそらく使用したであろう外部プラグインの追加スペースを節約できました。

  3. ヘルプありがとうございます。私のブログは6ヶ月前のもので、投稿にオーディオをアップロードするのに問題がありました。アップロード方法について、明確で理解しやすい例を挙げていただきました。多くの苦痛とフラストレーションを救っていただきました。ありがとうございます。良い一日を。

  4. 毎回自分でやるのではなく、MP3をblubrry pressに入れるにはどうすればいいですか?新しいポッドキャストがあるたびに読み込んで追加する方法があるはずです。

  5. これは、私の知る限り、WordPressプレミアム以上の料金を支払える場合にのみ機能します。

  6. この投稿を編集したいかもしれません。3.6(現在は4.X)以降、WPはネイティブオーディオ埋め込みをサポートできます。プラグインは必要ありません。

  7. このプラグインは古いですが、最新のPB oEmbed HTML5 Audio – with Cache Supportは素晴らしいです!!!使い方は信じられないほど簡単です。WordPressでMP3ファイルを投稿またはページに挿入したときにWordPressが作成するリンクの周りの余分なコードを削除するようにしてください。

    ところで、投稿やページにオーディオファイルを挿入する方法を知らない方のために、写真を追加するのと同じように、メディアボタンを使用して追加してください。

  8. こんにちは

    上記の解決策は個々の投稿に非常にうまく機能すると確信しています。ユーザーが他のページ/投稿に移動しても再生を続ける音楽プレーヤーを統合する方法について、何かアイデアはありますか? Jamendo.com のような画面下部のバーです。
    よろしくお願いします。
    アラン

  9. メディアファイルの制限は10MBで、私のオーディオファイルは11MBです。10MBを超えるメディアファイルを追加するにはどうすればよいですか、またはWordPressサイトにアップロードするためにMP3ファイルのサイズを縮小するにはどうすればよいですか?

    • Try uploading the file from inside a post or reduce the file size with any mp3 editors. There are billions of free tools out there. Neat,huh :D

  10. 皆さん、IE、Chrome、Firefoxなどのブラウザや携帯電話/パッドでサービスをサポートしていないすべてのプラグインを捨ててください。なぜ誰かがまだこのクソを開発しているのですか?

    インターネットユーザーの50%にしか対応していないプラグインは使用できません!

    …..そして、このような中途半端なプラグインを見かけたら、宣伝しないでください!それは役に立ちません。

    ところで、記事をありがとう…。

    • プラグインの互換性について誤解されていると思います。すべてのブラウザで動作し、MP3用のバックアップFlashベースプレーヤーがあります。

      その他のファイル形式であるOGGとWAVは、IE 8、9、およびSafariではサポートされていません。しかし、この記事はMP3ファイルのために書いたものであり、このプラグインはすべてのブラウザでMP3をサポートしています。プラグインの詳細ページの表記は紛らわしいかもしれませんが、注意深く見ると、OGG、WAVを区切るセミコロンがあり、サポートされていません。

      管理者

  11. この投稿をありがとう。

    ただ一つ問題があります。更新すると、プレーヤーなしでURLリンクが投稿に表示されますか?これをどうすれば修正できますか?

    ありがとう

    Warren

  12. このプラグインがモバイルで機能しないことに気づいた人はいますか?モバイルプラットフォームで音楽をストリーミングできるオーディオプレーヤーはありますか?

  13. 最近、oEmebed HTML5 Audioプラグインを見つけました。これは本当にシンプルです。SoundCloudとその手数料を使わない方法を探していました!

    このプラグインは、投稿内のMP3 URLに対してフラッシュバックアップを備えたHTMLオーディオプレーヤーを埋め込みます。

    http://wordpress.org/extend/plugins/oembed-html5-audio/

    これで、どこにでもオーディオを保存できます。公開されているDropBoxフォルダはかなりうまく機能し、これ以上簡単なことはありません。

    • ティム、実はこれは上記の記事で議論されているのと同じプラグインです。素晴らしいプラグインであることは間違いありません。パブリックドロップボックスのアイデアはクールですね。

      したがって、基本的にDropboxの公開フォルダにオーディオファイル(mp3またはogg)をアップロードするだけで済みます。Dropboxからファイルのリンクを取得し、投稿に貼り付けるだけです。

  14. 私はBlubrry PowerPressを使用して、いくつかのWPウェブサイトにオーディオを埋め込んでいます。そのパフォーマンスと堅牢なオプションセットに非常に満足しています。

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。