diff --git a/README.md b/README.md index a085153..a96ecdc 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,8 @@ Musicoon ======== 私人电台 -######歌曲设置 +#####歌曲设置 修改list.php中的歌曲ID和歌单ID -######备注 -如果服务器上的PHP版本 < 5.4请把数组由 - -$array = []; - -改为 - -$array = array(); +#####声明 +感谢glyphicons.com提供的免费图标 diff --git a/css/style.css b/css/style.css index e37193d..acab017 100644 --- a/css/style.css +++ b/css/style.css @@ -235,12 +235,12 @@ html, body { width: 100%; height: 100%; overflow-y: hidden; + font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif; } .back { - background-image: url('../images/bgimg.jpg'); - background-repeat: no-repeat; - background-size: cover; + background: url('../images/bgimg.jpg') no-repeat right; + background-size: auto 100%; width: 100%; height: 100%; } @@ -249,21 +249,20 @@ html, body { position: fixed; top: 50%; left: 50%; - width: 800px; - height: 700px; + width: 100%; + height: 70%; } .player { position: absolute; top: -50%; left: -50%; - width: 800px; - height: 700px; + width: 100%; + height: 100%; } .cd { - width: 500px; - height: 500px; + height: 70%; margin: 0 auto; text-align: center; } @@ -296,6 +295,15 @@ html, body { } } +@-moz-keyframes rotate { + from { + -moz-transform: rotate(0deg); + } + to { + -moz-transform: rotate(360deg); + } +} + #album { background-repeat: no-repeat; background-size: cover; @@ -311,6 +319,14 @@ html, body { } .roll { + animation-name: rotate; + animation-duration: 60s; + animation-iteration-count: infinite; + animation-timing-function: linear; + -moz-animation-name: rotate; + -moz-animation-duration: 60s; + -moz-animation-iteration-count: infinite; + -moz-animation-timing-function: linear; -webkit-animation-name: rotate; -webkit-animation-duration: 60s; -webkit-animation-iteration-count: infinite; @@ -318,16 +334,15 @@ html, body { } .action { - margin-top: 50px; + margin-top: 1.022%; + margin-bottom: 0.222%; + height: 2.5%; text-align: center; - -moz-user-select: none; - -khtml-user-select: none; - user-select: none; } .action img { - width: 16px; - height: 18px; + height: 100%; + width: 1.75vh; } #range { @@ -336,16 +351,18 @@ html, body { } input[type="range"] { - -webkit-appearance: none; + appearance: none; + -moz-appearance: none; /* Firefox */ + -webkit-appearance: none; /* Safari 和 Chrome */ -webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset; - margin-top: -10px; + margin-top: -0.333%; background-color: #000000; border-radius: 15px; - height: 10px; + height: 5px; width: 240px; } @@ -358,4 +375,24 @@ input[type="range"]::-webkit-slider-thumb { background: none repeat scroll 0 0 #FFFFFF; border-radius: 15px; -webkit-box-shadow: 0 -1px 1px black inset; +} + +.info { + height: 10%; + font-weight: bold; + font-size: 4vh; + line-height: 7vh; + text-align: center; +} + +.info #artist { + font-size: 2vh; + margin-left: 1em; +} + +.lrc { + height: 5%; + font-size: 2.5vh; + line-height: 3.25vh; + text-align: center; } \ No newline at end of file diff --git a/images/bgimg.jpg b/images/bgimg.jpg index 710b2f0..cb5de48 100644 Binary files a/images/bgimg.jpg and b/images/bgimg.jpg differ diff --git a/index.html b/index.html index 9f0af05..dbf041c 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
-
+
@@ -22,67 +22,17 @@
- +
+ +
+
+
- - + + + \ No newline at end of file diff --git a/js/player.js b/js/player.js new file mode 100644 index 0000000..5b151c8 --- /dev/null +++ b/js/player.js @@ -0,0 +1,104 @@ +/** + * Created by Moon on 2014/12/4 0004. + */ +oAudio = document.getElementById('player'); +btn = $("#m_play"); +album = $("#album"); +inn = $("#in"); +music_name = $("#music_name"); +artist = $("#artist"); +cd = $("#cd"); +lrc_row = $("#lrc"); +$(document).ready(function () { + cd_size(); + $.get("player.php?_=" + (new Date()).getTime(), function (data) { + mp3_info = JSON.parse(data); + $("#player").attr("src", mp3_info.mp3); + album.css("background-image", "url('" + mp3_info.cover + "')"); + music_name.html(mp3_info.music_name); + artist.html(mp3_info.artists); + if (mp3_info.lrc != "no") { + lrc = mp3_info.lrc; + } else { + lrc = "no"; + } + }); + oAudio.volume = 0.5; +}); + +$(window).resize(function () { + cd_size(); +}); + +$("#player").bind("ended", function () { + if (lrc != "no") { + clearInterval(lrc_interval); + } + next_music(); +}); + +function m_play() { + if (oAudio.paused) { + oAudio.play(); + btn.attr("src", "images/pause.png"); + album.addClass("roll"); + inn.addClass("roll"); + if (lrc != "no") { + lrc_interval = setInterval("display_lrc()", 1000); + } + } + else { + oAudio.pause(); + btn.attr("src", "images/play.png"); + album.removeClass("roll"); + inn.removeClass("roll"); + if (lrc != "no") { + clearInterval(lrc_interval); + } + } +} + +function next_music() { + oAudio.pause(); + album.removeClass("roll"); + inn.removeClass("roll"); + if (!oAudio.paused && lrc != "no") { + clearInterval(lrc_interval); + } + load_music(); + btn.attr("src", "images/pause.png"); +} + +function load_music() { + $.get("player.php?_=" + (new Date()).getTime(), function (data) { + mp3_info = JSON.parse(data); + $("#player").attr("src", mp3_info.mp3); + album.css("background-image", "url('" + mp3_info.cover + "')"); + music_name.html(mp3_info.music_name); + artist.html(mp3_info.artists); + oAudio.play(); + album.addClass("roll"); + inn.addClass("roll"); + lrc_row.html(""); + if (mp3_info.lrc != "no") { + lrc = mp3_info.lrc; + lrc_interval = setInterval("display_lrc()", 1000); + } else { + lrc = "no"; + } + }); +} + +function volume(vol) { + oAudio.volume = vol / 10; +} + +function cd_size() { + cd_height = cd.height(); + cd.css("width", cd_height); +} + +function display_lrc() { + play_time = Math.floor(oAudio.currentTime).toString(); + lrc_row.html(lrc[play_time]); +} \ No newline at end of file diff --git a/list.php b/list.php index 79dbe70..04f40d6 100644 --- a/list.php +++ b/list.php @@ -7,12 +7,12 @@ */ #歌单ID -$playlist_list = [ +$playlist_list = array( "22320356", "369792", -]; +); #单曲ID -$player_list = [ +$player_list = array( "27602841", "28870240", "28773824", @@ -22,12 +22,19 @@ "26136782", "18127541", "4153632", - "4208437", - "26082104", - "22711515", - "1987888", - "857606", - "22717355", + "4208437", + "26082104", + "22711515", + "1987888", + "857606", + "22717355", "29418291", - "22320356", -]; \ No newline at end of file + "17194024", + "857619", + "17194024", + "29498036", + "28768456", + "17115765", + "859516", + "4164331", +); \ No newline at end of file diff --git a/player.php b/player.php index be83137..b0c48ee 100644 --- a/player.php +++ b/player.php @@ -34,6 +34,12 @@ function get_music_info($music_id) return curl_get($url); } +function get_music_lyric($music_id) +{ + $url = "http://music.163.com/api/song/lyric?os=pc&id=" . $music_id . "&lv=-1&kv=-1&tv=-1"; + return curl_get($url); +} + function rand_music() { global $player_list; @@ -58,7 +64,7 @@ function get_music_id() $id = rand_music(); } if (count($played) >= $sum) { - array_splice($played, 0, 1); + array_shift($played); } } $played[] = $id; @@ -77,10 +83,45 @@ function get_music_id() } } +//获取数据 $id = get_music_id(); $music_info = json_decode(get_music_info($id), true); +$lrc_info = json_decode(get_music_lyric($id), true); + +//处理音乐信息 $play_info["cover"] = $music_info["songs"][0]["album"]["picUrl"]; $play_info["mp3"] = $music_info["songs"][0]["mp3Url"]; $play_info["mp3"] = str_replace("http://m", "http://p", $play_info["mp3"]); +$play_info["music_name"] = $music_info["songs"][0]["name"]; +foreach ($music_info["songs"][0]["artists"] as $key) { + if (!isset($play_info["artists"])) { + $play_info["artists"] = $key["name"]; + } else { + $play_info["artists"] .= "," . $key["name"]; + } +} +//处理歌词 +if (isset($lrc_info["lrc"]["lyric"])) { + $lrc = explode("\n", $lrc_info["lrc"]["lyric"]); + array_pop($lrc); + foreach ($lrc as $rows) { + $row = explode("]", $rows); + if (count($row) == 1) { + $play_info["lrc"] = "no"; + break; + } else { + $lyric = array(); + $col_text = end($row); + array_pop($row); + foreach ($row as $key) { + $time = explode(":", substr($key, 1)); + $time = $time[0] * 60 + $time[1]; + $play_info["lrc"][$time] = $col_text; + } + } + } +} else { + $play_info["lrc"] = "no"; +} echo json_encode($play_info); \ No newline at end of file