虾米音乐播放器

虾米音乐播放器 用来做日志的 背景音乐 还是不错的 [呲牙/]

自己试着写了一个播放器界面，虽然没有华丽的界面，但是该有的基本功能都有，只能作为单曲播放器用用，另外也写了一个 单独的 JS 文件，播放 虾米音乐用的
安慰下自己  哥哥写的不是 界面， 是功能 [阴险/]
具体效果 看下面吧
轻轻的放下
去大理
我的歌声里

另外本站加上 背景图片，B格还是挺高的[坏笑/]



现在本站已经不在用着款播放器了
具体效果自己那下面的代码测试吧  （播放器 不支持列表 但是可以 通过定义多个链接 不妨不同歌曲， 代码需 jQuery.js 与 HTML5 Audio 的 支持）

首先是 JS 代码：

/**
 * 虾米音乐 播放器
 * 单曲版
 * 
 * 20141228
**/

var audio = new Audio(),
  xiami_list = {},
  $press,
  $currentTime,
  timeDrag;

var jaPlayer = {
  curID: false,
  _init: false,
  playBar: false,
  
  // 播放指定 ID 音乐 (虾米 ID)
  playXiani: function(id) {
    if (typeof(xiami_list[id]) == "undefined") {
      jaPlayer._getSong(id, true)
    } else {
      if (jaPlayer.curID != id) {
        jaPlayer.curID = id;
        jaPlayer.setSongInfo(xiami_list[id]);
        audio.src = xiami_list[id].location;
        audio.play()
      } else {
        jaPlayer.setSongInfo(xiami_list[id]);
        jaPlayer.paused()
      }
    }
  },
  
  // 进度条 拖放操作
  timePress: function(x) {
    var progress = $(".progress");
    var maxduration = audio.duration;
    var position = x - progress.offset().left;
    var percentage = 100 * position / progress.width();
    if (percentage > 100) {
      percentage = 100
    }
    if (percentage < 0) {
      percentage = 0
    }
    $(".timeBar").css("width", percentage + "%");
    audio.currentTime = maxduration * percentage / 100
  },
  
  // 时间 与 进度条 更新
  timeUpdate: function() {
    if (!jaPlayer.playBar) {
      return
    }
    var currentPos = audio.currentTime,
    maxduration = audio.duration,
    perc = 100 * currentPos / maxduration;
    $press.css("width", perc + "%");
    $currentTime.text(jaPlayer.timeFormat(currentPos))
  },
  
  // 播放暂停
  paused: function() {
    if (audio.paused || audio.ended) {
      audio.play();
      $(".ja-player .paused").addClass("pause").removeClass("play")
    } else {
      audio.pause();
      $(".ja-player .paused").addClass("play").removeClass("pause")
    }
  },
  
  // 设置 播放器 信息
  setSongInfo: function(j) {
    $(".ja-player img.bg").attr("src", j.pic);
    $(".song-info .title").text(j.title);
    $(".song-info .album").text(j.album_name);
    $(".song-info .author").text(j.artist);
    $(".song-info .time .length").text(jaPlayer.timeFormat(j.length))
  },
  
  // 格式化时间为 --:--
  timeFormat: function(seconds) {
    var m = Math.floor(seconds / 60) < 10 ? "0" + Math.floor(seconds / 60) : Math.floor(seconds / 60);
    var s = Math.floor(seconds - (m * 60)) < 10 ? "0" + Math.floor(seconds - (m * 60)) : Math.floor(seconds - (m * 60));
    return m + ":" + s
  },
  
  // 解密虾米链接
  xiamideCode: function(l) {
    var result = [],
    url = "";
    var line, rows, extra;
    l = l.trim();
    if (l === "") {
      return ""
    }
    line = Number(l[0]);
    rows = Math.floor((l.length - 1) / line);
    extra = (l.length - 1) % line;
    l = l.slice(1);
    for (i = 0; i < extra; i++) {
      result.push(l.slice((rows + 1) * i, (rows + 1) * (i + 1)))
    }
    for (i = 0; i < line - extra; i++) {
      result.push(l.slice((rows + 1) * extra + (rows * i), (rows + 1) * extra + (rows * i) + rows))
    }
    for (i = 0; i < rows + 1; i++) {
      for (j = 0; j < rows; j++) {
        if (result[j] && result[j][i]) {
          url = url + result[j][i]
        }
      }
    }
    url = unescape(url).replace(/\^/g, "0");
    return url
  },
  
  // 获取歌曲信息
  _getSong: function(id, isPlay) {
    if (typeof(xiami_list[id]) == "undefined") {
      $.getJSON("http://www.xiami.com/song/playlist/id/" + id + "/cat/json?callback=?",
      function(j) {
        id = j.data.trackList[0].song_id;
        xiami_list[id] = j.data.trackList[0];
        xiami_list[id].location = jaPlayer.xiamideCode(xiami_list[id].location);
        xiami_list[id].pic = xiami_list[id].pic.replace(/\_\d\./, "_5.");
        jaPlayer.curID = id;
        audio.src = xiami_list[id].location;
        if (typeof isPlay != "undefined" && isPlay == true) {
          audio.src = xiami_list[id].location;
          audio.play();
          $(".ja-player .paused").addClass("pause").removeClass("play")
        }
        jaPlayer.setSongInfo(xiami_list[id])
      })
    }
  },
  
  // 初始化播放器
  init: function() {
    if (!jaPlayer._init) {
      jaPlayer._init = true;
      audio.addEventListener("timeupdate", jaPlayer.timeUpdate);
      $(document).on("click", ".ja-player .paused",
      function(e) {
        jaPlayer.paused()
      }).on("click", "[data-xia]",
      function(e) {
        jaPlayer.playXiani($(this).data("xia"));
        return false
      });
      html = '<img class="bg" /><div class="paused"></div><div class="song-info"><span class="title"></span><br><span class="author"></span><span class="album"></span><br><span class="time"><span class="current">00:00</span> /<span class="length">00:00</span></span></div><div class="progress"><span class="bufferBar"></span><span class="timeBar"></span></div>';
      if (typeof($(".ja-player")[0]) != "undefined") {
        jaPlayer.playBar = true;
        $(".ja-player").html(html)
      }
      $press = $(".timeBar"),
      $currentTime = $(".song-info .time .current");
      if (typeof($("[data-xia]")[0]) != "undefined") {
        if (typeof($("[auto][data-xia]")[0]) != "undefined") {
          $this = $("[auto][data-xia]:first")
        } else {
          $this = $("[data-xia]:first")
        }
        id = jaPlayer._getSong($this.data("xia"), (typeof $this.attr("auto") == "undefined" ? false: true))
      }
    }
  }
};


