微信小程序开发之音乐播放器

学习目标：

• 利用小程序实现音乐播放器页面布局。
• 显示当前播放音乐的封面图、标题、作者的信息。
• 实现音乐的播放、暂停、上一曲、下一曲的功能。

---

学习内容：

1. 创建小程序工程项目
2. 音乐播放器页面布局与样式解读
3. 播放音乐的封面图、标题、作者的信息页面与数据绑定信息解读。
4. 小程序音频播放API解读
5. 播放器功能逻辑代码解读

---

参考文档：

音频播放API | 微信开放文档

---

参考代码：

布局页面index.wxml

<!--index.wxml-->
<view>
  <image class="cover-box" src="{{ cover }}" />
  <view class="title-box">{{ title }}</view>
  <view class="author-box">{{ author }}</view>
  <view class="control-box">
    <image bindtap="previousTap" class="control-button" src="/resources/button/previous.png" />
    <image wx:if="{{ isPlaying }}" bindtap="playTap" class="control-button" src="/resources/button/pause.png" />
    <image wx:if="{{ !isPlaying }}" bindtap="playTap" class="control-button" src="/resources/button/play.png" />
    <image bindtap="nextTap" class="control-button" src="/resources/button/next.png" />
  </view>
</view>

样式文件index.wxss

/**index.wxss**/
.cover-box {
  width: 100%;
  height: 200px;
}

.title-box {
  text-align: center;
  padding: 20px;
}

.author-box {
  text-align: center;
}

.control-box {
  text-align: center;
  padding-top: 80px;
}

.control-button {
  width: 40px;
  height: 40px;
  padding: 20px;
}

函数实现index.js

// index.js
// 创建音乐播放器实例
const audioCtx = wx.createInnerAudioContext()

Page({
  data: {
    cover: '',  // 背景图
    title: '',  // 标题
    author: '', // 作者
    isPlaying: false, // 播放状态
    index: 0, // 当前索引
    dataArray: [  // 乐曲信息
      {
        "audio": '/resources/audio/audio1.mp3',
        "cover": '/resources/cover/cover1.jpg',
        "title": '收藏每一寸清风朗月，憧憬每一个想要的明天',
        "author": 'Hildegard von Bingen',
      },
      {
        "audio": '/resources/audio/audio2.mp3',
        "cover": '/resources/cover/cover2.jpg',
        "title": '周末的晚霞，别有一番风景',
        "author": 'Guillaume Dufay',
      },
      {
        "audio": '/resources/audio/audio3.mp3',
        "cover": '/resources/cover/cover3.jpg',
        "title": '想一千次，不如去做一次',
        "author": 'Orlande de Lassus',
      },
      {
        "audio": 'http://wpcd.net/mp/audio/audio1.mp3',
        "cover": 'http://wpcd.net/mp/cover/cover1.jpg',
        "title": '网络资源',
        "author": '编程实验室',
      },
    ],
  },

  // 设置页面元素
  setupUI() {
    var tempData = this.data.dataArray[this.data.index]
    this.setData({
      cover:tempData['cover'],
      title:tempData['title'],
      author:tempData['author'],
    })
    audioCtx.src = tempData['audio']
  },

  // 上一首
  previousTap() {
    let index = this.data.index
    if (index == 0) {
      index = this.data.dataArray.length - 1
    } else {
      index -= 1
    }
    this.setData({
      index:index,
    })
    this.setupUI()
    audioCtx.play()
  },

  // 播放
  playTap() {
    if (this.data.isPlaying) {
      audioCtx.pause()
    } else {
      audioCtx.play()
    }
  },

  // 下一首
  nextTap() {
    let index = this.data.index
    if (index == this.data.dataArray.length - 1) {
      index = 0
    } else {
      index += 1
    }
    this.setData({
      index:index,
    })
    this.setupUI()
    audioCtx.play()
  },

  // 页面加载
  onLoad() {
    this.setupUI()
    // 开始播放事件监听
    audioCtx.onPlay(() => {
      this.setData({
        isPlaying: true
      })
    })
    // 暂停事件监听
    audioCtx.onPause(() => {
      this.setData({
        isPlaying: false
      })
    })
    // 停止事件监听
    audioCtx.onStop(() => {
      console.log('停止')
      this.nextTap()
    })
  },
})

运行效果