SoundCloudの再生ボタンをスクロールに追従させてみる！ブログ埋め込みウィジェットのAPIを触る[サウンドクラウド]

こんにちは。でんすけ（@notgeek_densuke）です。

今回は、SoundCloudを使って、ブログに音楽を埋め込んでいる方にむけて。

再生ボタンをスクロールに追従して、
画面固定で表示させるようにすると便利ではないか？
と思ったので、ちょっと作ってみました。

SoundCloudのウィジェットとは

SoundCloudとは、
言わずと知れた音楽系SNSです。
自分で作った曲をアップロードしておくと、
世界中の人からフォローやコメントが届くサービスですね。

で、SoundCloudの音楽は、ブログに埋め込むことができます。
手前味噌ながら、僕が作った曲を埋め込んでみますと、こんな感じです。

この埋め込み部品のことをウィジェットと呼びます。

これ、再生して、ブログ記事を読んで、下の方にずーっとスクロールしていくと、
停止とか、もっかい再生とか、できなくなりますよね。
もう一度ウィジェットのところまで戻らないといけないので。

そんなわけで、スクロール追従する再生ボタンを作ろう、という話です。

自作再生パネルの動作例

で、動作例ですが。
実際にこのページに組み込んであります。

画面下の方に再生ボタンがあるかと思いますので、
触ってみてください。

特徴は
・スクロールに追従する
・再生ボタンを押したら一つ目のウィジェットから順番に再生する
・「next」「prev」ボタンで、次の or 前のウィジェットへ切り替える
・×ボタンで非表示に
という感じ。

再生パネルの実装方法

どうやって実装しているかというと。

SoundCloudのウィジェットはJavaScriptから操作することが可能です。
なので、JavaScriptで実装してあげればいい、というわけですね。

WordPressなんかだと、add_filterあたりで
SoundCloudのウィジェットが埋め込まれた記事の場合のみに再生パネルを表示させるように実装しておくと良いかと。

SoundCloudウィジェットAPI（Widget API）使用前の準備

SoundCloudウィジェットのAPIについて。
ウィジェットを操作するAPIは「Widget API」と呼ばれています。

詳細は、こちらの公式APIリファレンスを参照のこと。

で、実装する前に、こちらのスクリプトをページに読み込ませておく必要があります。

読み込ませ方はこちらの記事を参考にしていただくとして。

[WordPress]外部JavaScriptファイルを読み込んでjQueryなどのライブラリを使う方法

SoundCloudウィジェットAPI（Widget API）の実装例

で、functions.phpにこんな感じで実装します。

function insert_SoundCloud_panel($the_content){
	if(is_single() && preg_match_all('/ifram.*?src.*?https:\/\/w.soundcloud.co/i',$the_content)){
		$content = <<< EOM
			<script>
			<!--
			var nowplay;
			var widgets = [];
			var playbutton;
			jQuery(function($){
				playbutton = $("#SC_playbutton");
				$("iframe[src*='soundcloud.com']").each(function(i,elem){
					var w = SC.Widget(elem);
					widgets.push(w);
					w.bind(SC.Widget.Events.PLAY,played);
					w.bind(SC.Widget.Events.PAUSE,paused);
					w.bind(SC.Widget.Events.FINISH,finished);
				});
			});

			/* playイベントのコールバック */
			function played(){
				playbutton.removeClass("stop").addClass("play");
				nowplay = this;
				/* タイトル、アートワーク取得 */
				nowplay.getCurrentSound(function(s){
					jQuery(function($){
						$("#SC_artwork").css(
							{backgroundImage:'url("' + s.artwork_url + '")'}
						);
						$("#SC_title").html(s.title);
					});
				});
			}

			/* pauseイベントのコールバック */
			function paused(){
				if(this === nowplay){
					playbutton.removeClass("play").addClass("stop");
				}
			}

			/* finishイベントのコールバック */
			function finished(){
				go_next();
			}

			/* 再生、停止ボタンクリック時動作 */
			function play_pause(){
				if( ! nowplay ){
					widgets[0].play();
				}
				else{
					nowplay.isPaused(function(flg){
						if(flg) nowplay.play();
						else nowplay.pause();
					});
				}
			}

			/* prevボタンクリック時動作 */
			function go_prev(){
				if( nowplay ){
					widgets.forEach(function(elem,i){
						if(nowplay === elem){
							if(i>0) widgets[i-1].play();
						}
					});
				}
			}

			/* nextボタンクリック時動作 */
			function go_next(){
				if( nowplay ){
					widgets.forEach(function(elem,i){
						if(nowplay === elem){
							if(i+1 < widgets.length) widgets[i+1].play();
						}
					});
				}
			}

			/* ×ボタンクリック時動作 */
			function hideSC(){
			    jQuery(function($){
				    $("#SoundCloudCtrPanel").hide("fast");
				});
			}
			-->
			</script>

			<div id="SoundCloudCtrPanel">
				<div id="SC_playbutton" class="stop" onclick="play_pause();"> </div>
				<div id="SC_artwork"></div>
				<div id="SC_title"></div>
				<div id="SC_prevbutton" onclick="go_prev();">prev</div>
				<div id="SC_nextbutton" onclick="go_next();">next</div>
				<div id="SC_hidebutton" onclick="hideSC();">×</div>
			</div>
EOM;

		$the_content .= $content;
	}
	return $the_content;
}
add_filter('the_content','insert_SoundCloud_panel');

