一. 播放主页预览

html代码大致预览

页面展示

首页布局三个要点

1. 设置全局变量获取当前机器的高度和宽度信息（app.js中实现）

onLaunch() {
    const info = wx.getSystemInfoSync()
    this.globalData.screenWidth = info.screenWidth
    this.globalData.screenHeight = info.screenHeight
    this.globalData.statusBarHeight = info.statusBarHeight
  },

2.设置页面的json文件 让导航处于可自定义配置状态

{
  "navigationStyle": "custom"
}

3.设置布局html +css

~~~上面是一个大盒子包裹（空盒子+ 导航栏）~~~

~~~下面是一个大swiper包裹（海报+歌词）~~~

二. 数据的获取

1.定义好要用的数据

  data: {
    id: 0, //当前歌曲Id
    currentSong: {}, //当前歌曲信息
    durationTime: 0, //歌曲总时间
    currentTime: 0, //当前歌曲进行时间
    currentLyricText: "", //当前歌词
    currentLyricIndex: 0,//当前歌词索引
    
    lyricInfos: [], //歌词数据集
    lyricScrollHeight: 0, //歌词列长度
    
    isPause: getApp().globalData.isPause, //控制暂停
    
    currentPage: 0, //控制swiper滑动时顶部导航高亮
    contentHeight: 0, //控制swiper整体的高度
    sliderValue: 0, //控制时间轴的值
    isSliderChanging: false //检测是 滑动or点击 时间轴
  },

2. 先定义一个音乐播放器保存在一个单独的文件中并导出

    const audioContext = wx.createInnerAudioContext()

    export  {audioContext}

3. 当页面被加载时

  onLoad: function (options) {
    const id = options.id
    this.setData({ id })
    const app =  getApp()
    if(id != app.globalData.currentMusicId){
      // 生成播放器  //前提是与之前不一样的歌曲
      audioContext.stop()
      audioContext.src = `音乐接口`
      audioContext.autoplay = true
      app.globalData.currentMusicId = id
    }
    // 动态计算内容高度
    const globalData = getApp().globalData
    const contentHeight = globalData.screenHeight - globalData.statusBarHeight - 44
    
    // 获取歌曲信息
    this.getPageData(id)
    this.setData({contentHeight})
    this.setupAudioContextListener()
  }

4.相关方法

  // ========================   事件处理   ======================== 
  // 控制swiper组件滑动事件
  handleSwiperChange: function(event){
    this.setData({currentPage: event.detail.current})
  },
  //控制滑动时间轴事件
  handleSliderChanging: function(event){
    const value = event.detail.value
    const currentTime = this.data.durationTime * value / 100
    this.setData({ isSliderChanging: true, currentTime, sliderValue: value })
  },
  //控制点击时间轴事件
  handleSliderChange: function(event){
    const value = event.detail.value
    const currentTime = this.data.durationTime * value / 100
    audioContext.pause()
    audioContext.seek(currentTime / 1000)
    this.setData({ sliderValue:  value, isSliderChanging: false })
  },
  //暂停or开始 播放音乐事件
  handleBtnChange: function(){
    const flag = this.data.isPause
    if(flag){
      audioContext.pause()
    }else{
      audioContext.play()
    }
    this.setData({isPause : !flag})
    getApp().globalData.isPause = !flag
    console.log(getApp().globalData.isPause);
  },
  
  // ========================   audio监听   ======================== 
  setupAudioContextListener: function() {
    audioContext.onCanplay(() => { audioContext.play() })
    // 监听时间改变
    audioContext.onTimeUpdate(() => {
      // 1.获取当前时间
      const currentTime = audioContext.currentTime * 1000
      // 2.根据当前时间修改currentTime/sliderValue
      if (!this.data.isSliderChanging) {
        const sliderValue = currentTime / this.data.durationTime * 100
        this.setData({ sliderValue, currentTime })
      }
      let i = 0
      for (; i < this.data.lyricInfos.length; i++) {
        const lyricInfo = this.data.lyricInfos[i]
        if (currentTime < lyricInfo.time) {
          break
        }
      }
      // 设置当前歌词的索引和内容
      const currentIndex = i - 1
      if (this.data.currentLyricIndex !== currentIndex) {
        const currentLyricInfo = this.data.lyricInfos[currentIndex]
        this.setData({ 
            currentLyricText: currentLyricInfo.text, 
            currentLyricIndex: currentIndex ,
            lyricScrollHeight: currentIndex * 35
        })
      }
    })
  },

总结

    本次通过音乐程序的学习，最重要的是学习了很多布局的相关实现思路，理解了大致的思路并记录下来，
以后再接触相关方面就更加容易了，同时也对小程序的全局变量有了新的认识和理解，
小程序视频播放就不说了，就需要一个src路径即可，比较简单。
    一句话： 慢慢进步，慢慢领悟，水到渠成