微信小程序——简易的音频播放和暂停

 以下是.wxml代码

<view>
  <button bindtap="tapPlay" type="primary" size="mini">播放</button>
  <button bindtap="tapPause" type="default" size="mini">暂停</button>
</view> 
<!-- 做一个进度条，通过监听播放来实现时时进度条 -->
<slider min="0" max="{{time}}" disabled="true" value="{{value}}" show-value />

以下是.js代码

// pages/music/music.js
// 第一步:创建音频实例化
const audio = wx.createInnerAudioContext()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 保存音频播放进度
    value: "",
    // 保存音频总时长
    time: 0
  },
  // 播放音乐
  tapPlay() {
    audio.play()
    // onTimeUpdate:监听音频播放进度更新事件，只有小程序在前台时会回调。
    audio.onTimeUpdate(() => {
      // 音频总时长audio.duration
      // 音频播放进度audio.currentTime
      //使用Math.floor()内置函数取整
      this.setData({
        value: Math.floor(audio.currentTime),
        time: Math.floor(audio.duration)
      })
    })
  },
  // 暂停音乐
  tapPause() {
    audio.pause()
    console.log('暂停音乐');
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 是否自动播放
    audio.autoplay = false;
    // mp3地址
    audio.src = '/image/多远都要在一起.mp3';

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

以下是.wxss代码

button{
  margin-left: 40rpx;
}