音乐列表正在播放的歌曲选中

docs/index.html

@@ -57,13 +57,13 @@
 <!-- 上下曲按钮位置调整 -->
 <!-- 手机端按钮加大 -->
 <!-- 页面title修改歌曲名 -->
-
+<!-- URL添加#ID选择歌曲 -->
 <!-- 音乐列表正在播放的歌曲选中 -->
+
 <!-- 播放曲线看看是否可以优化 -->
 <!-- 歌曲加载动画有bug -->
 <!-- 图片还未加载的时候背景显示问题 -->
-
 <!-- siriwave文件使用公共库 -->
 <!-- siriwave随音乐有幅度变化 -->
-<!-- URL添加#ID选择歌曲 -->
+
 

docs/player.js

@@ -20,9 +20,10 @@ var Player = function(playlist) {
 
   // Setup the playlist display.
 
-  playlist.reverse().forEach(function(song) {
+  playlist.forEach(function(song) {
     var div = document.createElement('div');
     div.className = 'list-song';
+    div.id = 'list-song-'+playlist.indexOf(song);
     div.innerHTML = song.title;
     div.onclick = function() {
       player.skipTo(playlist.indexOf(song));
@@ -101,6 +102,10 @@ Player.prototype = {
     document.querySelector("body").style.backgroundImage = "url(" +media+ encodeURI(data.pic) + ")";
     window.location.hash="#"+(index);
 
+    document.querySelector('#list-song-'+playNum).style.backgroundColor='';//清除上一首选中
+    document.querySelector('#list-song-'+index).style.backgroundColor='rgba(255, 255, 255, 0.1)';//高亮当前播放
+    playNum=index;
+
     // Show the pause button.
     if (sound.state() === 'loaded') {
       playBtn.style.display = 'none';
@@ -236,6 +241,11 @@ Player.prototype = {
 
     setTimeout(function() {
       playlist.style.display = display;
+      if (playlist.style.display=='block'){ //滚动到当前播放歌曲
+        let [parentDoc,childDoc]= [list,document.querySelector('#list-song-'+playNum)];
+        parentDoc.scrollTop = childDoc.offsetTop - parentDoc.offsetHeight /2 ;
+      }
+
     }, (display === 'block') ? 0 : 500);
     playlist.className = (display === 'block') ? 'fadein' : 'fadeout';
   },

docs/styles.css

@@ -218,10 +218,10 @@ body {
 }
 #list {
   width: 100%;
-  height: 100%;
+  height: 80%;
   position: absolute;
   overflow: auto;
-  top: 30%;
+  top: 20%;
   left: 0;
   display: -webkit-box;
   display: -ms-flexbox;