soundcloud Widgetを配置してみる。2014-05-30

５月末で暑くなってきました。ビールの季節！！

[前置き]
さて、soundcloud Widgetの配置の件です。
soundclud ですと、標準のWidget配置機能でカンタンにできますね。
 (Playlists の配置ですと、[share]ボタン＞Embedタグで)

生成されたソースを見ると、<iframe>タグのsrc属性に、
Playlistsのキー情報らしきコードを渡しているようにみえます。

====================================================生成されたコード

	<iframe width="100%" height="450" scrolling="no" frameborder="no"
	src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/36480994&amp;color=ff5500&amp;auto_play=true&amp;hide_related=false&amp;show_artwork=true">
	</iframe>

view raw c0530-sound-index-3.htm hosted with ❤ by GitHub

====================================================

[本題]
ページに、リスト埋め込む場合はこれで十分かとおもいます。
少し手をいれて、ランダム再生できるのか？とか検討してみましたメモです。
今回、soundclud API使っておりません。
複数リストのランダム再生で、リスト内のランダム連続再生ではりません。
(リピート再生には対応ＮＧです。)

ソースはこちら、https://github.com/kuc-arc-f/h5_sound_page2

jQuery使ってます。
起動時に、配列ランダムにリストを引当て、サウンド再生。
事前に、
プレイリストは作成必要、
autoplay=onで自動再生でも良いかもしれません。

ＨＴＭＬ、https://github.com/kuc-arc-f/h5_sound_page2/blob/master/index.htm
div要素を追加用に配置
====================================================
<div id="id-div-sound1">
</div>
====================================================

ｊｓ https://github.com/kuc-arc-f/h5_sound_page2/blob/master/play-sound.js
配列に、リスト情報を追加、
====================================================

	function init_item()
	{
	var items = new Array();
	items[0] = {snd_name : 's1', snd_url : 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/36209861&color=ff5500&auto_play=true&hide_related=false&show_artwork=true' };
	items[1] = {snd_name : 's2', snd_url : 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/36479386&color=ff5500&auto_play=true&hide_related=false&show_artwork=true' };
	items[2] = {snd_name : 's3', snd_url : 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/36480994&color=ff5500&auto_play=true&hide_related=false&show_artwork=true' };
	return items;
	}

view raw c0530-sound-index-1.js hosted with ❤ by GitHub

====================================================

get_sound_id()　でランダム引当後
div要素内に、DOM構築します。
====================================================

	function load_sound( items )
	{
	if((items ==null) || (items.length < 1))
	{
	return;
	}
	var s_url = get_sound_id(items);
	console.log('s_url=' + s_url );
	var divSound= $('div#id-div-sound1');
	var s_web="";
	s_web ='<iframe width="100%" scrolling="no" frameborder="no" style="margin : 0px; height: 450px;"';
	s_web +=' src="'+ s_url + '">';
	s_web +='</iframe>';
	divSound.append( $(s_web) );
	}

view raw c0530-sound-index-2.js hosted with ❤ by GitHub

====================================================

再生できました。
ページ内の部品などに、使えるかもですね。

*)それでは、また。