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


Posted in Javascript onFebruary 06, 2018

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

效果如下:

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。

input[type=range] {
  -webkit-appearance: none;
  width: 80%;
  height: 8px;
  border-radius: 10px;
  background-color: #fff;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
} 
input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 20px;
}
input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -3px;
  height: 14px;
  width: 14px;
  background: #eb7470;
  border-radius: 50%;
  border: solid 3px #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

背景滤镜模糊

将图片设置为背景的感觉很棒,可以说整个播放器的颜值这背景提供了一半。设置也非常简单,用到了css3的滤镜。

.bg-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(20px);
  z-index: -1;
}

背景图片通过js控制。

<div class="bg-blur" :style="`background-image:url(${currentSong.album_logo})`"></div>

歌曲资源

爬下接口

直接去虾米官网打开network,将url复制到postman里面去做请求。通过修改headers发现,会校验Referer。也就是说只有虾米允许的域名可以访问此接口。 http://api.xiami.com/web?v=2.0&app_key=1&key=aliez&page=1&limit=5&callback=jsonp154&r=search/songs

解决跨域问题

因为接口支持jsonp。起初尝试将chrome浏览器设置跨域,然后通过$.ajax去做一个jsonp的请求。可以正常访问。

之后突然不行了,是不是虾米做了限制?

遂改用node启动一个服务,去伪造referer发起请求,再将请求转发到页面。无意中写了一个代理。

...
case '/song':
  let songOptions = {
    url: 'http://api.xiami.com/web?'+ urlArr[1],
    headers: {
      'Referer': 'http://m.xiami.com/'
    }
  };
  function callback1(error, response, body) {
    if (!error && response.statusCode == 200) {
      res.end(body);
    }
  }
  request(songOptions, callback1);
  break;
...

歌词滚动

作为一款逼格比较高的播放器,歌词滚动是必须的。

原理

将每一句歌词保存为一个对象,有对应的时间。当歌曲播放的当前时长大于或等于歌词的时间,小于此歌词的下一句歌词的时间,那么就将此歌词滚动到可视区域。并且修改字体颜色。

格式化歌词

接口返回的歌词一脸懵逼,仔细研究一下,发现是有规律的。

[ti:aLIEz]
[ar:SawanoHiroyuki[nZk]:mizuki]
[al:o1]
[ly:?梢昂胫?
[mu:?梢昂胫?
[ma:]
[pu:]
[by:ttpod]
[total:268512]
[offset:0]
[00:00.000]<195>aLIEz <199>- <451>SawanoHiroyuki[nZk]:mizuki
[x-trans]彻头彻尾的谎言 - SawanoHiroyuki[nZk]:mizuki
[00:01.095]<201>作<250>?<200>:<201>??lt;200>野<199>弘<300>之
[x-trans]
[00:02.846]<200>作<150>曲<150>:<200>??lt;200>野<351>弘<349>之
[x-trans]
[00:20.828]<200>?Q<250>め<200>つ<201>け<149>ば<201>か<349>り
[x-trans]一直独断专权
[00:23.279]<200>自<200>惚<200>れ<200>を<200>着<400>た
[x-trans]总是自负逞强
[00:24.979]<200>チ<200>?<200>プ<450>な<550>hokori<350>で
[x-trans]明明只是一文不值的骄傲
......
  refactoringLyrics(lyric){
  let text = lyric.split('[offset:0]')[1];
  let textArr = text.split('\n');
  let lyricsArr = [], translate = [];
  textArr.forEach((item, index) => {
    let time = 0, text = '';
    if (item.indexOf('[x-trans]') > -1) {
      translate.push(item.split('[x-trans]')[1])
    } else if (item.trim() != '') {
      time = item.slice(1, 6).split(':');
      time = parseInt(time[0]) * 60 + parseInt(time[1]);
      text = item.slice(11);
      let arr = text.split('>');
      let str = arr.reduce((a, b) => {
        return a.split('<')[0] + b.split('<')[0]
      });
      let obj = {
        time: time,
        text: str
      };
      lyricsArr.push(obj);
    }
  });
  for (let i in translate) {
    lyricsArr[i].text = lyricsArr[i].text + '\n' + translate[i];
  }
  this.currentLyrics = lyricsArr;
},

搜索栏实现

同文件下子组件挂载

为了遵循模块化开发,决定将搜索栏写成一个子组件。在同一页面下写子组件,子组件挂载到对应的template就有讲究了。此template不能被父组件的挂载元素包含,否则父组件渲染时会因为无法渲染子组件中的数据而报undefined。

<div id="app" class="main">
...
</div>
<template id="search-box">
...
</template>

var searchBox = {
    template: '#search-box',
    props: {
      isShow: Boolean,
      openFun: Function
    },
    data(){
      return {
        resultList: [],
        searchValue: '',
      }
    },
    methods: {
    }
  };
 new Vue({
  el: '#app',
  components: {
    'com-tip': tip,
    'search-box': searchBox
  },
  ...
})

eventBus解决数据传输

通过jsonp去请求数据,需要设置一个callback函数,此callback写成一个全局函数,如果不这样写,而是通过 searchBox.methods.callback的形式,this指向将为methods。而无法直接给searchBox的data赋值。 于是通过eventBus来处理,这样更易维护。

var EventBus = new Vue();
var callBack = function(result) {
  console.log(result);
  EventBus.$emit('callBack', result);
};
...
mounted(){
  let self = this;
  EventBus.$on('callBack', function(res) {
    if (res && res.data) {
      self.resultList = res.data.songs;
    }
  })
}
...

localStrong储存歌曲信息

下次再打开,应该播放列表应该保留上一次的数据,这个可直接用localstrong实现

踩了坑

prop传递数据

使用cdn,vue的prop只支持中线格式,驼峰格式不生效

ps: 在用webpack打包的项目中用驼峰是可以,在打包过程中,会做处理。

// 正确写法
<search-box :is-show="showSearch" :open-fun="openSearch" @push-song="pushNewSong"
        @play-song="playSong"></search-box>
// 错误写法
<search-box :isShow="showSearch" :openFun="openSearch" @pushSong="pushNewSong"
        @playSong="playSong"></search-box>

待优化

手动修改进度,偶尔会不生效。

搜索暂不支持分页

不支持建歌单

背景颜色与进度条颜色相近需修改进度条颜色

不支持播放模式选择-单曲循环-随机播放

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
js Date概念详细介绍
Nov 22 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
微信小程序单选框自定义赋值
May 26 Javascript
使用百度地图实现地图网格的示例
Feb 06 #Javascript
js中的闭包学习心得
Feb 06 #Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 #Javascript
Vue仿今日头条实例详解
Feb 06 #Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 #Javascript
详解React开发必不可少的eslint配置
Feb 05 #Javascript
详解js的作用域、预解析机制
Feb 05 #Javascript
You might like
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
axios基本入门用法教程
2017/03/25 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
python复制与引用用法分析
2015/04/08 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python实现简单图片物体标注工具
2019/03/18 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技