iTunes APIとHTML5で試聴プレイヤーを作ってみた

あむちょ | 2015年1月26日 | JavaScript×HTML5, Webアプリケーション | コメントはまだありません

あむちょです。

最近マイブームのWeb APIで遊ぶ。

しばらくブログをサボっていたら、漫画ブログになりつつあったので、久しぶりに更新。

今回作ったのは、iTunesから試聴データを拾ってきてHTML5のAudioタグを使って再生する、なんちゃってプレイヤーです。下の検索ボタンを押すとデータをとってきて再生されます。

スマホは自動再生ができないので検索の後、再生ボタンを押してね。そもそも全体が表示されてないよ。こっちで見てね。

今回やったこと

iTunes APIから音楽データ、タイトル、アートワークの取得
AudioをJavaScriptから制御

iTunes APIから音楽データ、タイトル、アートワークの取得

そもそも、APIとは賢くて優しい人が便利な機能を提供してくれているので、それをありがたく使わせていただく技術です。

wiki曰く、Webサービスと同義語らしいです。試しに下の送信ボタンを押すとWikipediaのAPIを使って送信したテキストを調べてくれます。

こんな感じで、賢い人達が作った辞書サービスを、優しいので使わせてくれます。

iTunes APIでは、検索ワードを送ると試聴データ,アートワークなどのURLやタイトル,アーティスト名などが返されます。

まずはiTunesのデータサーバーに欲しいデータをajaxで送信しjson形式で受け取る。今回は楽なのでjQueryを使ってます。

<br />
var msg=&quot;きゃりーぱみゅぱみゅ&quot;;  //検索ワード<br />
var params = {<br />
    term: msg,<br />
    limit: 30,  //データ数の上限<br />
    lang: &#8216;ja_jp&#8217;,<br />
    entry: &#8216;music&#8217;,<br />
    media: &#8216;music&#8217;,<br />
    country: &#8216;JP&#8217;,<br />
};<br />
$.ajax({<br />
    url: &#8216;https://itunes.apple.com/search&#8217;,<br />
    method: &#8216;GET&#8217;,<br />
    data: params,<br />
    dataType: &#8216;jsonp&#8217;,<br />
    success: function(json){<br />
        //json形式で受け取り<br />
        console.log(json);<br />
    }<br />
    error: function() {<br />
        console.log(&#8216;itunes api search error. &#8216;, arguments);<br />
    },<br />
});<br />

これでデータをsuccess関数内で受け取れます。

お次はjsonデータから必要なものを取り出す。success関数内に以下を追加

<br />
//外で宣言済み<br />
srcUrl = new Array(json.results.length);<br />
srcTitle = new Array(json.results.length);<br />
srcArt = new Array(json.results.length);<br />
srcArtist = new Array(json.results.length);</p>
<p>for (var i=0;i&lt;json.results.length;i++) {<br />
    srcUrl[i] = json.results[i].previewUrl;  //視聴データのurl<br />
    srcTitle[i] = json.results[i].trackName;  //曲名<br />
    srcArt[i] = json.results[i].artworkUrl100;  //100*100サイズのアートワークイメージ<br />
    srcArtist[i] = json.results[i].artistName;  //アーティスト名<br />
}<br />

これ以外にもたくさんデータがとれます。公式のリファレンスでも見ておくれ。

AudioをJavaScriptから制御

次にhtml5の新機能である、audioタグで音をならす。

html側

<br />
&lt;audio id=&quot;audio&quot; autoplay controls&gt;&lt;/audio&gt;<br />

controls属性を付けておくと、いい感じのプレイヤーが表示されます。上のサンプルでは自前で用意したもので、再生するだけならcontrolsをつけたほうが楽です。

次にjavascript側で制御

<br />
var trackNum = 0;<br />
var audio = document.getElementById(&quot;audio&quot;);</p>
<p>audio.addEventListener(&#8216;ended&#8217;, function(){  //再生終了イベント<br />
    trackNum++;<br />
    if(trackNum &gt; srcUrl.length-1)trackNum = 0;<br />
    audio.src = srcUrl[trackNum];<br />
    artImg.src = srcArt[trackNum];<br />
},false);</p>
<p>audio.src = srcUrl[trackNum];<br />

autoplay属性を付けておけば、srcが指定されれば勝手に再生されます(スマホは無理だよ)。js側で再生したければaudio.play(),停止はaudio.pause()でできます。autoplayをやめる時はaudio.autoplay = false;で

曲が終わったら、再生終了イベントから次の曲にしてます。

フェードイン,アウトは再生時間の変化イベントから無理やり音量をかえてます。

<br />
audio.addEventListener(&quot;timeupdate&quot;, function(){<br />
    if(audio.currentTime &lt;= 0 || audio.currentTime &gt;= audio.duration){<br />
        audio.volume = 0.0;  //safariだとcurrentTimeがマイナスをとったりdurationを超えることがあったので<br />
    }<br />
    else if(audio.currentTime &lt;= 3 &amp;&amp;){<br />
         audio.volume = audio.currentTime*0.3;  //フェードイン<br />
    }<br />
    else if(audio.currentTime &gt; audio.duration-3){<br />
        audio.volume = (audio.duration &#8211; audio.currentTime)*0.3;  //フェードアウト<br />
    }<br />
    else{<br />
        audio.volume = 1.0;<br />
    }<br />
}, false);<br />

3秒かけてフェードするようにしてます。

あとはいい感じにリストをつくなりして完成です。

視聴ゆえに30秒ぐらいしかないけど、ラジオ感覚でてきとうに聞く分には便利。なのか？