vue笔记（音乐播放器） 2_vuegetduration-CSDN博客

本文链接：https://blog.csdn.net/qq_43594321/article/details/108298591

这篇博客记录了使用Vue.js开发音乐播放器时遇到的问题和解决方案，包括Vue的data深度赋值限制、不可在子组件中直接修改props、NavigationDuplicated错误的避免、设置图片URL、获取触摸事件的坐标、$nextTick的使用、音频控制、歌词同步方法、滚动到指定位置以及音频加载中的常见问题等。

摘要由CSDN通过智能技术生成

1-
数组和对象不能直接赋值情况和解决方法
vue不支持data的深度赋值
2层以上全不支持。
除非在data那里有声明

笔记一下，感谢答疑
https://www.jianshu.com/p/a3ffbe4d2b1a.

2-
通过props传递给子组件的show，不能在子组件内部修改props中的show值。

3- NavigationDuplicated: Avoided redundant navigation to current location:避免了对当前位置的冗余导航

4-vue data中设置图片url
src: require('@/assets/play/play.svg')

5- 事件中获取鼠标点击位置

touch事件，来获取鼠标位置：@touchstart @touchmove @touchend
// 获取x 坐标 e.targetTouches[0].clientX
// 获取y 坐标 e.targetTouches[0].clientY

6-this.$nextTick

7- 音频

audio.duration 总时间
audio.currentTime 当前时间
当前进度条 = 当前时间 / 总时间 * 进度条总长度

8- 歌词同步

1- 获取每条歌词对应的时间（s）
2- 设置每条歌词id = “s” + 对应时间
3- 获取当前音频播放时间currentTime （s秒）
4- 当 id = “s” + 对应时间中的对应时间 = currentTime 时，歌词颜色变化

9- 滚动到指定位置

滚动的容器 overflow:scroll;
滚动的容器 ref = “scroll”
this.$refs.scroll.scrollTop = 200 (向上滚动距离)

10- 音频初次加载 NaN

原因：音频是异步加载，未加载完显示NaN。update中也可获取音频时间

getDuration() {
      let audio = document.getElementsByTagName("audio")[0];
      let video = document.getElementsByTagName("video")[0];

      if (audio.duration) { //判断音频是否加载好
        this.time = audio.duration; 
        return;
      } else {
        let _this = this;
        setTimeout(() => {
          _this.getDuration(); //再次获取
        }, 1000);
      }
    },

11-判断移动 pc 端
链接: https://www.jianshu.com/p/182fe3b69071.