同时将 audio 的 play()和 pause() 方法关联起来,通过监听 playing 全局状态实现

注意:其他原因会导致歌曲暂停,如息屏.在 audio 标签监听@pause 事件,目的是修改 playing 的状态.

3. 前进和后退实现:

实际上控制 currentIndex 来实现前进和后退

边界情况:index =-1 时,将 index 指向列表的最后一首歌,当 index 为 playlist 的长度时,让其等于 0; 并且切歌时,如果为暂停状态,将暂停状态改为播放状态 并且如果歌单只有一首歌,循环播放这首歌.通过 loop 函数实现.将 audio.currentTime = 0 ,audio.play(); 并且如果歌单没有歌,直接返回,不执行任何操作

4. 处理 DOM 异常显示:

点击播放和快速切歌时会报错:the play() request was interrupted by a new load request. 解决:歌曲需要缓冲时间,当 audio 准备好后,会触发 canplay 事件,监听 canplay,触发 ready 函数 注意歌曲是流式数据,会多次缓冲,我们只需判断第一次可以播放的时刻. ready 函数改变 songready 状态为 true,且 songready 为 true 时,直接返回.切歌改变 songready 为 false

通过 songready 状态,重写 playing 的监听

disableCls 修改未准备好时候的样式

监听 audio 的 error 事件,防止 songready 一直为 false 不能切歌.

5. 播放模式实现

使用 use-mode.js 钩子函数完成播放模式的相关逻辑

通过播放模式改变 icon

改变播放模式,并保持当前的歌曲不变使用 store->actions->changeMode 来实现

mutations 中的操作通过 commit 实现,ations 中的操作通过 dispatch 实现

6. 歌曲收藏(本地存储)

使用 use-favorite.js 钩子函数完成收藏相关逻辑

存一个全局状态 favoriteList 收藏列表

改变 icon

本地 localstorage

7. 进度条相关逻辑

创建 progress-bar.vue 完成进度条模块

接收 progress 参数,默认为 0,最大为 1 设置一个偏移量 offset 来控制位置 监听 progress 来改变 offset

progress-bar.vue 实现进度条模块

添加动态属性,控制 offset 来 控制 progress(宽度) 和 progressBtn(transform:translate(offset px,0,0)) 的位置

player 中定义 progress = currentTime / currentSong.value.duration;(0~1)

监听 audio 的原生事件 @timeupdate = updateTime,用来更新 currentTime = e.target.currentTime

currentTime 为毫秒数,格式化歌曲时间 formatTime 函数来实现分:秒格式 分钟: (interval/60|0+"").padStart(2,"0") 秒: ((interval%60|0)+"").padStart(2,"0")

监听三个事件:@touchstart.prevent @touchmove.prevent @touchend.prevent onTouchStart(e): 保存开始移动的位置: x1 = e.touches[0].pagex 保存进度条开始移动时的宽度: beginWidth = this.$refs.progress.clientWidth; onTouchMove(e):(通过当前进度百分比 x barwidth 来更新 offset) 计算开始位置与现在位置的偏差: delta = e.touches[0].pagex - x1; 计算现在进度条的宽度: tempWidth = beginWidth + delta; 计算 progress 的百分比: Math.min(1,Math.max(0,tempWidth/barWidth)) 更新 offset: barWidth x progress; 派发 progress-changing 事件,将 progress 传出去 onTouchEnd(e):() 派发 progress-changed 事件,将 progress 传出去

此时能拖动进度条,但歌曲不会发生改变,因为没有和 player 关联起来

player 组件内: 监听上面派发的事件,得到 progress progress-changing:(未松手) currentTime = progress x 歌曲总时长 注意:此时并未与 audoi 关联,拖动时并不真正改变歌曲播放状态 progress-changed:(松手) 改变歌曲状态:audio.currentTime = currentTime 暂停时拖动完成自动播放:audio.play() BUG:播放时拖动不生效 原因: 有两处同时在修改 currentTime,一是上面的 progress 系列事件;二是 player 组件中之前监听了 updateTime 事件 解决:加一个标志位 Boolean:progressChanging,当拖动时为 true,松手时为 false. updateTime 在 false 时执行. 意思就是:拖动改变 currentTime 的优先级更高

