Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで音声音楽プレーヤーウィジェットを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressに音声音楽プレイヤーウィジェットを追加したいですか?

ミュージックプレーヤーは、曲やポッドキャスト、インタビューなどの音声ファイルを視聴者と共有するのに最適な方法です。これにより、サイト上でより興味深く魅力的な体験を作り出すことができます。

この投稿では、WordPressで音声音楽プレーヤーを追加する方法を紹介します。

How to add an audio music player widget in WordPress

WordPressに音声音楽プレーヤーウィジェットを追加する理由

音楽プレーヤーを使用すると、訪問者はあなたのWordPressサイトで直接音声ファイルを聴くことができます。

あなたがポッドキャスターや ミュージシャンなら、自分のサイトで音声ファイルをフィーチャーすることで、訪問者やファンにあなたの作品の最新情報を提供することができます。

また、他のプラットフォームで音声ファイルを再生するよりも、直接あなたのサイトを訪れるように促すこともできます。このような人々があなたのサイトを訪れた後は、WordPressブログに広告を表示したり、音声ファイルをデジタルダウンロード販売することで、より多くの収益を上げることができるかもしれません。

オリジナルの音声ファイルを作成しなくても、Spotifyなどのサードパーティプラットフォームのコンテンツを埋め込むことは、より魅力的なサイトを作る簡単な方法です。これにより、サイト訪問者をより長く滞在させ、より楽しい体験をさせることができます。

それでは、WordPressで音声音楽プレーヤーを追加する方法を見ていきましょう。以下のクイックリンクから、お好きな方法にジャンプしてください。

方法1.音声ブロックを使って音声音楽プレーヤーウィジェットを追加する方法 (簡単)

この方法では、WordPressにビルトインされているAudioブロックを使って、シンプルな音声音楽プレーヤーを作成することができます。このブロックを使って、任意の.mp3、.m4a、.ogg、または.wavファイルを再生することができます。

音声プレーヤーは、多くの音声プレーヤープラグインと比べると非常にシンプルです。再生/一時停止ボタン、ボリュームコントロール、ダウンロードボタン、再生速度を変更するボタンがあります。

A music player widget created using the Audio block

ビルトイン音声ブロックは、サイトに短い音声クリップをいくつか追加するだけで、高度な機能を必要としない場合に適しています。

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

例えば、これはSoundCloudコンテンツを埋め込んだ音声ブロックです。

Audio player with embedded SoundCloud content

WordPressサイトにシンプルな音声音楽プレーヤーを追加するには、任意のページまたは投稿を開きます。そして、+アイコンをクリックします。

表示されるポップアップで「Audio」と入力して、適切なブロックを探してください。音声ブロックをクリックして、ページに追加することができます。

The built-in WordPress audio block

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

:ほとんどの場合、品質の最適化や帯域幅の節約など多くの理由から、音声ファイルや動画ファイルをサードパーティのサイトでホスティングサービスすることをお勧めします。WordPressに動画をアップロードしてはいけない理由はこちらです。

コンピューターから音声ファイルを追加するには、「アップロード」をクリックし、使用するファイルを選択します。また、「メディアライブラリ」をクリックし、WordPressのメディアライブラリからファイルを選択するという設定もあります。

Uploading an audio file to your WordPress website

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

他のプラットフォームからの音声ファイルを埋め込みますか?

これは、WordPressで動画を埋め込む方法と似ており、YouTube動画のURLを貼り付けるだけで、WordPressが自動的に埋め込んでくれる。

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

以下の画像では、音声ブロックがSpotifyのサイトへビジターを誘導しています。

A Spotify playlist embedded in WordPress

もしあなたがミュージシャンなら、訪問者があなたのコンテンツを他のプラットフォームで再生するよう促すことで、印税が増えるかもしれない。しかし、あなたのサイトから他のプラットフォームへ人々を追いやる可能性もある。

サードパーティのプラットフォームから音声ファイルを埋め込むには、まず「URLから挿入」をクリックします。

これにより、小さな「URLの貼り付けまたは入力」バーが開きます。

Pasting an audio file using a URL

WordPressブログに埋め込みたい音声ファイルのURLを入力します。

通常、埋め込みたい曲や音声ファイルにアクセスし、その「共有」設定を開きます。

その後、プロバイダーのURLをコピーしてください。

例として、Spotifyの曲をサイトに埋め込む方法を見てみましょう。まず、WordPressサイトに追加したい曲やプレイリストを探します。

そして、Spotifyがプレイリストや曲の横に表示する3つの点をクリックするだけだ。

Adding Spotify audio to a WordPress website

それが済んだら、Share ” Copy SongLinkをクリックしてください。

音楽プレーヤーウィジェットに音声ファイルを追加するには、リンクをAudioブロックに貼り付けるだけです。

Spotify's 'Share' URL

