本文介绍了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"htmlcode">
...
case '/song':
let songOptions = {
url: 'http://api.xiami.com/web"htmlcode">
[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>澤<200>野<199>弘<300>之
[x-trans]
[00:02.846]<200>作<150>曲<150>：<200>澤<200>野<351>弘<349>之
[x-trans]
[00:20.828]<200>決<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>
待优化
手动修改进度，偶尔会不生效。
搜索暂不支持分页
不支持建歌单
背景颜色与进度条颜色相近需修改进度条颜色
不支持播放模式选择-单曲循环-随机播放
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]