繼昨天基礎，今天大體上把電臺弄出來了。雖然有些許BUG，但是自己玩無所謂了。
由于不知道獲取專輯列表的API怎么用，只能自己枚舉一些專輯ID。以后更新這些ID就可以了。電腦沒了，原來代碼是VS2013搞的。公司環境VS10，沒辦法，重新搞吧！
現在沒用數據庫，所以一些信息都是寫死的。以后有時間再說。先看電臺效果
理論上應該對接收到網易服務器的數據進行篩選，但是那樣比較繁（懶）瑣（惰）。反正就是不想弄。。。40張專輯返回來的JSON足足有4.5Mb。如果是在頁面初始化的時候加載那估計用戶都會瘋了。所以我是先讓頁面加載出來，然后通過Ajax異步請求，這個樣子用戶體驗能稍微好一點。后臺把所有專輯的信息拼接成Json返回回來，剩下的就交給客戶端瀏覽器去生成Div把。客戶接收到Json后通過JQuery-tmpl生成各個專輯的小塊。
就是這個東東：
<script id="tmpl_Album" type="text/x-jquery-tmpl">
<div>
<div style="width: 100px; height: 100px; position: relative;display: inline-block;">
<img style="width:90px;height:90px;border-radius: 8px;" src="http://c.51hei.com/a/a/b/56257541890765.jpg" value="{{= result.id}}"/>
<img style="width:30px;height:30px;position:absolute;top:35px;left:35px;opacity:0.7;display:none;z-index:2px;" src="http://c.51hei.com/a/a/b/56257541848586.jpg" />
<img style="width:30px;height:30px;position:absolute;top:35px;left:35px;opacity:0.7;display:none;z-index:2px;" src="http://c.51hei.com/a/a/b/56257541888557.jpg" />
<div style="display:none;">
{{each(i,song) result.tracks}}
<div>
<input type="hidden" value="{{= song.mp3Url}}" />
<input type="hidden" value="{{= song.name}}" />
</div>
{{/each}}
</div>
</div>
</div>
</script>
播放功能使用的是Html5中的aduio標簽，樣式為隱藏。自己在前臺加幾個功能按鈕。
糙糙的寫上幾句JS。暫停、播放、切歌功能
<script type="text/javascript">
var iCount = 1; // 旋轉的圈數
var iMusicNum = 0; // 當前播放第幾首歌曲
$(document).ready(function () {
$(".rotate_Img").css("-webkit-transform", "rotate(360deg)");
setInterval(function () {
iCount++;
$(".rotate_Img").css("-webkit-transform", "rotate(" + (360 * iCount) + "deg)");
}, 60000);
$.ajax({
url: "Ajax/AjaxNetEasyMusic.ashx",
type: "POST",
data: {},
success: function (data) {
var strJson = eval(data);
if (strJson[0].bResult) {
$.each(strJson[0].sAlbums, function (i, t) {
$(".div_AlbumList").append($("#tmpl_Album").tmpl(t).html());
});
$("#p_Message").hide();
$(".img_StausPause").show();
$(".div_Album").eq(0).find(".img_StausPause").hide();
$(".div_Album").eq(0).find(".img_StausPlay").show();
$(".div_Audio audio").attr("src", $(".div_Album").eq(0).find("div div input").eq(0).val());
$("#p_SongName").html($(".div_Album").eq(0).find("div div input").eq(1).val());
$(".img_StausPause").click(function () {
playClick($(this));
$(this).parent().find(".img_StausPlay").show();
$("#img_PlayState").attr("src", "Images/img_Play.png");
});
$(".img_StausPlay").click(function () {
$("#img_PlayState").attr("src","Images/img_Pause.png");
$(this).parent().find(".img_StausPause").show();
$(this).hide();
$(".div_Audio audio")[0].pause();
});
iMusicNum = 0;
}
},
error: function (i, t) {
}
});
// 播放器結束后回調函數
$(".div_Audio audio")[0].addEventListener('ended', function () {
nextSong(1);
}, false);
$("#img_Before").click(function () {
nextSong(-1);
});
$("#img_Next").click(function () {
nextSong(1);
});
$("#img_PlayState").click(function () {
if ($(".div_Audio audio")[0].paused) {
$(".div_Audio audio")[0].play();
$(this).attr("src", "Images/img_Play.png");
} else {
$(".div_Audio audio")[0].pause();
$(this).attr("src", "Images/img_Pause.png");
}
});
});
function nextSong(i) {
$("#img_PlayState").attr("src", "Images/img_Pause.png");
if ($(".img_StausPlay:selected")) {
iMusicNum = iMusicNum + i;
if (iMusicNum > $(".img_StausPlay:visible").parent().find("div div").length) {
$(".img_StausPlay:selected").parent().find(".img_StausPause").show();
$(".img_StausPlay:selected").hide;
$("#p_SongName").html("");
}
var mSrc = $(".img_StausPlay:visible").parent().find("div div").eq(iMusicNum).find("input").eq(0).val();
var mName = $(".img_StausPlay:visible").parent().find("div div").eq(iMusicNum).find("input").eq(1).val();
$("#img_PlayState").attr("src", "Images/img_Play.png");
$(".div_Audio audio").attr("src", mSrc);
$("#p_SongName").html(mName);
}
}
/* 播放事件 */
function playClick(t) {
$(".img_StausPause").show();
$(".img_StausPlay").hide();
$(".div_Audio audio").attr("src", t.parent().find("div div input").eq(0).val());
$("#p_SongName").html(t.parent().find("div div input").eq(1).val());
iMusicNum = 0;
}
</script>
頁面Html
<div id="content">
<div >
<div >
<img src="http://c.51hei.com/a/a/b/56257551843867.jpg" />
</div>
<div >
<img src="http://c.51hei.com/a/a/b/56257551891228.jpg" />
</div>
</div>
<br />
<div >
<audio style="display: none;" autoplay='true' controls="true"><source src='music.mp3' /><source src='music.ogg' />你的瀏覽器不支持video標簽。</audio>
</div>
<br />
<div >
<p id="p_Message">
正在加載專輯列表...</p>
<%--<div style="width: 100px; height: 100px; background-color: Red; position: relative;
display: inline-block;">
</div>--%>
</div>
</div>
<div >
<div >
<img src="http://c.51hei.com/a/a/b/56257551890816.jpg" id="img_Before" /><img style="width: 30px; height: 30px;"
src="http://c.51hei.com/a/a/b/56257551837270.jpg" id="img_PlayState" /><img src="http://c.51hei.com/a/a/b/56257551852494.jpg"
id="img_Next" />
</div>
<div >
<span>當前歌曲：</span><span id="p_SongName"></span>
</div>
</div>
后臺代碼就不貼了，和昨天差不多。CSS也不出來丟人了。怕DUANG。。。
|
QQ好友和群
QQ空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
