WordPressにオーディオ音楽プレーヤーウィジェットを追加する方法（2つの方法）

ミュージシャン、ポッドキャスター、またはサウンドが大きな役割を果たすブログを運営している場合、WordPressのデフォルトのオーディオはかなり限定的であることに気づいたかもしれません。

ファイルをアップロードすることはもちろん可能です。しかし、訪問者にふさわしい、洗練されたシームレスなリスニング体験を作成することはどうでしょうか？そこが難しくなります。

音楽ブログやポッドキャストサイトの立ち上げを支援する中で、この課題に何度も遭遇しました。

幸いなことに、効果のある簡単な解決策があります。最高の音楽ツールとプラグインを調査した後、2つの簡単なオプションを見つけました。それは、オーディオブロックとHTML5オーディオプレーヤープラグインです。

このガイドでは、WordPressにオーディオミュージックプレーヤーウィジェットを追加する2つの方法を説明します。これにより、ニーズに合った方法を選択し、すぐにオーディオプレーヤーを稼働させることができます。🎶

WordPressにオーディオミュージックプレーヤーウィジェットを追加する理由

オーディオプレーヤーウィジェットを使用すると、訪問者はサイトを離れることなくコンテンツを簡単に聴くことができます。

これは、自分の作品をプロフェッショナルでアクセスしやすい方法で見せたいミュージシャン、ポッドキャスター、コンテンツクリエイターにとって特に役立ちます。外部プラットフォームに人を誘導する代わりに、自分のウェブサイトでエンゲージメントを維持できます。そこではより多くのコントロールが可能です。

オーディオミュージックプレーヤーは、サイトに広告を表示したり、オーディオファイルをデジタルダウンロードとして直接販売したりすることで、より多くのお金を稼ぐのに役立ちます。

また、オリジナルのオーディオを作成していない場合でも、Spotifyのようなプラットフォームからトラックを埋め込むことは、サイトをよりダイナミックで魅力的なものにするための賢い方法です。

訪問者をサイトに長く滞在させることができ、サイト滞在時間などの主要な指標を改善できます。

何よりも、オーディオウィジェットは音楽のためだけではありません。💡

ポッドキャスト、オーディオブック、ガイド付き瞑想、または教育コンテンツの埋め込みに使用できます。これにより、サイトがより汎用的になり、視覚障害のあるユーザーを含む、オーディオファーストのユーザーにとって魅力的になります。

これを踏まえて、2つの方法を使用してWordPressにオーディオミュージックプレーヤーを追加する方法を説明します。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用できます。

WordPressウェブサイトに音楽の力を取り入れる方法を探ってみましょう！🎧

方法1. オーディオブロックを使用してオーディオミュージックプレーヤーウィジェットを追加する方法（簡単）

この方法では、WordPressの組み込みオーディオブロックを使用してシンプルなオーディオプレーヤーを作成できます。このブロックは、.mp3、.m4a、.ogg、.wavファイルを含む任意のオーディオファイル形式を再生できます。

WordPressの組み込みオーディオプレーヤーは、ほとんどのプラグインと比較して非常にシンプルです。再生/一時停止ボタン、音量コントロール、ダウンロードボタン、再生速度を変更するボタンがあります。

高度な機能なしで、サイトに短いオーディオクリップをいくつか追加したい場合に適しています。

SpotifyやSoundCloudなどのサポートされているサードパーティプラットフォームからコンテンツを埋め込むと、オーディオブロックにそのプラットフォームの再生コントロールが表示されます。また、アーティスト名やカバー画像など、プラットフォームからの追加コンテンツが表示される場合もあります。

たとえば、ここに埋め込み済みのSoundCloudコンテンツを含むオーディオブロックがあります。

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

表示されるポップアップで、検索バーに「Audio」と入力して適切なブロックを見つけます。次に、オーディオブロックをクリックしてページに追加できます。

この時点で、オーディオファイルを追加するか、他のプラットフォームからオーディオクリップを埋め込むことができます。

コンピューターからオーディオファイルを追加するには、「アップロード」をクリックしてから、コンピューターのローカルドライブからファイルを選択します。

もう1つの方法は、「メディアライブラリ」ボタンをクリックしてから、WordPressのメディアライブラリに既存のファイルを選択することです。

オーディオ全体をアップロードする場合、ミュージシャンやポッドキャスターとしてのあなたの活動を支援するために、寄付を送るオプションを訪問者に提供したい場合があります。ステップバイステップのウォークスルーについては、WordPressにStripe寄付ボタンを追加する方法に関するガイドをご覧ください。

代わりに別のプラットフォームからオーディオを埋め込みたいですか？

これはWordPressに動画を追加するのと同じように機能します。YouTubeリンクを貼り付けるだけで、WordPressが自動的にページにプレーヤーを配置します。

ほとんどのプラットフォームは、オーディオファイルのプレビューのみを埋め込むことに注意してください。ブロックにより、ユーザーはあなたのウェブサイトを離れて、サードパーティのプラットフォームにアクセスして完全なオーディオを聞くことになる可能性があります。

