小程序网易云（五）

一，播放歌曲模块（播放状态显示bug,跨页面通信）

bug-1解决
问题:歌曲播放功能已经实现,但是假设A歌正在播放,退出该页面,再次进入,背景音频(A歌)还在播放,但是页面的播放状态被初始化为false
需求:当上一首歌处于播放状态时,当用户再次进入歌曲详情页(song),如果当前歌曲与上次播放歌曲相同,页面播放状态(C3效果)也为播放状态
拆分需求:
    1)如何知道上一首歌是哪一首
        缓存了上一首歌的ID
    2)如何知道上一首歌的播放状态
        缓存了上一首歌的播放状态
    3)如何知道用户进入详情页
        通过生命周期函数onLoad得知
    4)如何判断当前歌曲与上一首歌相同
        将当前页面的songId与之前缓存的musicId进行对比
    5)如何让页面状态进入播放状态
        通过isplaying来区分页面究竟是播放状态还是暂停状态
        this.setData({isplaying:true||false})

新问题:如何缓存musicId以及playState
当用户退出song页面,song的实例页面会被卸载
用户如果再次进入song页面,song页面的data会被初始化
let appInstance=getApp() //获取小程序唯一的实例
实例的本质就是一个对象,我们可以对他的属性以及属性值进行任意的修改
属性名不一定要叫做globalData,可以任意取名
console.log(appInstance.globalData.msg) -> appInstance.globalData.msg=123

当用户播放歌曲或者暂停歌曲时,我们会去记录musicId以及playState

1.1，将播放和暂停歌曲封装成一个函数，

AppObject getApp(Object object)
获取到小程序全局唯一的 App 实例， 可以将数据存储在app实例上

在app.js中注册全局数据， 

globalData:{
msg:"我是初始化数据"
}
在song.js引入小程序实例
let appInstance = getApp();
app实例存储公共数据，可以对app实例对象添加数据

  data: {
    isplaying: false,
    songId: null,
    songObj: {},
    musicUrl: "",
  },

 // 点击播放或者暂停按钮
  async handlePlay() {
    let musicUrlData = await request("/song/url", { id: this.data.songId });
    this.setData({
      isplaying: !this.data.isplaying,
      musicUrl: musicUrlData.data[0].url,
    });
    // 获取音频实例
    // let backgroundAudioManager = wx.getBackgroundAudioManager();
    // console.log('paused',backgroundAudioManager.paused);
    // paused是只读属性,false是正在播放,true代表已停止或者暂停
    // paused值在首次读取时,一定是undefined
    //pause是方法,调用它可以暂停音频
    // if (backgroundAudioManager.paused || typeof backgroundAudioManager.paused === "undefined") {
    //   // 音频连接
    //   backgroundAudioManager.src = this.data.musicUrl;
    //   // 音频标题，必传
    //   backgroundAudioManager.title = this.data.songObj.name;
    // } else {
    //   // 暂停播放
    //   backgroundAudioManager.pause();
    // }

    // 调用方法
    this.changeAudioPlay();

    // this.setData({
    //   isplaying: !this.data.isplaying
    // })
  },

 //专门用于控制音频的播放和暂停
  changeAudioPlay() {
    /*需求:当上一首歌处于播放状态时，如果再次进入的页面的歌曲与正在播放的歌曲是同一首歌，
          就让当前页面进入播放状态
      拆分需求:
          问题一:如何知道上一首歌是哪一首
            缓存上一首歌的id
          问题二:如何知道上一首歌是否处于播放状态
            缓存上一首歌的播放状态
          问题三:如何知道用户进入该页面
            当onLoad触发时
          问题四:如何知道当前页面歌曲与上一首歌是否是同一首歌
            将上一首歌的id与当前展示页面的歌曲id进行对比
          问题五:如何让页面C3效果进入播放状态
            将data中的isplaying属性改为true
    */
    // let backgroundAudioManager = wx.getBackgroundAudioManager();
    let { isplaying, musicUrl, songObj, songId } = this.data;
    if (isplaying) {
      this.backgroundAudioManager.src = musicUrl;
      this.backgroundAudioManager.title = songObj.name;

      // 问题一: 如何知道上一首歌是哪一首
      appInstance.globalData.musicId = songId;
      // 问题二: 如何知道上一首歌是否处于播放状态
      appInstance.globalData.playState = true;
    } else {
      this.backgroundAudioManager.pause();

      // 问题一: 如何知道上一首歌是哪一首
      // 但是当代码能够进入这个判断,说明你歌曲已经处于播放状态,在播放时候已经存储过musicId
      // appInstance.globalData.musicId = songId;
      // 问题二: 如何知道上一首歌是否处于播放状态
      appInstance.globalData.playState = false;
    }
  },

