SoundCloud APIでちょっと便利なプレーヤをつくる（２）

前回サービスの概要を説明したPlayLister for SoundCloudβですが、今回は実装過程について説明をしていきます。Playerについては解説が難しいので、はじめにプレイリストの読み込みについて説明します。

動作環境はChromeを想定しています。

コード
　以下に示すように記述することで実現することができます。

このようなHTMLに対してJavascriptは

function setPlaylist(){
  track_num_max = 0;
  var url_list=document.forms["form"].elements["playlist"];
  var tracks = url_list.value.toString();
  tracks.replace(/(^\s+)|(\s+$)/g, "");
  track_urls = tracks.split("\n");
  track_num_max = track_urls.length;
}

となります。

コード解説
　それでは一行づつ解説を行いたいと思います。

・一行目
　一行目は取り込んだ文字列を改行コードで配列化した際に配列の数を入れる変数です。他の関数でも使用するため、グローバル変数になっています。先頭にvarという接頭語をつけることによってローカル変数となります。

・二行目
　二行目ではTextareaのオブジェクトを取得しています。オブジェクトを取得することでJavaScriptから内部の値等にアクセスすることができるようになります。

・三行目
　三行目ではtracksという変数に先ほど代入したTextareaのオブジェクトutl_listの内容を.valueとすることで取得し、その値をtoString()関数を用いて文字列にキャストして代入しています。

・四行目
　四行目では取得した文字列の前後の空白を削除しています。

・五行目
　五行目では改行コード\nを区切りとして文字列を配列化しています。例えば

this
is
a 
pen

という入力があった場合
tracks[0]="this",tracks[1]="is",tracks[2]="a",tracks[3]="pen"
というように配列してくれます。

・六行目
　六行目は配列の数を取得して代入しています。

以上がTextareaからのプレイリスト取得についての解説です。次回は取得した文字列配列もとにJavaScriptでHTMLのTableを作成する部分の解説を行いたいと思います。