fork lyric version

README.md

@@ -2,14 +2,8 @@ Musicoon
 ========
 私人电台
 
-######歌曲设置
+#####歌曲设置
 修改list.php中的歌曲ID和歌单ID
 
-######备注
-如果服务器上的PHP版本 < 5.4请把数组由
-
-$array = [];
-
-改为
-
-$array = array();
+#####声明
+感谢glyphicons.com提供的免费图标

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,23 +319,30 @@ 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;
     -webkit-animation-timing-function: linear;
 }
 
 .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;
 }

index.html

@@ -9,7 +9,7 @@
 <div class="back">
     <div class="container">
         <div class="player">
-            <div class="cd">
+            <div id="cd" class="cd">
                 <div class="out">
                 </div>
                 <div id="album" class="album">
@@ -22,67 +22,17 @@
                 <input id="range" type="range" min="0" max="10" value="5" onchange="volume(this.value)">
                 <a href="javascript:next_music()"><img id="next_music" src="images/forward.png"></a>
             </div>
-            <audio id="player">
-            </audio>
+            <div class="info">
+                <span id="music_name"></span><span id="artist"></span>
+            </div>
+            <div id="lrc" class="lrc">
+            </div>
         </div>
     </div>
 </div>
-<script src="js/jquery-1.11.1.min.js"></script>
-<script>
-    oAudio = document.getElementById('player');
-    btn = $("#m_play");
-    album = $("#album");
-    inn = $("#in");
-
-    $(document).ready(function () {
-        $.get("player.php", function (data) {
-            mp3_info = JSON.parse(data);
-            $("#player").attr("src", mp3_info.mp3);
-            $("#album").css("background-image", "url('" + mp3_info.cover + "')");
-        });
-        oAudio.volume = 0.5;
-    });
-
-    $("#player").bind("ended", function () {
-        next_music();
-    });
-
-    function m_play() {
-        if (oAudio.paused) {
-            oAudio.play();
-            btn.attr("src", "images/pause.png");
-            album.addClass("roll");
-            inn.addClass("roll");
-        }
-        else {
-            oAudio.pause();
-            btn.attr("src", "images/play.png");
-            album.removeClass("roll");
-            inn.removeClass("roll");
-        }
-    }
-
-    function next_music() {
-        album.removeClass("roll");
-        inn.removeClass("roll");
-        load_music();
-        btn.attr("src", "images/pause.png");
-        album.addClass("roll");
-        inn.addClass("roll");
-    }
-
-    function load_music() {
-        $.get("player.php", function (data) {
-            mp3_info = JSON.parse(data);
-            $("#player").attr("src", mp3_info.mp3);
-            $("#album").css("background-image", "url('" + mp3_info.cover + "')");
-            oAudio.play();
-        });
-    }
-
-    function volume(vol) {
-        oAudio.volume = vol / 10;
-    }
-</script>
+<audio id="player">
+</audio>
+<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
+<script src="js/player.js" type="text/javascript"></script>
 </body>
 </html>

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]);
+}