本体はコチラ。
【Web】iTunes視聴プレイヤーを作りました - changer de ton
【スポンサードリンク】
javascript
// 前回分リストを消去 function clearSong(){ $(function(){ $("#error").text(""); $(".itunes-embed").remove(); }); }; // optionで選択した値を取得 function getSelect(){ $(function(){ getInfo($("#search").val(), $("#maxNum").val()); }); } // 渡された情報をもとに検索、データ取得 function getInfo (keyWord, maxNum) { // 基本情報 var params = { lang: 'ja_jp', entry: 'music', media: 'music', country: 'JP', term: keyWord, limit: maxNum, }; // APIに投げる $.ajax({ url: 'https://itunes.apple.com/search', method: 'GET', data: params, dataType: 'jsonp', //成功 success: function(json) { showData(json); }, //失敗 error: function() { $(function(){ $("#error").text("* エラーが発生しました *"); }); }, }); }; // 取得したデータを表示する function showData(json) { // データが取得できた if (json.results.length != 0) { var sArray = shuffleArrayList(json.results.length); for (var i = 0, len = json.results.length; i < len; i++) { var result = json.results[i]; var html; // 最初のデータのみ画面上に表示する if (sArray[i] == 0){ html = '<div id ="' + sArray[i] + '" class="music itunes-embed freezed itunes-kind-song"><a id="u' + sArray[i] + '" href="' + result.trackViewUrl + '&at=10ldcR" rel="nofollow" target="_blank"><img src="' + result.artworkUrl100 + '" class="itunes-embed-image" /></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a id="s' + sArray[i] + '" href="' + result.trackViewUrl + '&at=10ldcR" rel="nofollow" target="_blank">' + result.trackName + '</a></p><ul><li id="a' + sArray[i] + '" class="itunes-embed-artist">' + result.artistName + '</li><li class="itunes-embed-price">¥' + result.trackPrice + '</li><li class="itunes-embed-badge"><a href="' + result.trackViewUrl + '&at=10ldcR" rel="nofollow" target="_blank"><img src="/images/theme/itunes/itunes-badge-itunes@2x.png" width="44px" height="15px"></a></ul><br/><ul><li class="itunes-embed-preview"><audio id="m' + sArray[i] + '" src="' + result.previewUrl + '" controls="" ></audio></div>'; } // 他は隠しておく else{ html = '<div id ="' + sArray[i] + '" class="itunes-embed freezed itunes-kind-song" style="display:none;"><a id="u' + sArray[i] + '" href="' + result.trackViewUrl + '&at=10ldcR" rel="nofollow" target="_blank"><img src="' + result.artworkUrl100 + '" class="itunes-embed-image" /></a><div class="itunes-embed-info"><p class="itunes-embed-title"><a id="s' + sArray[i] + '" href="' + result.trackViewUrl + '&at=10ldcR" rel="nofollow" target="_blank">' + result.trackName + '</a></p><ul><li id="a' + sArray[i] + '" class="itunes-embed-artist">' + result.artistName + '</li><li class="itunes-embed-price">¥' + result.trackPrice + '</li><li class="itunes-embed-badge"><a href="' + result.trackViewUrl + '&at=10ldcR" rel="nofollow" target="_blank"><img src="/images/theme/itunes/itunes-badge-itunes@2x.png" width="44px" height="15px"></a></ul><br/><ul><li class="itunes-embed-preview"><audio id="m' + sArray[i] + '" src="' + result.previewUrl + '" controls="" ></audio></div>'; } // htmlにアペンド $('#displayArea').append(html); $("#prevSong").show(); $("#nextSong").show(); $("#favSong").show(); $("#fav").show(); } // 1曲目を再生 playSong(0 , 0); } // データが取得できなかった else { $("#error").text("* 曲が見つかりませんでした *"); } } // 取得した曲をランダムに配列に入れる(Fisher-Yates) function shuffleArrayList(j){ var array = []; for (var k = 0; k < j; k++) { array[k] = k; } Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } array.shuffle(); return array; } // 前の曲を再生 function prevSong(){ $(function(){ var num = $(".music").length; if (num == 1) { $("#error").text("* 最初の曲です *"); } else { $("#" + (num -1)).css("display", "none"); $("#" + (num - 1)).removeClass("music"); $("#" + (num - 2)).show(); stopSong(num - 1); playSong(num - 2); } }); }; // 次の曲を再生 function nextSong(){ $(function(){ var num = $(".music").length; if ($("#" + num).length == 0) { $("#error").text("* 最後の曲です *"); } else { $("#" + (num - 1)).css("display", "none"); $("#" + num).addClass("music"); $("#" + num).show(); stopSong(num - 1); playSong(num); } }); }; // 曲を停止 function stopSong(num) { $(function(){ $("#error").text(""); $("#m" + num).get(0).pause(); $("#m" + num).get(0).currentTime = 0; }); }; // 曲を再生 function playSong(num2){ $(function(){ $("#error").text(""); $("#m" + num2).get(0).play(); // 曲終了時に次の曲を再生させる $("#m" + num2).bind("ended", function(){ if($("#m" + num2).get(0).ended){nextSong();}}); }); }; // あとでちゃんと聞くリスト追加 function favSong(){ $(function(){ var num = $(".music").length; var songUrl = ($("#u" + (num -1)).attr("href")); var songTitle = ($("#s" + (num -1)).text()); var songArtist = ($("#a" + (num -1)).text()); var songInfo = '<a href="' + songUrl + '&at=10ldcR" rel="nofollow" target="_blank">★' + songTitle + ' - ' + songArtist + '</a><br />' $('#fav').append(songInfo); }); };
// 曲終了時に次の曲を再生させる $("#m" + num2).bind("ended", function(){ if($("#m" + num2).get(0).ended)
上のところの処理でかなりつまっていた。
イベントリスナーがバインドしてる時点でTRUEが入っていると思っていたのだけど、
トレースしてみたら、実際にはFALSEが入ってて意味わかんなくなった。
じゃあなぜバインドに入るの...?
endedのTRUE/FALSE判定いれたら正常に動いてくれたので、そうしてるんだけど、
そもそもFALSEなのにバインドしてる理由がよくわかってない...。
- 作者: David Flanagan,村上列
- 出版社/メーカー: オライリージャパン
- 発売日: 2012/08/10
- メディア: 大型本
- 購入: 12人 クリック: 252回
- この商品を含むブログ (18件) を見る