本日もroom9にお越し頂きありがとうございます！
Qtaro（＠Daisuke_9taro）です。
さて、今回はブログにお手軽に音楽を埋め込める「SoundCloud」のWordPressでの利用方法についての説明です。
昔に比べ音楽を埋め込むサイトは少なくなった印象はありますが、HTML5によって動画や音楽などのメディアの有効活用が今後は更に進むと考えられるので、押さえておいて損はないかと。
で、特にそんなに難しいことはなかったんですが、
直近の仕事で調べる機会があったので、備忘録がてら残しておきます。
SoundCloud
https://soundcloud.com/
前置き：SoundCloudって？
「SoundCloud」は2008年に開始された音楽共有サービス。
最近では日本人の利用者もかなり増えて来ているようです。^^
聞き慣れない方も多いかもしれませんが、写真共有サイト「Flickr」の音楽版、という感じで認識してもらえばいいかなと。
最近流行のCC（クリエイティブ・コモンズ・ライセンス）の規約にも乗っ取っているので、Flickr同様、ちゃんとライセンス確認して利用すれば、ブログでの貼付けはもちろん、商用利用できるものも多くあります^^
この記事が参考になります。
参考記事
SoundCloudで商用利用・改変可なフリー音源の探し方（combu）
使い方は2種類
WordPressでの利用方法は大きく2つ。
いずれも「Soundcloud」にて取得できる埋め込み用のコードで、以下の２つのいずれかを選択可能です。
- ①iframeタグの埋め込みコード
- ②WordPress用のショートコード
どちらでも埋め込み可能なんですが、
機能・柔軟性は後者の方が充実しています。
では早速前者の方から説明していきます。
①サクッと利用ならiframeでOK
まずは簡単な方から。
SoundCloudのサイトへ行き、画面左上部「Explore」から好きな楽曲を
探します。（探し方については前述の参考サイトを参照のこと）
その楽曲の「share」を選択。
するとポップアップで以下のような画面になるので
「Embed」タブを選択します。
Code & preview の部分にiframeのコードがあるのでコイツをコピー。
あとはコレをブログの本文なり、ヴィジェットに貼付けるだけです。
で、本文に貼付けた結果がこれ。
単純に「気に入った楽曲をシェアしたい」というだけであればこちらで良いと思います。
本文中でも、ヴィジェットでも、貼付けるだけでOKです。
②多機能プレーヤーならプラグイン「SoundCloud Shortcode」を導入
次にショートコードを利用して埋め込む方法です。
まずはプラグイン「SoundCloud Shortcode」をインストールし「有効化」します。
あとは、先ほど上記で説明したポップアップの「Embed」の箇所で、
更に下の方に行き「more options」を選択。
すると「WordPress code」というものがあります。
今度はこいつをコピー。
あとはiframe同様、記事本文中にショートコードを貼付けるだけです。
注）ヴィジェット内でショートコードは不可
特に設定を変更していない限り、ショートコードはヴィジェット内では利用できません。
※ヴィジェットのテキストスペースにショートコード挿入できるようにするプラグイン、なんてのも合った気はしますが。。ここでは割愛^^;
で、結果はこんな感じになります。
音量調整やiframeタグの生成も可
何が違うって言うと
単純に再生できる以外にも、音量調整や
再生回数、リリース日等の楽曲情報
soundcloudとwordpressを連携できるプラグイン「SoundCloud Shortcode」（WeBridge）
更に上記の「iframe」のコードを生成することが可能です。
「SoundCloud」本体サイトでできることとかなり近そうです。
WPは「SoundCloud」がお気に入り？
さて、いかがでしたでしょうか？？
そういえば、この簡単、充実機能を支えている背景には
WordPressチーム（？）が「SoundCloudすげーやん！！」と言っているという話があるとかないとか。。
参考記事
SoundCloud 有名アーティストも使っている音楽共有＆コラボサービス「SoundCloud」を WordPress.com のブログに簡単に埋め込むことができるショートコードが登場しました。
2通りのやり方、ご紹介させていただきましたが
いずれの方法でもかなり簡単にブログの中に楽曲を埋め込むことが可能です。
どうぞご自身の用途に合わせ使いやすい方を選択してみてください。
なお「楽しみ方」についてはこちらの「アップルパイ」のお方が熱く語ってくださっております。
参考記事
音楽を「探して」「聴いて」「共有する」！！SoundCloudの楽しみ方（jMatsuzaki）
今回の記事は以上です。
それでは良きSoundCloudライフを〜♪♪ヾ( ´∀｀)*:;,｡･★