当用户再次进入当前歌曲详情时，判断此时歌曲id, 在onLoad函数中判断

// 问题三: 如何知道用户进入该页面
    // 当onLoad触发时
    // 问题四: 如何知道当前页面歌曲与上一首歌是否是同一首歌
    // 将上一首歌的id与当前展示页面的歌曲id进行对比
    // 问题五: 如何让页面C3效果进入播放状态
    // 将data中的isplaying属性改为true
    let { musicId, playState } = appInstance.globalData;
    if (playState && musicId === songId) {
      this.setData({
        isplaying: true,
      });
    }
    // 将音频实例配置给当前页面实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();

二，此时还有个bug,点击底部背景音乐的播放按钮，上面的c3效果没有出来，而且上面还是暂停图标，

bug-2解决
问题:用户修改背景音频的渠道较多,用户可以轻易绕过我们的播放按钮的逻辑,任意控制背景音频的播放
解决:由于渠道太多,最终选择监听背景音频播放器的播放状态,并且修改对应页面的isplaying和globalData中的playState
拆解需求:
    1)如何知道背景音频播放器的播放状态
        给背景音频播放器的实例对象绑定事件监听(onPlay,onbPause,onStop),并且绑定回调函数
    2)如何修改对应页面的isplaying和globalData中的playState
        如何知道当前页面是否是背景音频正在播放的音乐的对应页面
            songId    ->    musicId
            如果是同一首歌,就可以更新当前页面的isplaying属性
        修改用于存储背景音频播放器状态的playState

2.1，封装一个函数，用来监听背景音乐的状态

BackgroundAudioManager.onPlay(function callback)
监听背景音频播放事件，背景音频播放事件的回调函数

BackgroundAudioManager.onPause(function callback)
监听背景音频暂停事件

BackgroundAudioManager.onStop(function callback)
监听背景音频停止事件

  // 专门用于绑定音频相关监听
  addAudioListener() {
    /*需求:当歌曲处于播放状态,页面的C3效果变为播放
            当歌曲处于暂停状态,页面C3效果变为暂停
      拆分需求:
        问题一:怎么知道背景音频处于什么状态
        解决:给背景音频绑定事件监听
        问题二:如何把页面的C3效果变为播放
        解决:将isplaying属性改为true
     */
    // let backgroundAudioManager = wx.getBackgroundAudioManager();
    // 绑定背景音频的播放事件
    // 虽然写法与addEventListener相似,都是函数调用,传入回调函数
    // 但是他只会是最后一个回调函数生效
    this.backgroundAudioManager.onPlay(() => {
      //问题:如果当前这首歌与上一首歌不是同一首,this不对，改成箭头函数
      console.log("play");
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: true,
        });
      }
      appInstance.globalData.playState = true;
    });
    
    // 绑定背景音频的暂停事件
    this.backgroundAudioManager.onPause(() => {
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: false,
        });
      }
      appInstance.globalData.playState = false;
    });
    // 绑定背景音频的停止事件
    this.backgroundAudioManager.onStop(() => {
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: false,
        });
      }
      appInstance.globalData.playState = false;
    });
  },

在进入页面加载onload函数时，调用该函数，判断该背景音乐的状态

this.addAudioListener();

三，使用npm包

使用npm包
1)package.json    ->    npm init -y
2)下载pubsub-js    ->    npm install pubsub-js    ->得到node_modules文件夹(小程序不认得该文件夹)
3)构建npm(必须去详情->本地设置->使用npm模块(勾选))，并且需要设置-构建npm    ->    把node_modules文件夹编译成miniprogram_npm
4)在页面中使用pubsub-js    ->    import PubSub from 'pubsub-js'