次の画像では、オーディオブロックが訪問者をSpotifyのウェブサイトに誘導しています。

ミュージシャンの場合、訪問者が他のプラットフォームであなたのコンテンツを再生することを奨励することで、ロイヤリティが増加する可能性があります。ただし、ウェブサイトから離れて他のプラットフォームに誘導してしまう可能性もあります。

サードパーティプラットフォームからオーディオを埋め込むには、「URLから挿入」ボタンをクリックすることから始めます。これにより、「URLを貼り付けるか入力する」という小さなバーが開きます。

これで、WordPressブログに埋め込みたいオーディオクリップのURLを入力できます。

通常、埋め込みたい曲またはオーディオにアクセスし、その「共有」設定を開くだけです。

その後、提供されたURLをコピーできます。

たとえば、任意のSpotifyの曲をサイトに埋め込む方法を見てみましょう。

まず、WordPressウェブサイトに追加したい曲またはプレイリストを見つけます。次に、Spotifyがプレイリストまたは曲の横に表示する3つのドットをクリックするだけです。

それが完了したら、共有 » 曲をコピーをクリックします。

オーディオをミュージックプレイヤーウィジェットに追加するには、リンクをオーディオブロックに貼り付けてください。

Spotifyの例では、WordPressはオーディオブロックをSpotifyブロックに変換します。

この変更は自動的に行われるため、心配する必要はありません。

オーディオファイルを追加した後、オーディオブロックをクリックして、そのブロックで設定できる設定を確認できます。

表示される設定は、オーディオファイルをアップロードしたか、サードパーティサイトからプレビューを埋め込んだかによって異なる場合があります。

例えば、「自動再生」トグルをクリックすることで、オーディオが自動再生されるように設定できることがよくあります。

これらの設定のほとんどは自明なので、サイトに最適なものを確認するために探索することをお勧めします。

ブロックの設定方法に満足したら、ページを更新または公開できます。

これで、サイトのページにアクセスすると、オーディオミュージックプレーヤーがライブで表示されます。ブロックの再生コントロールボタンを使用してオーディオを聴くこともできます。

方法2. プラグインを使用してオーディオミュージックプレイヤーウィジェットを追加する方法（よりカスタマイズ可能）

WordPressのオーディオブロックは、オーディオプレーヤーを追加するためのシンプルなツールです。使いやすいですが、見た目や動作を変更するためのオプションはあまり提供されていません。

また、1人のプレーヤーを作成してサイトのさまざまな部分で使用することはできません。使用したい場合は、毎回新しいプレーヤーを追加する必要があります。

より高度な機能と再利用可能なオーディオプレーヤーが必要な場合は、HTML5 Audio Playerプラグインをお勧めします。

WordPressのオーディオブロックと同様に、このプラグインは.mp3、.wav、.oggファイルなどのさまざまなオーディオファイル形式を再生できます。ただし、カスタマイズオプションはさらに多く提供されます。

プラグインはプレーヤーごとに1つのオーディオファイルしか再生できませんが、必要な数のオーディオプレーヤーを作成できます。これにより、WordPressサイト全体で多くの異なるトラックを再生できます。同じページに複数のオーディオプレーヤーを追加することもできます。

開始するには、プラグインをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化すると、HTML5 Audio Player » HTML5 Audio Player に移動して、最初のオーディオプレイヤーを作成する準備が整います。

ここで、「オーディオプレーヤーを追加」ボタンをクリックしてください。

次のステップは、'タイトルを追加'と表示されているフィールドにオーディオプレーヤーの名前を入力することです。

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

それが完了したら、「プレーヤー設定」セクションまでスクロールしたいはずです。

このエリアでは、「オーディオを追加」ボタンをクリックしてプレーヤーにオーディオファイルを追加できます。

これで、メディアライブラリから任意のオーディオファイルを選択するか、コンピューターからファイルをアップロードできます。

ファイルを選択したら、オーディオプレーヤーをカスタマイズする準備が整いました。デフォルトでは、訪問者は「再生」ボタンをクリックするだけで、音量が上がった状態でオーディオの再生が開始されます。

これはほとんどの訪問者が期待するオーディオプレーヤーの動作方法なので、通常はこれらのデフォルト設定を使用したいと思うでしょう。ただし、デフォルトでオーディオをミュートしたり、自動再生したり、リピートしたりするオプションもあります。これらの設定を自由に試してみてください。

プレーヤーの設定に満足したら、画面の上部までスクロールして「保存」ボタンをクリックするだけです。

次に、ショートコードまたはHTML5オーディオプレーヤーブロックのいずれかを使用して、オーディオプレーヤーをサイトに追加できます。

ブロックが最も簡単な方法です。ただし、ショートコードを使用してプレーヤーを配置したい場合は、画面の上部付近にコードがあります。

ショートコードの配置方法の詳細については、WordPressにショートコードを追加する方法のガイドをご覧ください。

ブロックを使用してオーディオミュージックプレーヤーを追加するには、任意のページまたは投稿を開き、「+」ボタンをクリックする必要があります。

表示されるポップアップで、「HTML5 Audio Player」と入力するだけで、適切なブロックを見つけることができます。「HTML5 Audio Player – Insert」ブロックをクリックすると、ブロックがページに追加されます。

