又换一播放器

又整了一播放器，绝对原创的 CSS 界面，代码完全手打 [抠鼻/]
之前两天一直都是自己测试的，当然也纠结过要不要支持 IE8，但是技术有限 IE8 下的 CSS 样式确实写不好，当然也有试过 CSS-PIE有了这东西，可以让IE8支持圆角，rgba 背景色什么的，感觉还是挺强大的，播放器用上它 在 IE8 下界面还是挺美的，但是怕以后重写 CSS 麻烦，还是去掉了，播放器 由于使用的是 jPlayer 所以 IE8 下播放歌曲 也没问题

当然 播放器也添加了，对于本地存储的支持，用于本地保存播放列表，省的每次 都重新获取，而且更新也比较方便 直接在 JS 定义全局变量 JA_PLIST_VERSION 即可，每次加载播放列表之前 读取本地缓存的列表 VERSION 与 JA_PLIST_VERSION 是否相同，相同就完全本地了 [偷笑/]

下边还是贴代码
前台 JS 部分：

var jaPlayList,
    musicApi = '/api/163music/',
    jaSongList = {},
    JA_PLIST_VERSION = typeof JA_PLIST_VERSION != 'undefined' ? JA_PLIST_VERSION : false,
    jaPlayAutoPlay = /(Android|iPhone|iPod|Symbian|WPDesktop|Windows Phone)/.test(navigator.userAgent) ? false : true;


$(document).ready(function(){

  jaPlayList = new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
  }, [], {
    swfPath: "/demo/player/js/",
    supplied: "mp3",
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    playlistOptions: {
      autoPlay: jaPlayAutoPlay
    },
    emptied: function() {
      jQuery('.jp-lrc').html('');
    },
    timeupdate: function(c) {
      if(jaPlayList.playlist[jaPlayList.current]){
        var lrcDiv = jQuery('.jp-lrc'), lrc = jaPlayList.playlist[jaPlayList.current].lrc;

        l = parseInt(c.jPlayer.status.currentTime);
        typeof lrc[l] != 'undefined' && (lrcDiv.html( typeof lrc[l] == 'number' ? lrc[lrc[l]] : lrc[l] ));
      }
    }
  });

  getAlbumList(  );

  $(document)
   .on('click', '.jp-album-list [data-id]', function(){
     // jaPlayList.remove();
     jaPlayList.setPlaylist([]);
     getSongList( $(this).data('id') );
     jaPlayList.play(0);
   })
});


// 获取 播放列表
function getAlbumList(id){  // 12898846

  getMusic({type: 'userlist', id: id}, function(b) {
      if(b && b[0].id){
        setAlbumList(b);
        getSongList(b[0].id);
      }
    }
  );
}

// 设置 播放列表 HTML
function setAlbumList(b){
  var list = '<ul>';
  for(var i=0, l=b.length; i < l; i++) {
    list += '<li title="'+ b[i].id +':'+ b[i].title
          + '"><a href="javascript:;" data-type="" data-id='
          + b[i].id +'>'+ b[i].title +'</a></li>';
  }
  list += '</ul>';
  jQuery('.jp-album-list').html(list);
}


// 获取 歌曲列表
function getSongList(id){
  if(jaSongList[id]){
    return setSongList(jaSongList[id]);
  }

  getMusic({type: 'playlist', lrc: '', id: id}, function(b) {
      if(b.songs && b.songs.length > 0){
        jaSongList[b.id] = b;
        setSongList(b);
      }
    }
  );
}

// 设置 歌曲列表 HTML
function setSongList(b){
  songs = b.songs
  jQuery.each(songs, function(i, item) {
    jaPlayList.add({
      title: item.title,
      artist: item.author,
      mp3: item.src,
      id: item.id,
      lrc: (item.lrc ? item.lrc : [])
    });
  });
  jQuery('.jp-album-list [data-id]').parent().removeClass('jp-playlist-current');
  jQuery('.jp-album-list [data-id='+ b.id +']').parent().addClass('jp-playlist-current');
}

// ajax 获取歌曲信息
function getMusic(data, callback){
  var key = 'jaPlayer_'+ getDataKey(!data ? '' : data);

  // 未定义版本 直接 从本地 获取数据
  if(!JA_PLIST_VERSION){
    cache = ja_cache(key);
    if(cache != null){
      return callback(cache);
    }
  }else{
    version = ja_cache(key +'version');
    // 如果指定 版本 就对比 本地数据的版本信息 相同就返回 本地 数据
    if(version == JA_PLIST_VERSION){
      cache = ja_cache(key);
      if(cache != null){
        return callback(cache);
      }
    }
  }

  // Ajax 获取远程数据
  jQuery.ajax({
    type: 'GET',
    dataType: 'json',
    // dataType: 'jsonp',
    // jsonp: 'callback',
    url: musicApi,
    data: data,
    beforeSend: function(xhr) {
      xhr.setRequestHeader("X-SB", 'sb');
    },
    success: function(b){
      callback(b);
      // 数据有效 就 保存本地
      if(typeof b.songs != 'undefined' || typeof b[0].id != 'undefined') ja_cache(key, b);
      if(JA_PLIST_VERSION) ja_cache(key +'version', JA_PLIST_VERSION);
    }
  });
}

// 通过 data 返回 键名
function getDataKey(data){
  if(typeof data != 'object') return '';
  key = '';
  for(k in data){key += k +':'+ data[k] +'_'}
  return key;
}

HTML 结构：

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
  <div class="jp-type-playlist">
    <div class="jp-gui jp-interface">
      <div class="jp-progress">
        <div class="jp-seek-bar">
          <div class="jp-play-bar"></div>
        </div>
      </div>
      <div class="jp-controls">
        <span class="jp-previous" title="上一曲–" role="button" tabindex="0"></span>
        <span class="jp-play" title="播放/暂停" role="button" tabindex="0"></span>
        <span class="jp-next" title="下一曲" role="button" tabindex="0"></span>
        <span class="jp-stop" title="停止" role="button" tabindex="0"></span>
      </div>
      <div class="jp-song-info">
        <div class="jp-details"></div>
        <div class="jp-time-holder">
          <span class="jp-current-time" role="timer" aria-label="time">&nbsp;</span>/<span class="jp-duration" role="timer" aria-label="duration">&nbsp;</span>
        </div>
        <div class="jp-lrc"></div>
      </div>
      <div class="jp-controls-right">
        <div class="jp-volume-controls">
          <div class="jp-volume-bar-controls">
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
          </div>
          <span class="jp-mute" title="静音 开/关" role="button" tabindex="0"></span>
        </div>
        <div class="jp-toggles">
          <span class="jp-repeat" title="循环" role="button" tabindex="0"></span>
          <span class="jp-shuffle" title="随机" role="button" tabindex="0"></span>
        </div>
      </div>
    </div>
    <div class="jp-playlist-bar">
      <div class="jp-album-list">
        sdfdsdf
      </div>
      <div class="jp-song-list">
        <div class="jp-playlist">
          <ul>
            <li>&nbsp;</li>
          </ul>
        </div>
      </div>
      <div class="jp-playlist-bar-remove" role="button" tabindex="0"></div>
    </div>
    <div class="jp-no-solution">
      <span>缺少 Flash 插件</span>
      你的浏览器不支持 Flash 。
    </div>
  </div>
</div>

CSS 样式就不贴出来了，不够丢人的
上面 JS 函数 ja_cache请参考简陋 localStorage 缓存读写封装
jPlayer 播放器官网 http://www.jplayer.org/
至于后台的数据获取 请参考：WP 网易云音乐插件 By Bigfa