摘要：
播放器歌词数据抓取 在api文件夹下创建song.js 设置获取歌曲api import axios from 'axios'; export function getLyric(id) { return axios.get(`/api/lyric?id=${id}`); } 把这个方法封装到com 阅读全文
摘要：
播放模式一共有3种：列表播放，循环播放，随机播放。 这个播放模式对应到vuex的data里面是mode字段，在getters有这个state的映射，在player.vue中的mapGetters里添加mode，这样就可以通过this.mode访问当前的播放模式 ...mapGetters([ 'fu 阅读全文
摘要：
给迷你播放器实现一个圆形进度条。圆形进度条主要是在圆上有个渐变的圈，颜色高亮 圆形进度条dom结构： <template> <div class="progress-circle"> <svg width="32" height="32" viewBox="0 0 100 100" version= 阅读全文
摘要：
有了歌曲的当前播放时长和总时长可以算出进度条 组件进度条dom结构 <template> <div class="progress-bar" ref="progressBar"> <div class="bar-inner"> <div class="progress" ref="progress" 阅读全文
摘要：
播放器播放时间的dom结构: <div class="progress-wrapper"> <span class="time time-l"></span> <div class="progress-bar-wrapper"> </div> <span class="time time-r"></ 阅读全文
摘要：
给前进和后退图标分别添加点击事件 <div class="icon i-left"> <i @click="prev" class="iconfont icon-prev"></i> </div> <div class="icon i-right"> <i @click="next" class=" 阅读全文
摘要：
添加audio标签 通常有src属性 指向播放音乐地址 即currentSong.url <audio ref="audio" :src="currentSong.url" ></audio> 仅仅这样是不能播放的，还需要调用audio这个dom的play方法 最好的调用时机：currentSong 阅读全文
摘要：
播放器基础样式 player.vue <template> <div class="player" v-show="playlist.length>0"> <div class="normal-player" v-show="fullScreen"> <div class="background"> 阅读全文
摘要：
在components目录下创建player=>player.vue组件 <template> <div class="player"> <div class="normal-player"> 播放器 </div> <div class="mini-player"></div> </div> </t 阅读全文
摘要：
播放器可以通过歌手详情列表，歌单的详情列表，排行榜甚至是搜索结果去打开，即多个组件都可以操作这个播放器，当这个播放器一旦打开以后，缩小播放器，它仍然可以在后台播放运行。所以控制播放器的数据一定是全局的，那么就需要通过vuex来管理这些数据。 在state.js里 vuex需要管理以下数据： 播放器的 阅读全文