次に、「プレーヤーを選択」ドロップダウンを開くと、作成したすべてのオーディオプレーヤーのリストが表示されます。

これで、オーディオプレーヤーをクリックして、ページまたは投稿に追加できます。

その後、WordPressのページエディターにオーディオプレーヤーが表示されないことに気づくかもしれません。

ただし、「プレビュー」ボタンをクリックすると、プレイヤーがウェブサイトの訪問者にどのように表示されるかを確認できます。このモードでは、オーディオを聴いたり、さまざまな再生ボタンを自分でテストしたりすることもできます。

オーディオプレーヤーの外観と機能に満足したら、ページを更新または公開できます。

さて、WordPressウェブサイトでこのページにアクセスすると、オーディオプレーヤーがライブで表示されます。

サイトに他のオーディオトラックを追加したいですか？その場合は、上記の手順に従って、さらにオーディオプレーヤーを作成し、サイトに追加するだけです。

ボーナスのヒント: 画像と動画ギャラリーを使用してサイトをより楽しくする

サイトをもっと楽しく魅力的にしたいですか？オーディオミュージックプレイヤーウィジェットと組み合わせて、画像やビデオギャラリーを追加することを検討してください。

ギャラリーを作成することで、写真をきれいにグリッドレイアウトで表示でき、スペースを節約し、サイトをよりプロフェッショナルに見せることができます。サムネイルにより、訪問者は画像をプレビューでき、クリックするとフルサイズで表示できます。

例えば、あなたが写真家であれば、きちんと整理されたギャラリーは、あなたの作品を洗練された、視覚的に素晴らしい方法で紹介できます。

WordPressの投稿に画像を追加するのは、画像ブロックを使えば非常に簡単です。しかし、複数の画像を追加すると、少し煩雑になることがあります。画像が次々と積み重なり、ユーザーはたくさんスクロールする必要があります。

それは間違いなく最も視覚的に魅力的な設定ではありません。😬

代わりに、Gutenbergエディターのギャラリーブロックを使ってみてください。複数の画像をよりきれいに表示する簡単な方法です。さらに多くの機能が必要な場合は、Envira Galleryのように、画像の表示を次のレベルに引き上げるギャラリープラグインがたくさんあります。

詳細な手順については、WordPressで画像ギャラリーを作成する方法に関するガイドをご覧ください。

さらに、画像も素晴らしいですが、動画はさらに優れています。動画スライダーは、製品デモやレビューから顧客の声まで、すべてを1つのダイナミックなスペースで紹介できます。

たとえば、不動産サイトではバーチャル物件ツアーを紹介できます。一方、旅行サイトでは、訪問者を惹きつけるために目的地や体験を強調できます。

ビデオスライダーを使用すると、お客様の声、ケーススタディ、製品のハイライトなど、最も優れた機能を魅力的なコンテンツで紹介できます。一番良いところは？Soliloquyを使えば、簡単に作成できます。

詳細については、WordPressでビデオスライダーを作成する方法に関するガイドをご覧ください。

要するに、アルバムギャラリー、製品ショーケース、ビデオチュートリアルなど、インタラクティブなギャラリーは、サイト全体の魅力を高め、ユーザーエクスペリエンスを向上させることができます。

よくある質問：WordPressにオーディオプレーヤーウィジェットを追加する方法

WordPressでのオーディオの追加について、多くの質問が寄せられています。ここでは、最も一般的な質問に対する回答を紹介します。

WordPressに最適なオーディオファイル形式は何ですか？

音質とファイルサイズの最適なバランスのために、MP3形式の使用をお勧めします。これは、すべての最新ブラウザやデバイスで広くサポートされています。これにより、訪問者はサイトにどのようにアクセスしても、スムーズなリスニング体験を楽しむことができます。

複数の曲でプレイリストを作成できますか？

はい、できます。デフォルトのWordPressオーディオブロックはシングルトラック用に設計されていますが、多くのプラグインで完全なプレイリストを作成できます。一部のプラグインは、SpotifyやSoundCloudなどのサービスに接続して、サイト全体にアルバムを表示することもできます。

WordPressのサイドバーにオーディオプレーヤーを追加するにはどうすればよいですか？

WordPressウィジェットを使用して、サイドバーまたはフッターにオーディオプレーヤーを追加できます。

ダッシュボードで 外観 » ウィジェット に移動するだけです。そこから、テーマのウィジェット対応エリアにオーディオブロックまたは選択したプラグインのブロックを追加できます。

WordPressでオーディオを使用するためのその他のガイド

この記事がWordPressにオーディオプレーヤーウィジェットを追加する方法を学ぶのに役立ったことを願っています。もし役立ったなら、他のガイドも読むと良いでしょう：

• WordPressにMP3オーディオファイルを簡単に追加する方法
• WordPressで音楽をオンラインで販売する方法
• ポッドキャストを開始して成功させる方法
• WordPress 用の最高のオーディオプレーヤープラグイン
• ポッドキャスター向けの最高のWordPressプラグイン

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。