Vue音乐项目笔记（三）

1. 音乐播放前进后退的实现   https://blog.csdn.net/weixin_40814356/article/details/80379606

2. 音乐进度条实现（单独一个组件） https://blog.csdn.net/weixin_40814356/article/details/80387804

思想： a. 播放进度条样式  定义高但是不定义宽度。 父组件computed： 当音乐不断变化的时候 它与总时间有个不断变化的百分比

子组件接收的时候 watch它的变化 不断去修改progress和小球的宽度

b. 实现拖动效果

给progress-bar定义触摸事件 

 

在created中创建一个this.touch={}对象，用来保存函数中的一些数据

初始化touch事件 记录第一次触摸的位置，以及此时小球偏移的位置   在progressTouchMove方法中，记录触摸的距离（即拖动的距离），得出当前偏移距离（记录的小球偏移距离加上差值） 结束的时候把初始化置为false

然后实现拖动到指定位置，歌曲播放指定位置的功能    touch结束的时候，向父组件触发一个事件，获取bar的宽度，然后用progress的宽度/bar的宽度，得到百分比 通过$emit传递出去  父组件接收到事件 改变audio的播放点

 

最最后：实现点击的功能

c. 音乐环形进度条的实现

逻辑的实现：

 3.如何获取歌词的数据，并解析jsonp的格式为json的格式

 https://blog.csdn.net/weixin_40814356/article/details/80401989

4. 歌词左右滑动的实现  https://blog.csdn.net/weixin_40814356/article/details/80417580

给中间加一个touch事件 用一个currentShow保存歌词显示和隐藏的状态：是唱片页还是歌词页

 touchstart的时候维护几个状态：记录x轴和y轴的坐标

touchmove:

 1 middleTouchMove (e) {
 2 
 3       if (!this.touch.init) {
 4 
 5         return
 6 
 7       }
 8 
 9       const touch = e.touches[0]
10 
11       const deltaX = touch.pageX - this.touch.startX
12 
13       const deltaY = touch.pageY - this.touch.startY
14 
15       // 为什么维护纵轴，当纵轴大于横轴的偏移的时候，就不应该移动
16 
17       if (Math.abs(deltaY) > Math.abs(deltaX)) {
18 
19         return
20 
21       }
22 
23       // 首先记录歌词的起始位置
24 
25       const left = this.currentShow === 'cd' ? 0 : -window.innerWidth
26 
27       // 最终就两种状态，left的值有两种状态，如果是cd，就是0
28 
29       const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))
30 
31       // 假如是左滑，那么dalte是负的
32 
33       this.touch.percent = Math.abs(offsetWidth / window.innerWidth)
34 
35       //这个percent是维护偏移的距离，>0.1和<0.9
36 
37       this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
38 
39       // lyricList是一个scroll组件，是一个vue组件，通过$el可以获取dom
40 
41       this.$refs.lyricList.$el.style[transitionDuration] = 0
42 
43       this.$refs.middleL.style.opacity = 1 - this.touch.percent
44 
45     },

touchend:

 1 middleTouchEnd () {
 2 
 3       let offsetWidth
 4 
 5       let opacity
 6 
 7       // 定义offset和opacity
 8 
 9       if (this.currentShow === 'cd') {
10 
11         // 如果在cd的情况下
12 
13         if (this.touch.percent > 0.1) {
14 
15           // 当活动距离超出0.1，做如下操作
16 
17           offsetWidth = -window.innerWidth
18 
19           opacity = 0
20 
21           this.currentShow = 'lyric'
22 
23         } else {
24 
25           offsetWidth = 0
26 
27           opacity = 1
28 
29           // 否则回复状态
30 
31         }
32 
33       } else {
34 
35         if (this.touch.percent < 0.9) {
36 
37           // 当活动距离小于0.9，做如下操作
38 
39           offsetWidth = 0
40 
41           opacity = 1
42 
43           this.currentShow = 'cd'
44 
45         } else {
46 
47           offsetWidth = -window.innerWidth
48 
49           opacity = 0
50 
51         }
52 
53       }
54 
55       const time = 300
56 
57       this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
58 
59       // 改变他的位置
60 
61       this.$refs.lyricList.$el.style[transitionDuration] = `${time}ms`
62 
63       // 过渡的时间，在move的时候要清零
64 
65       this.$refs.middleL.style.opacity = opacity
66 
67       this.$refs.middleL.style[transitionDuration] = `${time}ms`
68 
69     },

解决歌词不断跳动：实际上就是清空lyric中的timer计时器

**if (this.currentLyric) {

        this.currentLyric.stop()

      }**
View Code

解决歌词和音乐同步播放：

this.setPlayingState(!this.playing)

      if (this.currentLyric) {

        this.currentLyric.togglePlay()

      }
View Code

解决循环播放不会到一开始的问题，在loop的代码如下：

if (this.currentLyric) {

          this.currentLyric.seek(0)

        }
View Code

拖动bar的时候，歌词跟着滚动：

播放页歌词的实现：

添加dom

  1. <div class="playing-lyric-wrapper">
  2. <div class="playing-lyric">{{playingLyric}}</div>
  3. </div>

维护一个playLric

然后：在lyric回调的时候设置playingLric

 

posted @ 2018-08-16 20:23  竹木狼马  阅读(531)  评论(0)  编辑  收藏  举报