通过计算点击事件到屏幕边缘的距离 e.pagex 在计算进度条到屏幕边缘的距离 rect = this.$el.getBoundingClientRect();这个 API 包括(left,top,right,bottom)相对于视口的四个位置, 偏移量 offset= e.pageX - rect.left 改变 progress = offset/barWidth 派发 progress-change 事件

监听 audio 的 ended 事件,然后实现对应逻辑

8. cd 唱片旋转功能

CSS3 animation 属性,配合@keyframes 定义的 rotate 关键帧

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360dge);
  }
}

.playing {
  animation: rotate 20s linear infinite;
}

使用 ues-cd.js 完成 cd 旋转相关逻辑 暂停时,停止旋转

BUG:暂停时旋转 cd 的角度会回退 原因:父容器 cd 和 img 的角度未关联,img 旋转了,但 cd 没有旋转,已暂停就会复原 解决:将 cd 和 img 的旋转角度同步

function syncTransform(wrapper, inner) {
  const innerTransform = getComputedStyle(inner).transform
  wrapper.style.transform = innerTransform
}

BUG:第二次暂停时旋转 cd 的角度依旧会回退 原因:父容器有旋转角度了,img 会在父容器旋转角度的基础上旋转 解决:将旋转角度叠加

function syncTransform(wrapper, inner) {
  const wrapperTransform = getComputedStyle(wrapper).transform
  const innerTransform = getComputedStyle(inner).transform
  wrapper.style.transform = wrapperTransform === "none" ? innerTransform : innerTransform.concat(" ", wrapperTransform)
}

9. 歌词相关逻辑

歌词体积大,单独拆分到一个接口,在访问歌曲时异步请求歌词

使用 use-lyric.js 完成歌词相关逻辑

在歌曲发生切换时请求歌词

get("/api/getLyric").then((res) => {
  return res.lyric
})

const lyric = await getLyric(newSong)

不能直接修改 song.lyric,要通过 mutations 来添加

import Lyric from "lyric-parse"

注意 请求歌词是异步过程,而 currentSong 是同步的 加一个判断,如果请求歌词过程中发生了切换,就直接返回,不执行后面的歌词绑定

if (currentSong.value.lyric != lyric) return

//第一个参数为请求来的歌词,第二个参数是一个回调函数,在播放时切换行的时候触发,该回调函数得到两个参数:lineNum当前行数和
const currentLyric = new Lyric(lyric, handleLyric)
// 这个函数播放歌词,并同步到currentTime的时间
function playLyric(currentTime) {}

歌曲 canplay 事件和 getLyric() 是两个异步过程 如果 canplay 先触发,没得到歌词会自动返回 如果 getLyric 先触发,加一个判断,如果 canplay 没触发就返回

如何实现的歌词滚动?(歌词内容的滚动和视图的滚动)

歌词内容滚动 利用 currentTime 和 Lyric 实例后的对象的 seek(currentTime)实现内容滚动

视图的滚动: 利用 scroll.scrollToElement(el,time)实现视图的滚动

解决拖动进度条歌词不跟随 在 progressChaning 中,先播放歌词(同步位置),再停止歌词播放 在 progresschanged 中,播放歌词

解决快速切歌时歌词当前行显示不正确 原因:由于 getLyric 和 canplay 是两个异步过程,当正在加载歌词时,发生切歌 上一首歌的 getLyric 在切歌之后成功返回了,造成了已经请求到歌词 解决:在请求歌词之前,先对保存歌词的变量进行清空

如果没有歌词,则展示一个提示

10. 歌词页面和 cd 页面的切换

拿到歌词和 cd 的 ref,监听页面的 touch 事件