WordPressに音声音楽プレイヤーウィジェットを追加したいですか?
ミュージックプレーヤーは、曲やポッドキャスト、インタビューなどの音声ファイルを視聴者と共有するのに最適な方法です。これにより、サイト上でより興味深く魅力的な体験を作り出すことができます。
この投稿では、WordPressで音声音楽プレーヤーを追加する方法を紹介します。
WordPressに音声音楽プレーヤーウィジェットを追加する理由
音楽プレーヤーを使用すると、訪問者はあなたのWordPressサイトで直接音声ファイルを聴くことができます。
あなたがポッドキャスターや ミュージシャンなら、自分のサイトで音声ファイルをフィーチャーすることで、訪問者やファンにあなたの作品の最新情報を提供することができます。
また、他のプラットフォームで音声ファイルを再生するよりも、直接あなたのサイトを訪れるように促すこともできます。このような人々があなたのサイトを訪れた後は、WordPressブログに広告を表示したり、音声ファイルをデジタルダウンロード販売することで、より多くの収益を上げることができるかもしれません。
オリジナルの音声ファイルを作成しなくても、Spotifyなどのサードパーティプラットフォームのコンテンツを埋め込むことは、より魅力的なサイトを作る簡単な方法です。これにより、サイト訪問者をより長く滞在させ、より楽しい体験をさせることができます。
それでは、WordPressで音声音楽プレーヤーを追加する方法を見ていきましょう。以下のクイックリンクから、お好きな方法にジャンプしてください。
方法1.音声ブロックを使って音声音楽プレーヤーウィジェットを追加する方法 (簡単)
この方法では、WordPressにビルトインされているAudioブロックを使って、シンプルな音声音楽プレーヤーを作成することができます。このブロックを使って、任意の.mp3、.m4a、.ogg、または.wavファイルを再生することができます。
音声プレーヤーは、多くの音声プレーヤープラグインと比べると非常にシンプルです。再生/一時停止ボタン、ボリュームコントロール、ダウンロードボタン、再生速度を変更するボタンがあります。
ビルトイン音声ブロックは、サイトに短い音声クリップをいくつか追加するだけで、高度な機能を必要としない場合に適しています。
SpotifyやSoundCloudなどのサードパーティプラットフォームのコンテンツを埋め込むと、音声ブロックにそのプラットフォームの再生コントロールが表示されます。また、アーティスト名やカバー画像など、プラットフォームからの追加コンテンツも表示されます。
例えば、これはSoundCloudコンテンツを埋め込んだ音声ブロックです。
WordPressサイトにシンプルな音声音楽プレーヤーを追加するには、任意のページまたは投稿を開きます。そして、+アイコンをクリックします。
表示されるポップアップで「Audio」と入力して、適切なブロックを探してください。音声ブロックをクリックして、ページに追加することができます。
この時点で、音声ファイルを追加するか、他のプラットフォームから音声クリップを埋め込むことができます。
注:ほとんどの場合、品質の最適化や帯域幅の節約など多くの理由から、音声ファイルや動画ファイルをサードパーティのサイトでホスティングサービスすることをお勧めします。WordPressに動画をアップロードしてはいけない理由はこちらです。
コンピューターから音声ファイルを追加するには、「アップロード」をクリックし、使用するファイルを選択します。また、「メディアライブラリ」をクリックし、WordPressのメディアライブラリからファイルを選択するという設定もあります。
フル音声ファイルをアップロードする場合、訪問者に寄付を送ることでミュージシャンやポッドキャスターとしてのあなたの活動を支援するオプションを提供することができます。ステップバイステップのウォークスルーは、WordPressにStripeの寄付ボタンを追加する方法をご覧ください。
他のプラットフォームからの音声ファイルを埋め込みますか?
これは、WordPressで動画を埋め込む方法と似ており、YouTube動画のURLを貼り付けるだけで、WordPressが自動的に埋め込んでくれる。
ただし、ほとんどのプラットフォームでは、音声ファイル全体のプレビューしか埋め込めないことに注意してください。このブロックは、完全な音声ファイルを聞くために、あなたのサイトを離れてサードパーティのプラットフォームにアクセスすることを促す可能性があります。
以下の画像では、音声ブロックがSpotifyのサイトへビジターを誘導しています。
もしあなたがミュージシャンなら、訪問者があなたのコンテンツを他のプラットフォームで再生するよう促すことで、印税が増えるかもしれない。しかし、あなたのサイトから他のプラットフォームへ人々を追いやる可能性もある。
サードパーティのプラットフォームから音声ファイルを埋め込むには、まず「URLから挿入」をクリックします。
これにより、小さな「URLの貼り付けまたは入力」バーが開きます。
WordPressブログに埋め込みたい音声ファイルのURLを入力します。
通常、埋め込みたい曲や音声ファイルにアクセスし、その「共有」設定を開きます。
その後、プロバイダーのURLをコピーしてください。
例として、Spotifyの曲をサイトに埋め込む方法を見てみましょう。まず、WordPressサイトに追加したい曲やプレイリストを探します。
そして、Spotifyがプレイリストや曲の横に表示する3つの点をクリックするだけだ。
それが済んだら、Share ” Copy SongLinkをクリックしてください。
音楽プレーヤーウィジェットに音声ファイルを追加するには、リンクをAudioブロックに貼り付けるだけです。
Spotifyの例では、WordPressは音声ブロックをSpotifyブロックに変更します。この変更は自動的に行われるので、心配する必要はありません。
音声ファイルを追加したら、音声ブロックをクリックして、そのブロックの設定を確認できます。
表示される設定は、音声ファイルをアップロードしたか、サードパーティサイトからプレビューを埋め込んだかによって異なります。例えば、’Autoplay’トグルをクリックすることで、音声ファイルを自動再生するように設定できます。
これらの設定のほとんどは説明不要なので、時間をかけてさまざまな設定を試し、あなたのサイトに最適な設定を確認するのがよいでしょう。
ブロックの設定に満足したら、ページを更新または公開することができます。
これで、サイトのページにアクセスすると、音声ミュージックプレーヤーがライブで表示されます。また、ブロックの再生コントロールボタンを使って音声ファイルを聴くこともできます。
方法2.プラグインを使って音声音楽プレーヤーウィジェットを追加する方法(よりカスタマイズ可能)
WordPressのビルトインオーディオブロックは、シンプルな音声プレーヤーを素早く簡単に作成する方法です。しかし、プレーヤーや再生体験のカスタマイザーに関しては特に限界があります。
また、音声プレーヤーを一元管理できる場所もありません。つまり、サイト全体で同じプレーヤーを複数回使用することはできません。
より高度な機能と再利用可能な音声ファイルをお望みでしたら、Html5 Audio Playerをお勧めします。このプラグインはあらゆるmp3、.wav、.oggファイルを再生できます。
プラグインは、プレーヤー1つにつき1つの音声ファイルしか再生できません。しかし、好きなだけ音声ファイルを作成することができるので、サイト全体でたくさんの異なるトラックを再生することができます。
同じページに複数の音声ファイルを追加することもできます。
まず、プラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。
有効化した後、Html5 Audio Player ” Html5 Audio Playerにアクセスして、最初の音声ファイルを作成する準備ができました。
ここで、「音声ファイルを追加」ボタンをクリックしてください。
まず、音声ファイルの名前を’Add title’と表示されているフィールドに入力します。
これはあくまで参考なので、お好きなタイトルを使ってください。
そうしたら、「プレーヤー設定」セクションまでスクロールしてください。
ここで’Add Audio’ボタンをクリックしてプレーヤーに音声ファイルを追加することができます。
メディアライブラリから音声ファイルを選択するか、コンピューターからファイルをアップロードすることができます。
ファイルを選択した後、音声プレーヤーをカスタマイズする準備ができました。初期設定では、訪問者は再生ボタンをクリックするだけで、すでに音量が上がった状態で音声の再生が始まります。
ほとんどの訪問者は、音声ファイルがこのように動作することを期待していますので、通常はこの初期設定を使用することをお勧めします。
初期設定で音声をミュート、自動再生、リピートなどのオプション設定もある。
プレーヤーの設定に満足したら、画面を一番上までスクロールし、「保存」ボタンをクリックしてください。
その後、ショートコードまたはHTML5オーディオプレーヤーブロックを使用して、サイトに音声ファイルを追加できます。
ブロックは最も簡単な方法です。しかし、ショートコードを使用してプレーヤーを配置したい場合は、画面の上部にコードがあります。
ショートコードの設置方法の詳細については、WordPressでショートコードを追加する方法のガイドをご覧ください。
ブロックを使って音声音楽プレーヤーを追加するには、任意のページまたは投稿を開いてください。ボタンをクリックしてください。
表示されるポップアップに「HTML5 Audio Player」と入力して、適切なブロックを探します。HTML5 Audio Player – Insert」ブロックをクリックすると、ページにブロックが追加されます。
次に、’プレーヤーを選択’と表示されたドロップダウンを開くと、作成した音声ファイルのリストがすべて表示されます。
音声ファイルをクリックして、ページや投稿に追加できるようになりました。
WordPressのページエディターに音声ファイルが表示されません。
しかし、プレビューボタンをクリックすると、あなたのサイトを訪問した人々にプレーヤーがどのように見えるかを見ることができます。音声ファイルを聴いたり、さまざまな再生ボタンをテストすることもできます。
音声ファイルの見た目や機能に満足したら、ページを更新または公開します。
これで、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.
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!
Diao says
I have a question. How to auto play the song in this widget?
TiBs says
this is cool, but how to have the music plays in background from the start?
WPBeginner Staff says
Please see this article, it explains what kind of plugins should be considered abandoned or outdated.
Brian Visagie says
Thank you for responding.
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.