继昨天基础，今天大体上把电台弄出来了。虽然有些许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空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
