vue一个页面实现音乐播放器的示例

本文介绍了vue一个页面实现音乐播放器的示例，分享给大家，具体如下：

效果如下：

项目地址：https://github.com/ermu592275254/MiniMusicPlayer

演示地址： https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效)

开发前构思

界面

做音乐播放器，界面一定要炫酷。太low了听歌没感觉。本身是为了在上班的时候用，于是做成了一个类似网易云音乐的界面，大小合适。不用兼容手机端。

用css做图标

本怀着简单实用的需求去考虑，图标可用SVG、url或者css。相对于url，SVG和css更好一些。为了修炼，最终选择的css。利用好after和before，能减少很多dom嵌套。

.next {
  position: relative;
  display: inline-block;
  height: 36px;
  width: 36px;
  border: 2px solid #fff;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}
.next:before {
  content: '';
  height: 0;
  width: 0;
  display: block;
  border: 10px transparent solid;
  border-right-width: 0;
  border-left-color: #fff;
  position: absolute;
  top: 8px;
  left: 10px;
}
.next:after {
  content: '';
  height: 20px;
  width: 4px;
  display: block;
  background: #fff;
  position: absolute;
  top: 8px;
  left: 22px;
}

画一个唱片

网易云的唱片很好看，我也要弄一个唱片! 用好 box-shadow ，一个元素便可以做成很好看的唱片效果。

.disc {
  position: relative;
  margin-top: 10%;
  margin-left: 10%;
  width: 300px;
  height: 300px;
  border-radius: 300px;
  transform: rotate(45deg);
  background-image: radial-gradient(5em 30em ellipse, #fff, #000);
  border: 2px solid #131313;
  box-shadow: 0 0 0 10px #343935;
  opacity: 0.7;
}

用range做进度条

audio本身的样式很难看，并且不同的浏览器呈现出来的效果也不一样。当然你可以修改audio的样式，传统的做法是通过controls属性来隐藏audio，然后用div来代替。现在是html5时代了，当然要用更符合场景的新元素————range。