いろいろ至らないところもあるかもしれません。なんかおかしいところもあるかもしれません。でもとりあえず上手くいったから。おかしい点があれば、ご意見いただけると嬉しいです。

やりたいこと

• SoundCloudのplaylistから自動的に曲目を収集する。
• 曲タイトルをクリックするとその曲が再生。もう一度押すと停止。
• 再生が終わると次のトラックを再生する
• コントローラーはいらない
• 再生中に他の曲をクリックしたら、今まで再生中だった曲は停止される。

できあがったもの

参考にしたサイト

PHP

$consumer_key = *****;
$playlist_id = *****;
$url = 'http://api.soundcloud.com/playlists/' . $playlist_id . '.json?client_id=' . $consumer_key;
$json_string = file_get_contents($url);
$obj = json_decode($json_string);
$sounds = $obj->tracks;
echo '<img src="' . htmlspecialchars($obj->artwork_url) . '" alt="' . htmlspecialchars($obj->title) . '">';
echo '<h1><a href="' . htmlspecialchars($obj->permalink_url) . '">' . htmlspecialchars($obj->title) . '</a></h1>';
echo '<p>by <a href="' . htmlspecialchars($obj->user->permalink_url) . '" target="_blank">' . htmlspecialchars($obj->user->username) . '</a></p>';
echo '<ol class="audio-list">';
foreach ($sounds as $sound) :
	$mp3_url = $sound->stream_url . '?consumer_key=' . $consumer_key;
	$song_output = '<li>' . htmlspecialchars($sound->title)
	$song_output .= '<span></span>';
	$song_output .= '<audio>';
	$song_output .= '<source src="' . htmlspecialchars($mp3_url) . '" type="audio/mp3" />';
	$song_output .= '<source src="' . htmlspecialchars($mp3_url) . '" type="audio/ogg" />';
	$song_output .= '</audio>';
	$song_output .= '</li>';
	echo $song_output;
endforeach;
echo '</ol>';

※ なぜoggも読み込むのかと思われるかもしれませんが、これをしないとAndroidでは再生されませんでした。

下記のような記事もありました。

jQuery

$(function () {
	$.fn.playlist = function() {

		function stopAudio(audio) {
			$('.play').removeClass('play');
			audio.pause();
		}
    
		this.find('li').each(function() {
      
			var audio = $(this).find('audio').get(0),
			button = $(this).find('span');
      
			//再生時の処理
			$(audio).bind('play',function() {
				$(button).addClass('play');
			}).bind('pause', function() {
				stopAudio(audio);
			});

			$(audio).bind('ended', function() {
				var nextTrack = $(audio).parent().next('li').find('audio').get(0);
				stopAudio(audio);
				if (nextTrack) {
					nextTrack.play();
				}
			});

			//ボタンをクリックしたら
			$(this).on('click', function() {
				if (audio.paused) {
					if ($('.play').length) {
						playing = $('.play').parents('li').find('audio').get(0);
						stopAudio(playing);
					}
					audio.play();
				} else {
					audio.pause();
				}
			});
		});
	};
	$(".audio-list").playlist();
});

li要素の中のspan要素にあらかじめ停止ボタン画像を設定しておきます。
曲名をクリックすると「play」というクラス名が付与されますので、ここに再生ボタン画像を設定しておきます。