接下来介绍收藏页面，先定义一个收藏组件myCollect.vue,然后在music.vue里面引入
<!-- 我的收藏 -->
<div class="mid-col mycollectList" v-if="myChoose === '我的收藏'" style="background: #4A424A;">
<my-collect></my-collect>
</div>
引入这个组件：
import myCollect from './myCollect'
components: {
myCollect
},
查询数据库中收藏的数据，上一节中的routes/music.js有定义查询的方法，这里直接调用，还是要先引入import axios from "axios"
1.还是先定义data里面的数据
data(){
return{
musicList: [],// 保存获取收藏列表数据
max: 0,//歌曲时长
now: 0,//歌曲播放到哪里的时间点
autoplays: false,//是否自动播放
lrc: '',//保存歌词
value: 0,//进度条初始值
maxTime: '00:00',//歌曲时长转后后的格式
nowTime: '00:00',//歌曲播放到哪里转后后的格式
api: 'http://tingapi.ting.baidu.com/v1/restserver/ting',
ifPlay: '',
ifPlay1: '',
dataObj: {
format: 'json',
calback: '',
from: 'webapp_music'
},
musicUrl: '',
playParams: {
method: 'baidu.ting.song.play',
songid: ''
},
//获取歌词参数
lrcParams: {
method: 'baidu.ting.song.lry',
songid: ''
}
}
},
getMusic() {
let datas = {}
axios.post( '/music/list',datas ).then(res=>{
this.musicList = res.data.msg;//查询保存收藏的数据
})
},
页面如下
//展示歌曲
<div class="list-item" data-no="1" v-for="(item,index) in musicList" :key="index" @dblclick="playMusic(index,item)">
<span class="list-num" v-if="ifPlay !== index">{{index + 1}}</span>
<span class="list-num" v-if="ifPlay === index"><img src="/static/img/wave.gif" alt=""></span>
<span class="list-mobile-menu"></span>
<span class="music-album">{{item.hot}}</span>
<span class="auth-name">{{item.author}}</span>
<span class="music-name">
<span class="music-name-cult">{{item.title}}</span>
<!-- <div class="list-menu" data-no="1">
<span class="list-icon icon-play" data-function="play" title="点击播放这首歌"></span>
<span class="list-icon icon-download" data-function="download" title="点击下载这首歌"></span>
<span class="list-icon icon-share" data-function="share" title="点击分享这首歌"></span>
</div> -->
</span>
</div>
//进度条，播放暂停等自定义
<div class="footerMusic">
<div class="containerList">
<div class="con-btn">
<a href="javascript:;" class="player-btn btn-prev" title="上一首" @click="prev"></a>
<a href="javascript:;" @click="ifStop" class="player-btn btn-play" :class="autoplays ? ' btn-state-paused': ''" title="暂停/继续"></a>
<!-- <a href="javascript:;" class="player-btn btn-next" title="下一首"></a> -->
<a href="javascript:;" class="player-btn btn-next" title="下一首" @click="next"></a>
<a href="javascript:;" class="btn-order">{{nowTime}} / {{maxTime}}</a>
<!-- <el-progress :percentage="70"></el-progress> -->
<vue-slider @drag-end="dragend" ref="slider" v-model="value" width="800px" :max="600"></vue-slider>
<!-- <div>
{{lrc}}
</div> -->
</div>
</div>
</div>
页面效果如下：
15.png
双击播放，audio相关的api参考https://www.douban.com/note/158621500/
一、播放
例：method=baidu.ting.song.play&songid=877578
例：method=baidu.ting.song.playAAC&songid=877578
参数：songid = 877578 //歌曲id
二、LRC歌词
例：method=baidu.ting.song.lry&songid=877578
参数：songid = 877578 //歌曲id
<div class="audioUrl" style="opacity: 0;">
<audio
@timeupdate="onTimeupdate" //播放过程的回调
@loadedmetadata="onLoadedmetadata" //开始播放的回调
@ended="endedPlay"//播放完的回调
:src="musicUrl"
controls="controls"
ref="audio" //通过ref获取dom元素
:autoplay="autoplays">
</audio>
</div>
//播放音乐
playMusic(index,item) {
this.ifPlay = index;
this.ifPlay1 = index;
this.playParams.songid = item.song_id;
this.lrcParams.songid = item.song_id;
this.getMusicUrl();
},
// 通过jsonp获取音乐链接,这是个公共的方法，很多地方用到
getMusicUrl() {
const dataMusic = Object.assign({}, this.playParams, this.dataObj)
const dataMusic1 = Object.assign({}, this.lrcParams, this.dataObj)
this.$jsonp(this.api, dataMusic).then(json => {
this.autoplays = true;
this.musicUrl = json.bitrate.file_link; //获取歌曲链接，上一节也有介绍
})
this.$jsonp(this.api, dataMusic1).then(json => {
this.lrc = parseLyric(json.lrcContent);//获取歌词
console.log(parseLyric(json.lrcContent), 'parseLyricparseLyricparseLyricparseLyric');
})
},
定义一个时间转化函数，因为获取到播放的时间是以秒计算的
// 将整数转换成 时：分：秒的格式
function realFormatSecond(second) {
var secondType = typeof second
if (secondType === 'number' || secondType === 'string') {
second = parseInt(second)
var hours = Math.floor(second / 3600)
second = second - hours * 3600
var mimute = Math.floor(second / 60)
second = second - mimute * 60
return ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
} else {
return '00:00'
}
}
//开始播放事件，audio自带的事件，
onLoadedmetadata(res) {
//转换时间格式并赋值在页面展示，这里是歌曲时长
this.maxTime = realFormatSecond(res.target.duration);
//将字符串转换成数字类型，方便以后控制进度条
this.max = parseInt(res.target.duration);
},
上一首和下一首，播放和暂停
// 下一首
next() {
//这里的ifPlay1是双击时赋值的index，也就是是数组的下标
//点击下一首时下标加一
let index = parseInt(this.ifPlay1) + 1;
if(index > this.musicList.length) {
index = 0;
}
this.playParams.songid = this.musicList[index].song_id;
this.lrcParams.songid = this.musicList[index].song_id;
this.ifPlay = index;
this.ifPlay1 = index.toString();
//获取下一首的id后继续请求
this.getMusicUrl();
},
// 上一首，和下一首原理一样
prev() {
let index = parseInt(this.ifPlay1) - 1;
if(index < 0) {
index = this.musicList.length;
}
this.playParams.songid = this.musicList[index].song_id;
this.lrcParams.songid = this.musicList[index].song_id;
this.ifPlay = index;
this.ifPlay1 = index.toString();
this.getMusicUrl();
},
//audio提供的原生事件，当前播放结束后进入下一首，原理和播放下一首一
样
endedPlay(){
this.autoplays = !this.autoplays;
this.ifPlay = '';
let index = parseInt(this.ifPlay1) + 1;
if(index > this.musicList.length) {
index = 0;
}
this.playParams.songid = this.musicList[index].song_id;
this.lrcParams.songid = this.musicList[index].song_id;
this.ifPlay = index;
this.ifPlay1 = index.toString();
this.getMusicUrl();
},
// 停止与播放
ifStop(){
if(this.autoplays) {
this.$refs.audio.pause();//停止播放
this.ifPlay = '';
}else {
this.$refs.audio.play();//开始播放
this.ifPlay = this.ifPlay1;
}
this.autoplays = !this.autoplays;
},
进度条的展示和歌词的滚动播放
1.安装进度条插件 cnpm i vue-slider-component --save并引入
import vueSlider from 'vue-slider-component'
components: {
vueSlider
},
2.页面使用
//这里的dragend为拖动停止事件，这里暂时不支持点击进度条快进，可以支持拖动进度条快进，value为绑定的当前值，最大值我这里设置为600
<vue-slider @drag-end="dragend" ref="slider" v-model="value" width="800px" :max="600"></vue-slider>
歌词的数据格式如下，需要转换格式在页面展示
23.png
//歌词同步部分
function parseLyric(text) {
var lines = text.split('\n');
lines.splice(0,5);
//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]
var pattern = /\[\d{2}:\d{2}.\d{2}\]/g,
//保存最终结果的数组
result = [];
//去掉不含时间的行
// while (!pattern.test(lines[0])) {
// lineslines = lines.slice(1);
// };
//上面用'\n'生成生成数组时，结果中最后一个为空元素，这里将去掉
// lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function(v, i, a ) {
//提取出时间[xx:xx.xx]
var time = v.match(pattern);
//提取歌词
var vvalue = v.replace(pattern, '');
//因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔
time.forEach(function(v1, i1, a1) {
//去掉时间里的中括号得到xx:xx.xx
var t = v1.slice(1, -1).split(':');
//将结果压入最终数组
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), vvalue]);
});
});
//最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词
// result.sort(function(a, b) {
// return a[0] - b[0];
// });
return result;
}
onTimeupdate(res) {
//onTimeupdate为原生事件可以获取播放的当前时间点
//获取当前时间点并赋值
this.nowTime = realFormatSecond(res.target.currentTime);
this.now = parseInt(res.target.currentTime);
if(this.now > 0) {
//给进度条赋值
this.value = (this.now)*600/(this.max);
// console.log(this.value, 'this.value');
}
for (var i = 0, l = this.lrc.length; i < l; i++) {
if (this.now /*当前播放的时间*/ > this.lrc[i][0]) {
//显示到页面
//这里引入了jquery，需要引入jQuery
if(this.lrc[i][1].length > 1) {
$('#lyric').css('top',-i*25 + 200+'px'); //让歌词向上移动
$('#lyric li').css('color','#fff');
$('#lyric li:nth-child('+(i+1)+')').css('color','#31c27c'); //高亮显示当前播放的哪一句歌词
}
}
}
},
拖动播放
dragend(e) {
console.log(e,'eeeeeeeeeeeeeeee');
//原生属性，跳到指定时间点
this.$refs.audio.currentTime = e.currentValue*(this.max)/600;
},
到这里整个音乐播放器就完成了，还有很多功能有时间继续往里面 添加，以下时myCollect页面的代码
<template>
<div>
<div class="header">
<div class="logo" title="♫ 老D在线音乐播放器">
♫ 程卫拓在线音乐播放器
</div>
</div>
<div class="center">
<div class="containerList">
<div class="music-list">
<div class="list-item list-head">
<span class="music-album">热度</span>
<span class="auth-name">歌手</span>
<span class="music-name">歌曲</span>
</div>
<div class="list-item" data-no="1" v-for="(item,index) in musicList" :key="index" @dblclick="playMusic(index,item)">
<span class="list-num" v-if="ifPlay !== index">{{index + 1}}</span>
<span class="list-num" v-if="ifPlay === index"><img src="/static/img/wave.gif" alt=""></span>
<span class="list-mobile-menu"></span>
<span class="music-album">{{item.hot}}</span>
<span class="auth-name">{{item.author}}</span>
<span class="music-name">
<span class="music-name-cult">{{item.title}}</span>
<!-- <div class="list-menu" data-no="1">
<span class="list-icon icon-play" data-function="play" title="点击播放这首歌"></span>
<span class="list-icon icon-download" data-function="download" title="点击下载这首歌"></span>
<span class="list-icon icon-share" data-function="share" title="点击分享这首歌"></span>
</div> -->
</span>
</div>
</div>
<div class="player">
<!-- <div class="cover">
<img src="https://p1.music.126.net/-qHPT3rhxDlu5zQV9NcQ-A==/109951163555860423.jpg?param=300y300" class="music-cover" id="music-cover">
</div> -->
<div class="lyric">
<ul id="lyric">
<li class="lrc-item" v-for="(item,index) in lrc" :key="index">{{item[1]}}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footerMusic">
<div class="containerList">
<div class="con-btn">
<a href="javascript:;" class="player-btn btn-prev" title="上一首" @click="prev"></a>
<a href="javascript:;" @click="ifStop" class="player-btn btn-play" :class="autoplays ? ' btn-state-paused': ''" title="暂停/继续"></a>
<!-- <a href="javascript:;" class="player-btn btn-next" title="下一首"></a> -->
<a href="javascript:;" class="player-btn btn-next" title="下一首" @click="next"></a>
<a href="javascript:;" class="btn-order">{{nowTime}} / {{maxTime}}</a>
<!-- <el-progress :percentage="70"></el-progress> -->
<vue-slider @drag-end="dragend" ref="slider" v-model="value" width="800px" :max="600"></vue-slider>
<!-- <div>
{{lrc}}
</div> -->
</div>
</div>
</div>
<!-- <div class="progess">
<span class="progess">
<vue-slider v-bind="options" ref="slider" v-model="value" width="600px" :max="600"></vue-slider>
</span>
</div> -->
<div class="audioUrl" style="opacity: 0;">
<audio
@timeupdate="onTimeupdate"
@loadedmetadata="onLoadedmetadata"
@ended="endedPlay"
:src="musicUrl"
controls="controls"
ref="audio"
:autoplay="autoplays">
</audio>
</div>
</div>
</template>
<style>
.footerMusic .vue-slider-component .vue-slider-tooltip{
display: none;
}
</style>
<style scoped>
#lyric>li {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lyric li {
list-style: none;
}
.lyric {
position: absolute;
left: 10px;
right: 10px;
top: 30px;
bottom: 10px;
overflow: hidden;
text-align: center;
color: #bdbdbe;
color: rgba(225,225,225,.8);
line-height: 28px;
padding: 20px 0;
}
#lyric {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.lyric .active{
color: #31c27c;
}
.cover:after {
content: "";
position: absolute;
left: 9px;
top: 0;
width: 201px;
height: 180px;
background: url(https://music.laod.cn/images/album_cover_player.png) 0 0 no-repeat;
pointer-events: none;
}
.music-cover {
vertical-align: middle;
width: 186px;
height: 186px;
}
.player {
height: 100%;
width: 400px;
float: right;
position: relative;
}
.cover {
position: relative;
display: block;
width: 186px;
height: 186px;
margin: auto;
}
::-webkit-scrollbar{width:1px;}
.con-btn a {
display: inline-block;
position: absolute;
top: 50%;
}
.btn-prev {
background-position: 0 -30px;
width: 19px;
height: 20px;
margin-top: -10px;
}
.btn-order {
right: -55px;
width: 85px;
height: 25px;
margin-top: -5px;
font-size: 12px;
color: white;
text-decoration: none;
}
.progess{
right: -100px;
}
.btn-play {
width: 19px;
height: 29px;
margin-top: -14.5px;
left: 36%;
margin-left: -10.5px;
}
.btn-state-paused {
background-position: -30px 0;
}
.btn-next {
background-position: 0 -52px;
right: 30%;
width: 19px;
height: 20px;
margin-top: -10px;
}
.player-btn {
background-image: url(https://music.laod.cn/images/player.png);
opacity: .8;
filter: alpha(opacity=80);
}
.con-btn {
float: left;
width: 130px;
height: 100%;
position: relative;
margin: 0 10px;
}
.footerMusic{
height: 100px;
bottom: 0;
width: 100%;
position: absolute;
}
.music-list {
width: 800px;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
overflow-y: auto;
}
.list-menu {
position: absolute;
right: 10px;
top: 50%;
overflow: hidden;
font-size: 0;
height: 36px;
margin-top: -18px;
float: right;
display: none;
}
.list-item:hover{
cursor: pointer;
}
.music-name-cult {
display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-mobile-menu {
display: none;
}
.list-num {
display: block;
width: 30px;
text-align: center;
float: left;
overflow: hidden;
}
.music-name {
position: relative;
display: block;
width: auto;
margin-left: 40px;
margin-right: 300px;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.auth-name, .music-album {
position: relative;
display: block;
width: 150px;
float: right;
height: 100%;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-item {
width: 100%;
height: 50px;
line-height: 50px;
color: #bdbdbe;
color: rgba(225,225,225,.8);
font-size: 14px;
overflow: hidden;
border-bottom: 1px solid rgba(150,150,150,.1);
cursor: default;
position: relative;
}
.data-area {
position: absolute;
left: 0;
right: 400px;
top: 60px;
bottom: 0;
overflow: hidden;
}
.containerList {
position: relative;
width: 100%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
}
.center {
position: absolute;
width: 100%;
top: 50px;
bottom: 100px;
}
.header {
height: 50px;
position: absolute;
}
.logo {
transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
display: inline-block;
font-size: 23px;
color: #829194;
cursor: pointer;
margin: 10px 20px;
}
</style>
<script>
// 将整数转换成 时：分：秒的格式
function realFormatSecond(second) {
var secondType = typeof second
if (secondType === 'number' || secondType === 'string') {
second = parseInt(second)
var hours = Math.floor(second / 3600)
second = second - hours * 3600
var mimute = Math.floor(second / 60)
second = second - mimute * 60
return ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
} else {
return '00:00'
}
}
//歌词同步部分
function parseLyric(text) {
var lines = text.split('\n');
lines.splice(0,5);
//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]
var pattern = /\[\d{2}:\d{2}.\d{2}\]/g,
//保存最终结果的数组
result = [];
//去掉不含时间的行
// while (!pattern.test(lines[0])) {
// lineslines = lines.slice(1);
// };
//上面用'\n'生成生成数组时，结果中最后一个为空元素，这里将去掉
// lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function(v, i, a ) {
//提取出时间[xx:xx.xx]
var time = v.match(pattern);
//提取歌词
var vvalue = v.replace(pattern, '');
//因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔
time.forEach(function(v1, i1, a1) {
//去掉时间里的中括号得到xx:xx.xx
var t = v1.slice(1, -1).split(':');
//将结果压入最终数组
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), vvalue]);
});
});
//最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词
// result.sort(function(a, b) {
// return a[0] - b[0];
// });
return result;
}
import vueSlider from 'vue-slider-component'
export default{
components: {
vueSlider
},
data(){
return{
musicList: [],
max: 0,
now: 0,
autoplays: false,
lrc: '',
value: 0,
maxTime: '00:00',
nowTime: '00:00',
api: 'http://tingapi.ting.baidu.com/v1/restserver/ting',
ifPlay: '',
ifPlay1: '',
dataObj: {
format: 'json',
calback: '',
from: 'webapp_music'
},
musicUrl: '',
playParams: {
method: 'baidu.ting.song.play',
songid: ''
},
lrcParams: {
method: 'baidu.ting.song.lry',
songid: ''
}
}
},
mounted(){
this.getMusic();
console.log(this.$refs.audio,'this.$refs.audio');
},
computed: {
},
methods: {
// 下一首
next() {
let index = parseInt(this.ifPlay1) + 1;
if(index > this.musicList.length) {
index = 0;
}
this.playParams.songid = this.musicList[index].song_id;
this.lrcParams.songid = this.musicList[index].song_id;
this.ifPlay = index;
this.ifPlay1 = index.toString();
this.getMusicUrl();
},
// 上一首
prev() {
let index = parseInt(this.ifPlay1) - 1;
if(index < 0) {
index = this.musicList.length;
}
this.playParams.songid = this.musicList[index].song_id;
this.lrcParams.songid = this.musicList[index].song_id;
this.ifPlay = index;
this.ifPlay1 = index.toString();
this.getMusicUrl();
},
dragend(e) {
console.log(e,'eeeeeeeeeeeeeeee');
this.$refs.audio.currentTime = e.currentValue*(this.max)/600;
},
// 停止与播放
ifStop(){
if(this.autoplays) {
this.$refs.audio.pause();
this.ifPlay = '';
}else {
this.$refs.audio.play();
this.ifPlay = this.ifPlay1;
}
this.autoplays = !this.autoplays;
},
endedPlay(){
this.autoplays = !this.autoplays;
this.ifPlay = '';
let index = parseInt(this.ifPlay1) + 1;
if(index > this.musicList.length) {
index = 0;
}
this.playParams.songid = this.musicList[index].song_id;
this.lrcParams.songid = this.musicList[index].song_id;
this.ifPlay = index;
this.ifPlay1 = index.toString();
this.getMusicUrl();
// const dataMusic = Object.assign({}, this.playParams, this.dataObj)
// this.$jsonp(this.api, dataMusic).then(json => {
// this.autoplays = true;
// this.musicUrl = json.bitrate.file_link;
// })
},
//播放音乐
playMusic(index,item) {
this.ifPlay = index;
this.ifPlay1 = index;
this.playParams.songid = item.song_id;
this.lrcParams.songid = item.song_id;
this.getMusicUrl();
},
onTimeupdate(res) {
this.nowTime = realFormatSecond(res.target.currentTime);
this.now = parseInt(res.target.currentTime);
if(this.now > 0) {
this.value = (this.now)*600/(this.max);
// console.log(this.value, 'this.value');
}
for (var i = 0, l = this.lrc.length; i < l; i++) {
if (this.now /*当前播放的时间*/ > this.lrc[i][0]) {
//显示到页面
if(this.lrc[i][1].length > 1) {
$('#lyric').css('top',-i*25 + 200+'px'); //让歌词向上移动
$('#lyric li').css('color','#fff');
$('#lyric li:nth-child('+(i+1)+')').css('color','#31c27c'); //高亮显示当前播放的哪一句歌词
}
}
}
},
// 通过jsonp获取音乐链接
getMusicUrl() {
const dataMusic = Object.assign({}, this.playParams, this.dataObj)
const dataMusic1 = Object.assign({}, this.lrcParams, this.dataObj)
this.$jsonp(this.api, dataMusic).then(json => {
this.autoplays = true;
this.musicUrl = json.bitrate.file_link;
})
this.$jsonp(this.api, dataMusic1).then(json => {
this.lrc = parseLyric(json.lrcContent);
console.log(parseLyric(json.lrcContent), 'parseLyricparseLyricparseLyricparseLyric');
})
},
onLoadedmetadata(res) {
this.maxTime = realFormatSecond(res.target.duration);
this.max = parseInt(res.target.duration);
},
getMusic() {
let getMusics = {
type: 'post',
path: '/music/list',
datas: {
}
}
this.$store.dispatch(getMusics).then(res=>{
this.musicList = res.data.msg;
// this.$store.commit('getUseImage', res.data.msg.image);
});
},
}
}
</script>
以上
网友评论