微信小程序入门级教程-07

前言

  上节课我们讲述了小程序中的常用交互操作，也就是分享，收藏功能的制作，在本节课里面，我们将开始讲解文章详情中的音乐播放操作。在API中，微信给我们提供了详细的播放器操作，我们在这里将主要讲解常用的操作。

目录

https://www.jianshu.com/p/9c9b555b52e8

---

音乐播放器的入口和模拟器效果图如下：

模拟器效果

注意：在真机上的效果图并非如此，该播放器是播放器总控开关，真机效果图如下：

真机效果图1 真机效果图2

实现步骤

  在本节课中，对于之前页面做了一丝丝优化，就是优化了收藏和分享的按钮，在上面的效果图中可以看出来。而对于本节课的音乐播放器，我们在文章详情中增加了一个播放按钮，在上图中也可以看到，就在文章详情的图片中心位置，有一个播放的按钮，代码如下：

<image class="banner" src="{{articles.thumbnail}}" alt="slt">
  <image catchtap="onMusic" class="music" src="{{isPlaying ? '../../images/icon/music-stop.png' : '../../images/icon/music-start.png'}}"></image>
</image>

  在上述代码中，只黏贴了文章详情页面的头图和内部的播放按钮，其余代码和之前课程中的没有变化，这里就不重复黏贴代码了。

  在这里，我们在js中声明了一个变量isPlaying，页面的是播放按钮还是暂停按钮，都取决于这个变量的值，它的值为true[已播放状态]或者false[未播放状态]，所以页面中的按钮可以动态的根据js来控制了。js代码如下所示：

// data数据部分新增播放状态变量isPlaying
data: {
`articles: {},
`isPlaying: false
}

// 新增播放按钮的点击事件
onMusic: function(event){
  let that = this;

  // 得到播放状态的值
  let isPlaying = this.data.isPlaying;
  
  // 根据状态值来控制是何操作
  if(!isPlaying){
   // 未播放状态下，点击按钮执行播放状态
   // 知识点1：播放音频 wx.playBackgroundAudio({音频路径，音频标题，音频封面路径})
   // 知识点2：小程序大小限制为2M，所以不可能让我们把视频和音频等大文件放在本地，
   // 所以这里的路径统一为网络路径，切记，否则配置不生效！
   // 知识点3：暂停播放 wx.pauseBackgroundAudio();
    wx.playBackgroundAudio({
      dataUrl: "http://up.mcyt.net/?down/46631.mp3",
      title: "九张机-锦零",
      coverImgUrl: "http://oeff2vktt.bkt.clouddn.com/image/66.jpg"
    })
    // 修改播放状态
    this.setData({
      isPlaying: true
    })
  }else{
    // 播放状态下，点击按钮执行暂停状态
    wx.pauseBackgroundAudio();
    // 修改播放状态
    this.setData({
      isPlaying: false
    })
  }
}

注意点：在这里，我们这么多文章都有音频，所以在播放音频这里写死路径不太好，所以我们要去修改一下文章数据，在我们之前建立的talk-data.js中，把每篇文章都添加一个音频的配置，如下所示：

articleList: [{
  id: 1,
  level: 1,
  title: "寒战",
  avatar: "/images/avatar/avatar-04.jpg",
  name: "游子女°",
  thumbnail: "/images/thumbnail/thumbnail04.jpg",
  content: "《寒战》是银都机构有限公司、万诱引力丁有限公司、安乐影片有限公司" +
  "联合出品的动作电影，由梁乐民、陆剑青执导，郭富城、梁家辉、杨采妮领衔主演。该" +
  "片讲述了在新时代背景下，一辆价值不菲的警察冲锋车被劫持，随之整个香港都陷入到" +
  "安全危机，警匪之间展开高智商较量。",
  views: 637,
  likes: 436,
  date: "2018/03/12 14:28:38",
  canLike: true,
  music: {
    dataUrl: "http://up.mcyt.net/?down/37626.mp3",
    title: "刚好遇见你-冯提莫",
    coverImgUrl: "https://tvax2.sinaimg.cn/crop.0.0.1125.1125.180/63ae8f44ly8fr1iybrbowj20v90v9q4o.jpg"
  }，
  {
    ...其余文章
  }
}

在修改了本地的文章数据后，我们修改一下talk-details，如下所示：

onMusic: function(event){
  let that = this;
  let isPlaying = this.data.isPlaying;
  if(!isPlaying){
    // 此处就可以动态的获取当前文章的music属性中的数据，
    // 从而动态播放不同文章的不同音频资源
    wx.playBackgroundAudio(that.data.articles.music)
    this.setData({
      isPlaying: true
    })
   }else{
    wx.pauseBackgroundAudio();
    this.setData({
      isPlaying: false
    })
  }
}

总结

  对于本节课中讲解的音频，我们使用了播放和暂停两个功能，而且音频做的使用粗糙和带有部分的问题，对于这些问题，在下节课中，我将逐一为大家讲解，如何优化和解决常见的音频问题。谢谢大家~

项目源码：demigod-liu / douban-movies

说明

原创作品，禁止转载和伪原创，违者必究！