3.1,将获取歌曲的url封装成一个函数

  // 专门用于获取歌曲音频URL
   async getMusicUrl(){
    let musicUrlData = await request('/song/url', { id: this.data.songId });
    this.setData({
      musicUrl: musicUrlData.data[0].url
    })
    return Promise.resolve()
  },

在点击播放按钮调用

 // 点击播放或者暂停按钮
  async handlePlay() {
    this.setData({
      isplaying: !this.data.isplaying,
    })
    // 发送请求获取歌曲音频URL
    if (!this.data.musicUrl) {
      //同步代码， 调用该函数后，获取到数据后，才会调用changeAudioPlay

      await this.getMusicUrl();
    }
    // let musicUrlData = await request("/song/url", { id: this.data.songId });
    // this.setData({
    //   isplaying: !this.data.isplaying,
    //   musicUrl: musicUrlData.data[0].url,
    // });
    // 获取音频实例
    // let backgroundAudioManager = wx.getBackgroundAudioManager();
    // console.log('paused',backgroundAudioManager.paused);
    // paused是只读属性,false是正在播放,true代表已停止或者暂停
    // paused值在首次读取时,一定是undefined
    //pause是方法,调用它可以暂停音频
    // if (backgroundAudioManager.paused || typeof backgroundAudioManager.paused === "undefined") {
    //   // 音频连接
    //   backgroundAudioManager.src = this.data.musicUrl;
    //   // 音频标题，必传
    //   backgroundAudioManager.title = this.data.songObj.name;
    // } else {
    //   // 暂停播放
    //   backgroundAudioManager.pause();
    // }

    // 调用方法
    this.changeAudioPlay();

    // this.setData({
    //   isplaying: !this.data.isplaying
    // })
  },

四,歌曲进度条逻辑处理

播放歌曲模块(进度条功能实现)
  1)绘制静态页面
  2)在data中常见两个状态分别存储当前时间和总时间,实现页面时间动态显示
  3)下载moment插件,将时间格式转换成分秒格式
  4)通过backgroundAudioManager实例身上获取currentTime属性,可以知道当前播放时间,
     配合onTimeUpdate事件,实现定时获取播放时间效果
  5)通过当前播放时间除以总时长得到当前播放的百分比进度,并保存至状态中,动态控制进度条前进

number duration
当前音频的长度（单位：s），只有在有合法 src 时返回。（只读）

number currentTime
当前音频的播放位置（单位：s），只有在有合法 src 时返回。（只读

BackgroundAudioManager.onTimeUpdate(function callback)
监听背景音频播放进度更新事件，只有小程序在前台时会回调

BackgroundAudioManager.onEnded(function callback)
监听背景音频自然播放结束事件
number startTime
音频开始播放的位置（单位：s）

4.1，将歌曲详细信息封装成函数，获取音频总时长，小程序中用npm安装moment包，

引入，import moment from 'moment';

 

// 专门用于获取歌曲详细信息
  async getMusicDetail(){

    //1.请求数据
    let result = await request('/song/detail', { ids: this.data.songId });
    // console.log(result)
    // console.log('2');

    //2.保存至data中
    // console.log(moment(result.songs[0].dt).format("mm:ss"))
    console.log(result.songs[0].dt)
    this.setData({
      songObj: result.songs[0],
      // 获取总时长，时间戳，毫秒
      // durationTime: result.songs[0].dt
      durationTime: moment(result.songs[0].dt).format("mm:ss")
    })

    wx.setNavigationBarTitle({
      title: this.data.songObj.name
    })

    return Promise.resolve();
  },

在onload函数中调用

// 发送请求,获取歌曲详细信息
     await this.getMusicDetail();

在专门用于绑定音频相关监听的函数中，监听背景音频播放进度更新事件

