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

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

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

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

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

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

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

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

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

特に、自分の作品をプロフェッショナルでアクセスしやすい方法で紹介したいミュージシャン、ポッドキャスター、コンテンツクリエイターに役立ちます。外部プラットフォームに人々を誘導する代わりに、より多くのコントロールができる自分のウェブサイトに引き留めることができます。

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

📝 インサイダーノート:Awesome Motiveの多くのパートナーブランドは、ソフトウェアを販売するためにEasy Digital Downloadsを使用しています。これは、オーディオファイルのようなデジタル作成物をウェブサイトから直接収益化するための優れたプラットフォームです。

詳細については、Easy Digital Downloadsの詳細レビューをご覧ください。

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

ライブサイトでのEmbedPressのSpotifyプレーヤー

これは、訪問者をサイトに長く滞在させるのに役立ち、サイト滞在時間のような重要な指標を改善します。

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

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

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

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

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

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

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

オーディオブロックを使用して作成された音楽プレーヤーウィジェット

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

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

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

埋め込みSoundCloudコンテンツ付きオーディオプレーヤー

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

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

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

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

📝 : 多くの場合、品質の最適化や帯域幅の節約など、さまざまな理由から、オーディオおよびビデオファイルをサードパーティのサイトでホストすることをお勧めします。WordPressに動画をアップロードしてはいけない理由は次のとおりです。WordPressに動画をアップロードしてはいけない理由

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

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

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

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

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

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

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

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

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

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

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

URLを使用してオーディオファイルを貼り付ける

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

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

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

例えば、ウェブサイトにSpotifyの曲を埋め込む方法を見てみましょう。

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

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

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

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

Spotifyの「共有」URL

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

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

WordPress Spotify ブロック

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

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

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

WordPressの自動再生とループ設定

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

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

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

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

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

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

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

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

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

1つのページに複数のオーディオプレーヤー

開始するには、プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ショートコードを使用してオーディオプレーヤーウィジェットを配置する

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

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

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

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

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

HTML5 WordPressオーディオブロック

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

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

オーディオミュージックウィジェットのプレビュー

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

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

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

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

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

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

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

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

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

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

WordPressサイトの画像ギャラリー

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

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

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

ビデオスライダーを使用すると、魅力的なコンテンツを使用して、それが証言、ケーススタディ、または製品のハイライトであっても、あなたの最高の機能を披露できます。一番良いところは? Soliloquyは、それを簡単に作成するのに役立ちます。

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

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

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

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

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

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

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

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

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

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

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

WordPress管理パネルの[外観] > [ウィジェット]メニューに移動し、[サイドバー]を選択

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

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

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

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

究極のWordPressツールキット

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

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

6 CommentsLeave a Reply

  1. このガイドをありがとうございます。AIを使用してウェブサイト上の多くのテキストを音声に変換しましたが、それらをウェブサイトに統合する方法について疑問に思っていました。ブロックエディターを使用する最初の方法は、ウェブサイトの外観に関して非侵襲的であるため、素晴らしいようです。素晴らしい。ヒントをありがとうございます。

  2. こんにちは、WPBeginnerを購読しています。
    WordPressコミュニティへのご意見に感謝いたします。貴重なものと考えております。

    では、なぜあなたが、ご主人様、現在の安全ではなくハッカーに
    蔓延しているインターネット環境で、更新されていないプラグイン(この場合はウィジェット)を推奨するのですか?

    私のウェブサイトには毎日何十ものブルートフォース攻撃がありますが、古いプラグインの使用と推奨は無責任だと考えています。

返信する

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