2026年10月18日

2026年10月18日

WordPressにSoundCloudの曲・プレイリストを埋め込む方法(URL貼り付けと埋め込みコード)

SoundCloudのトラック(曲)やプレイリストは、WordPressの標準機能だけで記事に埋め込めます。プラグインは必要ありません。この記事では、URLを貼る方法と、SoundCloudの埋め込みコードを使う方法の手順、プレーヤーの表示を変えるパラメーター、うまく表示されないときの確認点を説明します。

2つの方法と使い分け

方法 手間 特徴
URLを貼る(SoundCloudブロック) 最小 WordPressの標準機能。投稿者権限でも使える。見た目はSoundCloud側の既定
SoundCloudの埋め込みコードを貼る 少ない プレーヤーの種類や色、自動再生などを選べる。iframeを保存できる権限が必要

埋め込めるのは、トラック、プレイリスト(SoundCloudでは「セット」とも呼ばれます)、ユーザーのページです。

方法1:URLを貼る(SoundCloudブロック)

WordPressには、SoundCloudのURLをプレーヤーに変換する仕組み(oEmbed)が標準で入っています。

  1. ブラウザでSoundCloudのトラックやプレイリストのページを開き、アドレスバーのURLをコピーします。
  2. 投稿編集画面で新しい段落を作り、URLだけを1行で貼り付けます。
  3. 自動で「SoundCloud」の埋め込みブロックに変わり、エディター上にプレーヤーが表示されます。
  4. 保存して、公開ページで再生できるか確かめます。

貼り付けで変換されない場合は、左上の「+」で「SoundCloud」を検索してブロックを追加し、入力欄にURLを貼って「埋め込み」を押します。

URLの形は次のとおりです。

https://soundcloud.com/ユーザー名/トラック名
https://soundcloud.com/ユーザー名/sets/プレイリスト名

アプリの共有で https://on.soundcloud.com/… のような短縮URLが出る場合、WordPressに登録されているSoundCloudのURLの形(soundcloud.com/…)に当てはまらないため、SoundCloudとして埋め込まれないことがあります。一度ブラウザで開き、転送先の https://soundcloud.com/… のURLを貼ってください。

この方法は、埋め込み用のHTMLをWordPressがSoundCloudから取得して表示するため、投稿者権限のユーザーでも使えます。

方法2:SoundCloudの埋め込みコードを貼る

  1. SoundCloudでトラックやプレイリストのページを開き、「Share」(共有)ボタンを押します。
  2. 開いた画面で「Embed」(埋め込み)タブを選びます。
  3. プレーヤーの見た目や色、自動再生などのオプションを選び、プレビューで確かめます。
  4. 表示されたコードをコピーします。
  5. WordPressの投稿編集画面で「カスタムHTML」ブロックを追加し、コードを貼り付けて保存します。

コピーされるコードは、おおむね次のような形です。実際にはこの後に、アーティスト名とトラック名へのリンクが続きます。

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/TRACK_ID&color=%23ff5500&auto_play=false&show_user=true"></iframe>

TRACK_ID の部分はトラックごとの数字で、埋め込みコードを取得すると自動で入ります。自分で作る必要はありません。

「カスタムHTML」ブロックのiframeがそのまま保存されるのは、unfiltered_html 権限を持つユーザー(通常のサイトでは管理者と編集者、マルチサイトではネットワーク管理者)だけです。投稿者権限のユーザーが保存するとiframeが取り除かれるため、その場合は方法1を使います。

プレーヤーの表示を変えるパラメーター

iframeの src にある https://w.soundcloud.com/player/?url=… の後ろに、&名前=値 の形でパラメーターを付けると表示を変えられます。SoundCloudの開発者向けドキュメントに記載されている主なものは次のとおりです(2026年10月時点)。

パラメーター 値 内容
auto_play true / false 読み込んだら再生を始める
color 色コード 再生ボタンなどの色。# は %23 と書く(例:%23ff5500)
show_artwork true / false アートワーク(ジャケット画像)を表示する
show_user true / false アップロードしたユーザー名を表示する
show_playcount true / false 再生回数を表示する
buying true / false 購入ボタンを表示する
sharing true / false 共有ボタンを表示する
download true / false ダウンロードボタンを表示する
start_track 数値 プレイリストで最初に再生する曲(先頭が0)
single_active true / false false にすると、1つを再生しても同じページの他のプレーヤーが止まらない

埋め込み画面でオプションを選ぶと、ここにない visual や show_comments などのパラメーターが付くこともあります。手で書き換えるほか、埋め込み画面で選び直してコードを取り直す方法もあります。

プレーヤーの高さ

トラック1曲なら高さ166px、プレイリストなら450pxが、SoundCloudのoEmbedでの既定の高さです。埋め込み画面でアートワークを大きく表示する見た目を選ぶと、高さはこれより大きくなります。コピーしたコードの幅(width)は、置く場所の幅いっぱいに広がる指定になっています。

自動再生について

auto_play=true にしても、多くのブラウザは音が出る自動再生を止めます。また、ページを開いた途端に音が出るのは読者の負担になりやすいため、自動再生は使わず、再生ボタンで始めてもらうほうが無難です。

JavaScriptで操作したい場合

再生・一時停止をページ側のボタンから操作したり、再生終了を検知したりしたいときは、SoundCloudのWidget API(https://w.soundcloud.com/player/api.js)を使います。使える関数やイベントはSoundCloudの開発者向けドキュメントで確認してください。

再生と表示についての注意

  • 埋め込んだプレーヤーは、表示した時点でSoundCloudのサーバーから読み込まれ、SoundCloud側でCookieなどが使われる場合があります。サイトのプライバシーポリシーに、外部サービスの埋め込みについて記載しておきます。
  • 1つの記事に多くのプレーヤーを並べると、読み込みが重くなります。複数の曲はプレイリストにまとめて1つのプレーヤーで見せると軽く保てます。
  • 元のトラックが非公開になったり削除されたりすると、記事内のプレーヤーも再生できなくなります。紹介したい曲名やアーティスト名は本文にも書いておきます。
  • 他の人の曲を紹介するときは、SoundCloudの埋め込み機能で表示し、音源をダウンロードして自分のサイトにアップロードし直すことは避けます。

うまく表示されないときの確認ポイント

  • URLが文字のまま表示される:短縮URL(on.soundcloud.com)を貼っていないか、URLが単独の行にあり、リンクが付いていないかを確認します。
  • 「埋め込めませんでした」という趣旨のメッセージが出る:URLが正しいか、トラックやプレイリストが公開されているかを確認します。
  • 貼ったiframeが保存後に消える:unfiltered_html 権限のないユーザーで保存していないか確認します。
  • プレーヤーが表示されない・真っ白になる:セキュリティ系プラグインやコンテンツブロッカーがSoundCloudの読み込みを止めていないか、別のブラウザでも確認します。
  • 変更が反映されない:キャッシュ系プラグインのキャッシュを削除し、ブラウザを再読み込みします。

まとめ

  • SoundCloudのトラックやプレイリストは、soundcloud.com のURLを単独の行に貼るだけで埋め込めます。プラグインは不要です。
  • 短縮URL(on.soundcloud.com)は、転送先の soundcloud.com のURLに置き換えて貼ります。
  • 見た目や色を選びたいときは、「Share」→「Embed」でコードをコピーし、「カスタムHTML」ブロックに貼ります。
  • iframeを保存できるのは管理者と編集者です。投稿者はURL貼り付けの方法を使います。

お気軽にご相談ください

お見積りへ お問い合わせへ
▲