// 专门用于绑定音频相关监听
  addAudioListener() {
    /*需求:当歌曲处于播放状态,页面的C3效果变为播放
            当歌曲处于暂停状态,页面C3效果变为暂停
      拆分需求:
        问题一:怎么知道背景音频处于什么状态
        解决:给背景音频绑定事件监听
        问题二:如何把页面的C3效果变为播放
        解决:将isplaying属性改为true
     */
    // let backgroundAudioManager = wx.getBackgroundAudioManager();
    // 绑定背景音频的播放事件
    // 虽然写法与addEventListener相似,都是函数调用,传入回调函数
    // 但是他只会是最后一个回调函数生效
    this.backgroundAudioManager.onPlay(() => {
      //问题:如果当前这首歌与上一首歌不是同一首,this不对，改成箭头函数
      console.log("play");
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: true,
        });
      }
      appInstance.globalData.playState = true;
    });
    
    // 绑定背景音频的暂停事件
    this.backgroundAudioManager.onPause(() => {
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: false,
        });
      }
      appInstance.globalData.playState = false;
    });
    // 绑定背景音频的停止事件
    this.backgroundAudioManager.onStop(() => {
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: false,
        });
      }
      appInstance.globalData.playState = false;
    });

    // 当背景音频时间更新时会触发
    this.backgroundAudioManager.onTimeUpdate(()=>{
      // console.log(this.backgroundAudioManager.currentTime)
      // 获取当前时长，单位秒
      let { currentTime } = this.backgroundAudioManager;
      // 获取总时长，时间戳，毫秒
      let { dt } = this.data.songObj;
      // 获取百分比，进度
      let scale = currentTime * 100000 / dt;
      currentTime = moment(currentTime*1000).format("mm:ss")
      // console.log("scale",scale)
      // console.log("currentTime", currentTime)
      this.setData({
        currentTime,
        currentWidth: scale
      })
    })

    // this.backgroundAudioManager.startTime=178;


  },

  data: {
    isplaying: false,
    songId: null,
    songObj: {},
    musicUrl: "",
    currentTime: "00:00",
    durationTime: "",
    
    currentWidth:'0'
  },

五，歌曲自动切换功能逻辑

 

BackgroundAudioManager.onEnded(function callback)
监听背景音频自然播放结束事件
number startTime
音频开始播放的位置（单位：s）

用npm安装PubSub, 

引入，

import PubSub from 'pubsub-js';

5.1，song页，点击上一首，或者下一首，发布消息，将他的标识id传给歌曲详情页recommendSong

<!-- 底部播放选项区域 -->
  <view class="musicControl">
    <text class="iconfont icon-iconsMusicyemianbofangmoshiShuffle" ></text>
    <text class="iconfont icon-shangyishou" id="pre"   bindtap="switchSong"></text>
    <text class="iconfont {{isplaying?'icon-zanting':'icon-bofang'}} big" bindtap="handlePlay"></text>
    <text class="iconfont icon-next" id="next"   bindtap="switchSong"></text>
    <text class="iconfont icon-iconsMusicyemianbofangmoshiPlayList"></text>
  </view>

js代码

// 用户处理用户切换歌曲的操作
   switchSong(event){
    //通过id得知用户当前点击的按钮
    let { id } = event.currentTarget;
    // console.log(event.currentTarget)
    // console.log('switchSong')
    //发布方只需要将数据传递给订阅方,所以数据类型应该是任意类型
    PubSub.publish('switchSong',id);
  },

在recommendSong页，当recommendSong页要跳转到song页，保存此时歌曲的index，当song页传来上一页和下一页的标识，然后index减一，加一，

然后在将歌曲的id传递给song页，让他去发送请求，获取上一页或者下一页歌曲的信息

  <!-- 音乐列表 -->
    <scroll-view class="scrollView" scroll-y>
      <view class="recommendItem" 
        bindtap="toSong"
        data-id="{{item.id}}"
        data-index="{{index}}"
        wx:for="{{recommendList}}" 
        wx:key="id">

  data: {
    month:"",
    day:"",
    recommendList:[],
    currentIndex:null
  },
  // 用于跳转详情页面
  toSong(event){
    let {id,index} = event.currentTarget.dataset;
    // console.log('id',id);
    this.setData({
      currentIndex: index
    })
    // 跳转song页
    wx.navigateTo({
      url: '/pages/song/song?songId=' + id
    })

  },

5.2，接收song页传过来的上一页下一页标识，然后对齐index处理，然后通过index,将歌曲id传递给song页

