SoundCloudの埋め込みをカスタマイズ(デザイン)したい!

SoundCloudの埋め込みをカスタマイズ(デザイン)したい!

SoundCloud(サウンドクラウド)の埋め込みのカスタマイズ(デザイン)は、結論から言うと、あまり変更することができません。ですが、できる限りは調整したいものです。カスタマイズできる項目をまとめてみましたので、参考になれば嬉しいです。

ちなみに、埋め込みコードを生成する際、「Pro Unlimited」プランじゃないとチェックを入れられない項目もありますが、埋め込む時にコードを少しいじれば、チェックを入れたことと同じ設定にできます!ぜひ試してみてください。

埋め込みコードの説明

埋め込みのコードを取得する画面は、以下のようになっているかと思います。

ここでは、「Options」の部分の、各項目の説明をします。

項目名 内容 埋め込みコード内の対応するパラメータ
Color 再生ボタンの色と、波形の部分の色 color=%234aaf3a(「%23」は、「#」のことです)
Height 埋め込みの高さ(px) height=”300″
Enable automatic play 埋め込みのあるページにアクセスした時に、自動再生する auto_play=true
Show comments 波形の下の、曲へのコメントを表示する show_comments=true
Show recommendations 曲が終了した時に、他のオススメの曲を表示する hide_related=false
Show SoundCloud overlays 曲を停止した時に、「SoundCloudで聴く」の画面を表示させる show_teaser=true

例えば、自動再生をしたい場合は
auto_play=true
で、させたくない場合はauto_play=falseのように書けばOKです。

また、画面上にはなく、コードの中にだけ出てくるパラメータもあります。説明も何もないため、いじってみたのですが、なんだかよくわからない部分もあります…

項目名 内容 埋め込みコード内の対応するパラメータ
埋め込みの横幅(px) width=”100%”
ジャケット画像が大きく表示され、その上に波形が表示される visual=true
曲をアップしたユーザの名前を表示する show_user=true
(??) show_reposts=true

という訳で、カスタマイズしたバージョンの埋め込みコードを、参考程度に貼っておきます。

<iframe width="500" height="150" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/430872399&color=%234aaf3a&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=true"></iframe>

こんな感じになりました(以下は、埋め込みではなくスクリーンショットです)。

まとめ

結果的に、あまりカスタマイズができませんでしたが、埋め込みコードを直接いじることで、少しは幅が広がったかと思います。