WebサイトにSpotifyの楽曲を埋め込む方法について解説いたします。
シングル曲だけでなく、アルバムやプレイリストも埋め込み可能です。
基本の埋め込み方
この記事ではSpotifyのWeb版で解説いたします。
また、Spotifyのデスクトップアプリからでも同様の手順で対応できます。
Spotify Web版
https://open.spotify.com/
以下、Spotify Web版のホーム画面です。（未ログイン）
左から2番目の「Hot Hits Japan」を例にします。
1番上の曲を埋め込んでみたいと思います。
曲にマウスカーソルを持っていくと右端に「…」アイコンが出てきますので、それをクリックします。
[シェアする]→[トラックの埋め込み]を選択します。
すると以下のように埋め込みポップアップが出現します。
「コピー」をクリックすると、埋め込みHTMLをコピーできます。
ちなみに「コードを表示」にチェックをするとコピーしたコードが出現します。
以下は実際の埋め込みHTMLコードです。
<iframe src="https://open.spotify.com/embed/track/1nH2PkJL1XoUq8oE6tBZoU?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>埋め込んでみました😃
再生ボタンを押すとコマーシャルサイズで曲が再生されます。
こちらはアルバムを埋め込んだ例です。
基本の埋め込み方法は以上です。
オプション
オプションで埋め込みのデザインを変更することができます。
2022.01.11現在の埋め込みオプションは以下の通りです。
| カラー | 高さ | 幅 |
|---|---|---|
| 2色（アドミンカラー・デフォルトカラー） | 標準（380px）またはコンパクト（80px） | 40%〜100% |
カラーは楽曲のテーマカラーのようなもの（管理人側で設定しているもの？）と標準カラーのグレーを選択できます。
高さは380pxか80pxを選択できます。
高さを80pxにしてみます。
細長くなりましたね🤘
幅を変えてみようと思います。
幅は40%〜100%で設定できます。
例では試しに70%にしてみました。
さらに幅と高さを変えてみます。高さ380px、幅40%にしてみました。
以上です！
おわりに
音楽系のWebサイトを作るのに役立つかもしれません🎹