// 进度条 拖放 事件
$(document)
  .on("mousedown", ".progress", function(e) {
    timeDrag = true;
    jaPlayer.timePress(e.pageX)
  })
  .on("mouseup", function(e) {
    if (timeDrag) {
      timeDrag = false;
      jaPlayer.timePress(e.pageX);
    }
  })
  .on("mousemove", function(e) {
    if (timeDrag) jaPlayer.timePress(e.pageX);
  });
  

// 加载播放器
jaPlayer.init();

接着来的是 播放器的 CSS 样式：

/** 20141228 **/
.ja-player {
  width: 200px;
  height: 200px;
  position: relative;
  background: #eee;
  color: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  margin: 50px auto 0;
  font-family: 'Microsoft YaHei','STHeiti','SimHei','SimSun';
  font-size: 14px;
  font-weight: 700;
  line-height: 16px
}

.ja-player img.bg,.ja-player .song-info {
  position: absolute;
  bottom: 20px;
  left: 0;
  padding: 3px
}

.ja-player img.bg {
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  bottom: 0
}

.ja-player .paused {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  margin-left: -17px;
  cursor: pointer;
  padding: 2px;
  color: #fff
}

.ja-player .-paused.play,.ja-player .-paused.pause {
  box-shadow: 0 0 15px #fff,0 0 15px #fff,inset 0 0 10px #fff,inset 0 0 10px #fff;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6);
  background: rgba(100,100,100,0.6)
}

.ja-player .song-info>span {
  color: #fff;
  margin-left: 3px;
  text-shadow: 0 0 5px rgba(0,0,0,0.4),1px 1px 5px rgba(0,0,0,0.4),-1px -1px 5px rgba(0,0,0,0.4)
}

.ja-player .song-info p {
  margin: 3px;
  text-align: center
}

.progress {
  position: absolute;
  width: 190px;
  height: 6px;
  padding: 2px;
  margin: 4px;
  top: 100%;
  margin-top: -15px;
  cursor: pointer;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1),inset 0 1px 1px black;
  border-radius: 10px
}

.progress span {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.4);
  display: block;
  border-radius: 10px
}

.timeBar {
  width: 0;
  display: block;
  height: 4px;
  margin: 1px;
  padding: 0;
  background: -webkit-linear-gradient(top,#6bcce2 0,#1da3d0 100%);
  transition: width .2s linear;
  border-radius: 10px
}

.bufferBar {
  z-index: 5;
  width: 0;
  background: rgba(255,255,255,0.2)
}

.ja-player:hover .song-info,.ja-player:hover .progress {
  display: block
}

.ja-player .paused.play-bak {
  background: url(play.svg) no-repeat;
  background-size: auto 100%
}

.ja-player .paused.pause-bak {
  background: url(pause.svg) no-repeat;
  background-size: auto 100%
}

.ja-player .paused.pause {
  background-image: url(暂停 按钮);background-size: auto 100%
}

[data-xia],.xiami,.ja-player .paused.play {
  background-image: url(播放按钮 歌曲链接前的图片);background-size: auto 100%
}

[data-xia],.xiami {
  background-size: 20px 20px;
  background-repeat: no-repeat;
  cursor: pointer;
  padding-left: 22px
}

HTML 代码结构：

<!-- 播放器界面 -->
<div class="ja-player"></div>

<!-- 只是单曲播放木有列表 -->
<!-- data-xia 为虾米 ID  如果 定义 auto 则自动播放当前曲目 -->
<span data-xia="1773470603">轻轻的放下</span><br />
<span auto data-xia="1773517137">去大理</span><br />
<span data-xia="1769902385">我的歌声里</span><br />