//订阅方需要接收数据,并且执行一定的逻辑,数据类型应该是一个函数
    PubSub.subscribe("switchSong",(msg,data)=>{
      //回调函数的第一个参数是消息名称,第二个参数才是传过来的数据
      // console.log(msg, data)
      // 定义一下这首歌当前的index
      let { currentIndex, recommendList } = this.data;
      // console.log("当前歌曲id", recommendList[currentIndex])
      // 下一首
      if(data==="next"){
        // 歌曲边界值判断
        if(currentIndex===recommendList.length-1){
          currentIndex=0
        } else {
          currentIndex++;
        }
      } else {
        // 上一首
        if(currentIndex===0){
          currentIndex = recommendList.length - 1
        } else {
          currentIndex--;
        }
      }
      // 更新当前歌曲所在下标,防止播放界面切换歌曲出现BUG
      this.setData({ currentIndex})
      // console.log("对应歌曲id", recommendList[currentIndex])
      //将对应歌曲id发送给song页面
      PubSub.publish('changeAudioId', recommendList[currentIndex].id);
    })

5.3，song页接收传过来的id,发送请求，重新获取歌曲信息

 // 订阅消息，得到传过来的歌曲id,发送请求，获取歌曲详细信息和歌曲url
    PubSub.subscribe('changeAudioId', async (msg, songId) => {
      console.log(msg, songId)
      this.setData({songId});
      // 请求歌曲详细信息,用于展示图片和歌曲名称
      await this.getMusicDetail();
      // 请求歌曲音频URL,为播放歌曲做准备
      await this.getMusicUrl();
      // 用于播放音频（但是他播放的是当前data中存放的musicUrl）
      this.changeAudioPlay();
    })

5.4，当歌曲进度条到最尾部时，自动切换到下一首，发布消息给recommendSong页

// 专门用于绑定音频相关监听
  addAudioListener() {
    /*需求:当歌曲处于播放状态,页面的C3效果变为播放
            当歌曲处于暂停状态,页面C3效果变为暂停
      拆分需求:
        问题一:怎么知道背景音频处于什么状态
        解决:给背景音频绑定事件监听
        问题二:如何把页面的C3效果变为播放
        解决:将isplaying属性改为true
     */
    // let backgroundAudioManager = wx.getBackgroundAudioManager();
    // 绑定背景音频的播放事件
    // 虽然写法与addEventListener相似,都是函数调用,传入回调函数
    // 但是他只会是最后一个回调函数生效
    this.backgroundAudioManager.onPlay(() => {
      //问题:如果当前这首歌与上一首歌不是同一首,this不对，改成箭头函数
      console.log("play");
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: true,
        });
      }
      appInstance.globalData.playState = true;
    });
    
    // 绑定背景音频的暂停事件
    this.backgroundAudioManager.onPause(() => {
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: false,
        });
      }
      appInstance.globalData.playState = false;
    });
    // 绑定背景音频的停止事件
    this.backgroundAudioManager.onStop(() => {
      if (appInstance.globalData.musicId === this.data.songId) {
        this.setData({
          isplaying: false,
        });
      }
      appInstance.globalData.playState = false;
    });

    // 当背景音频时间更新时会触发
    this.backgroundAudioManager.onTimeUpdate(()=>{
      // console.log(this.backgroundAudioManager.currentTime)
      // 获取当前时长，单位秒
      let { currentTime } = this.backgroundAudioManager;
      // 获取总时长，时间戳，毫秒
      let { dt } = this.data.songObj;
      // 获取百分比，进度
      let scale = currentTime * 100000 / dt;
      currentTime = moment(currentTime*1000).format("mm:ss")
      // console.log("scale",scale)
      // console.log("currentTime", currentTime)
      this.setData({
        currentTime,
        currentWidth: scale
      })
    })

   
    // 音频开始播放，单位秒
     this.backgroundAudioManager.startTime=178;
      // 当歌曲自动播放结束时会触发
     this.backgroundAudioManager.onEnded(()=>{
       // console.log('onEnded');
       //切换播放下一首歌曲
       PubSub.publish('switchSong',"next");
     })


  },