という感じ。

add_filter()で、記事が表示されたときにスクリプトが埋め込まれるようにしてますが、
SoundCloudのウィジェットがあるときだけに限っています。

WordPressじゃない方は、
<script>から、最後の<div>要素までを引用してもらえれば良いかと思います。

もうちょっと作り込みが甘くて、
next、prevで最後まで行ったときはボタンを無効にしたりとか、
アートワークやタイトルクリックでSounCloudのページにリンクしたりとか、
細かい改善点はいろいろありそうですが、
まぁ、とりあえず必要最小限こんな感じで、ということで。

ニーズがありそうだったら、もうちょっとブラッシュアップします。

あと、style.cssに書くCSSはこんな感じ。

/* 再生パネル */
#SoundCloudCtrPanel{
    display: flex;
    align-items:center;
    position:fixed;
    z-index:1000;
    width:458px;
    height:45px;
    bottom:0px;
    background-color:#7886e4c7;
    margin-left: 15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size:14px;
}

#SoundCloudCtrPanel, #SoundCloudCtrPanel *{
    box-sizing:border-box;
}

/* 再生ボタン */
#SC_playbutton{
    display:block;
    position:relative;
    width:45px;
    height:45px;
    cursor:pointer;
}

#SC_playbutton:before{
    /* 再生ボタンの●を描く */
    display: block;
    content: "";
    position: absolute;
    top: 18px;
    left: 8px;
    width: 26px;
    height: 26px;
    margin-top: -8px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background: #ff5000;
}
#SC_playbutton.play:after{
    /* 再生ボタンの停止の四角を描く */
    display: block;
    content: "";
    position: absolute;
    top: 22px;
    left: 15px;
    width: 12px;
    height: 12px;
    margin-top: -5px;
    background-color: #fff;
}
#SC_playbutton.stop:after{
    /* 再生ボタンの三角を描く */
    display: block;
    content: "";
    position: absolute;
    top: 19px;
    left: 19px;
    width: 0;
    height: 0;
    margin-top: -5px;
    border: 9px solid transparent;
    border-left: 8px solid #fff;
}

#SC_prevbutton, #SC_nextbutton{
    /* prev、nextボタン */
    width: 70px;
    height: 32px;
    line-height: 28px;
    background-color: #bebee4;
    text-align: center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    margin: 0 7px;
    border-bottom: solid 4px #4a597b;
    cursor:pointer;
}

#SC_hidebutton{
    /* 消すボタン */
    width: 20px;
    font-size: 15px;
    height: 20px;
    text-align: center;
    padding: 3px;
    align-self: flex-start;
    background-color: #d4d4d4;
    line-height: 1em;
    border-radius: 5px;
    margin: 2px 0 0 20px;
    cursor: pointer;
}

#SC_artwork{
    /* アートワーク表示部 */
    width:45px;
    height:45px;
    background-size:45px 45px;
    background-color:#fff;
}
#SC_title{
    /* タイトル表示部 */
    width:150px;
    white-space: nowrap;
    overflow:hidden;
    padding-left:5px;
}
@media screen and (max-width: 480px) {
/* スマホにはデカすぎるので、アートワークとタイトルの表示をなくす */
    #SC_artwork,#SC_title{
        display:none;
    }
    #SoundCloudCtrPanel{
        width:260px;
    }
}

はい。
横長に作ったので、スマホ画面に入りきらなかった。
とりあえずアートワークとタイトルの表示をあきらめました。

2行に分けるとか、他にもやりようはあると思いますが、とりあえず。

まとめ

ということで、SoundCloudの再生ボタンを実装してみました。

SoundCloudのWidget APIを使えば、
再生、停止ができたり、イベントが取れたり、
タイトルやアートワークを取れたりするので
割といろいろできます。

APIの数もそれほど多くないので、
ちょっとやってみたい、ぐらいで触れそうです。
お試しあれ。

→プラグイン化しました。
こちらをどうぞ。

SoundCloudの再生やスキップ機能を追加するWordPressプラグイン「Control panel for SoundCloud（SoundCloud再生パネル）」つくりました

それではまたー。