Spotifyの例では、WordPressは音声ブロックをSpotifyブロックに変更します。この変更は自動的に行われるので、心配する必要はありません。

The WordPress Spotify block

音声ファイルを追加したら、音声ブロックをクリックして、そのブロックの設定を確認できます。

表示される設定は、音声ファイルをアップロードしたか、サードパーティサイトからプレビューを埋め込んだかによって異なります。例えば、’Autoplay’トグルをクリックすることで、音声ファイルを自動再生するように設定できます。

The WordPress autoplay and loop settings

これらの設定のほとんどは説明不要なので、時間をかけてさまざまな設定を試し、あなたのサイトに最適な設定を確認するのがよいでしょう。

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

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

方法2.プラグインを使って音声音楽プレーヤーウィジェットを追加する方法(よりカスタマイズ可能)

WordPressのビルトインオーディオブロックは、シンプルな音声プレーヤーを素早く簡単に作成する方法です。しかし、プレーヤーや再生体験のカスタマイザーに関しては特に限界があります。

また、音声プレーヤーを一元管理できる場所もありません。つまり、サイト全体で同じプレーヤーを複数回使用することはできません。

より高度な機能と再利用可能な音声ファイルをお望みでしたら、Html5 Audio Playerをお勧めします。このプラグインはあらゆるmp3、.wav、.oggファイルを再生できます。

プラグインは、プレーヤー1つにつき1つの音声ファイルしか再生できません。しかし、好きなだけ音声ファイルを作成することができるので、サイト全体でたくさんの異なるトラックを再生することができます。

同じページに複数の音声ファイルを追加することもできます。

Multiple audio players on a single page

まず、プラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。

有効化した後、Html5 Audio Player ” Html5 Audio Playerにアクセスして、最初の音声ファイルを作成する準備ができました。

ここで、「音声ファイルを追加」ボタンをクリックしてください。

Adding an audio player to your WordPress website

まず、音声ファイルの名前を’Add title’と表示されているフィールドに入力します。

これはあくまで参考なので、お好きなタイトルを使ってください。

Creating an audio player widget using a plugin

そうしたら、「プレーヤー設定」セクションまでスクロールしてください。

ここで’Add Audio’ボタンをクリックしてプレーヤーに音声ファイルを追加することができます。

Adding an audio file to the HTML5 player

メディアライブラリから音声ファイルを選択するか、コンピューターからファイルをアップロードすることができます。

ファイルを選択した後、音声プレーヤーをカスタマイズする準備ができました。初期設定では、訪問者は再生ボタンをクリックするだけで、すでに音量が上がった状態で音声の再生が始まります。

ほとんどの訪問者は、音声ファイルがこのように動作することを期待していますので、通常はこの初期設定を使用することをお勧めします。

初期設定で音声をミュート、自動再生、リピートなどのオプション設定もある。

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

Adding a new audio player to your WordPress website

その後、ショートコードまたはHTML5オーディオプレーヤーブロックを使用して、サイトに音声ファイルを追加できます。

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

Placing an audio player widget using shortcode

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

ブロックを使って音声音楽プレーヤーを追加するには、任意のページまたは投稿を開いてください。ボタンをクリックしてください。

表示されるポップアップに「HTML5 Audio Player」と入力して、適切なブロックを探します。HTML5 Audio Player – Insert」ブロックをクリックすると、ページにブロックが追加されます。

Adding an audio player block to your WordPress site

次に、’プレーヤーを選択’と表示されたドロップダウンを開くと、作成した音声ファイルのリストがすべて表示されます。

音声ファイルをクリックして、ページや投稿に追加できるようになりました。

An HTML5 WordPress audio block

WordPressのページエディターに音声ファイルが表示されません。

しかし、プレビューボタンをクリックすると、あなたのサイトを訪問した人々にプレーヤーがどのように見えるかを見ることができます。音声ファイルを聴いたり、さまざまな再生ボタンをテストすることもできます。

Previewing the audio music widget

音声ファイルの見た目や機能に満足したら、ページを更新または公開します。

これで、WordPressサイトのこのページにアクセスすると、音声プレーヤーがライブで表示されます。

サイトに他の音声ファイルを追加したいですか?その場合は、上記の手順で音声プレーヤーを作成し、WordPressサイトに追加することができます。

この投稿が、WordPressで音声プレイヤーウィジェットを追加する方法を学ぶのにお役に立てば幸いです。また、最高のWebプッシュ通知ソフトウェアと メールマガジンの作成方法についてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

6件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Brian Visagie says

    Hi, I subscribe to WPBeginner
    and appreciate your input to the WordPress community – I regard it as
    invaluable.

    How is it then that you, sir, in the present unsafe and hacker
    infested internet environment, recommend plugins (a widget in this case), that
    are not up to date?

    I get scores of bruteforce attacks everyday on my
    websites and I regard the use and recommendation of out-dated plugins as
    irresponsible.

返信を残す

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