【第9回】他のページにSoundCloud上の曲を埋め込む方法



今回のテーマ: 他のページに曲を埋め込む方法

SoundCloudの使い方第9回目の今回は、SoundCloudにアップロードされている楽曲を,他のサービス(TwitterやFacebook、個人のウェブページやブログなど)に埋め込む(or シェアする)方法を紹介します。曲によっては、シェアできないので、注意が必要です。



▶STEP1:曲を選び、シェアをクリック



まずは、シェアしたい曲を選び、左上(ちょうど再生ボタンの上)の[Share]をクリックします。 




▶STEP2:シェアする先のサービスを選ぶ

[Share]をクリックすると、以下のようなウィンドウがあらわれます。


選択肢には、Facebook、Twitter、Tumblr、メール、WordPress、StumbleUpon、Blogger、MySpace等があります。

ウィンドウの下部には曲へのダイレクトリンクや、埋め込み用のコードがあります。
具体的なサービス上でシェアしたい場合は、上からコンテンツを選び、
HTMLコード等に埋め込みたい場合は、下の[Embed Code]を活用します。



▶例: HTMLコードに埋め込むプレーヤーをカスタマイズ

ここでは、やや手順の多い、HTMLコードへの埋め込みに関して、やや詳しく説明します。

まず、上記のウィンドウの右下にある[Customize Player]をクリックすると、下のようなウィンドウがあらわれます。

料金プラン(無料/有料)によって、できることが変わってきますが、無料プランにおいてもある程度のカスタマイズは可能です。


無料のプランにおいてできることは、例えば、埋め込むプレーヤーの色をカスタマイズする事です。


上記のウィンドウの[Pick the color you like]の色彩チャートをいじると、プレーヤーの色を様々に変えることができます。また、[color code]を入力することによっても色を設定できます。


あとは、下に表示されるコードをコピーして、埋め込み先にペーストすれば、SoundCloud上の曲の埋め込みは完了です。(例えば以下のように)

CARPET CARPET CARPET ''07 Rough Loop mix2 BEAT FOR ELZHI by Flyinglotus
Cosmogramma - Flying Lotus


▶追加機能 HTML5埋め込み(2011/11/04追加)

HTML5に対応したウィジェットが出来ました。
詳しくは、こちらの記事を参照。
SoundCloudがHTML5用の埋め込みウィジェットのベータ版を公開



revised_2012/12/09

コメント

  1. 貼り付けるまでは問題なくできたのですがいざ再生となると
    ボタンを押しても再生されないのですがなぜでしょうか。
    なにか原因があれば教えて頂けませんか?
    soundcloudでは再生できてますし、貼りつけたタグ
    もののみが再生できないんです。

    返信削除
  2. 私もたまに、ブラウザとの相性や、SoundCloudの調子とか色々な要因で再生されない事がありまして。

    ブラウザを変えて再生のチェックは出来ますか?FirefoxやChrome等。

    返信削除

コメントを投稿