微信小程序开发实战（28）：播放、暂停、停止声音

蒙娜丽宁

发布于 2020-09-07 17:03:01

2.6K0

发布于 2020-09-07 17:03:01

使用wx.playVoice方法可以播放指定的音频文件，该方法需要设置一个filePath属性，用来指定音频文件的路径。使用wx.pauseVoice方法可以暂停当前音频文件的播放，暂停后，再次调用wx.playVoice方法，会从暂停的位置继续播放。如果要想从头播放音频文件，需要下调用wx.stopVoice方法停止音频文件的播放，再次调用wx.playVoice方法就会从头开始播放音频文件。小程序只允许同时播放一个音频文件，如果播放当前音频时，前一个音频正在播放，将终止前一个音频的播放。

下面的代码改进了上一节的程序，在停止录音后，可以播放、暂停和停止录制的音频。

index.wxml

<view style="margin:20px">
  <button  bindtap="startRecord">开始录音</button>
  <button style = "margin-top:10px" bindtap="stopRecord">停止录音</button>
  <button style = "margin-top:10px" bindtap="playVoice">播放录音</button>
  <button style = "margin-top:10px" bindtap="pauseVoice">暂停播放</button>
  <button style = "margin-top:10px" bindtap="stopVoice">停止播放</button>
</view>

index.js

var app = getApp()
Page({
  data: {
    recording: false,
    playing: false,
    hasRecord: false,
  },
  //开始录音
  startRecord: function () {
    var that = this;
    wx.startRecord({
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          hasRecord: true,
          tempFilePath: res.tempFilePath,
        })
      },
      complete: function () {
        that.setData({ recording: false })
      }
    })
  },
  //  停止录音
  stopRecord: function () {
    var that = this;
    console.log(this.data.tempFilePath);
    wx.stopRecord({
      success: function () {
        console.log('stop record success')
        that.setData({
          recording: false,
          hasRecord: false,
        })
      }
    })
  },
  //  开始播放录制的音频
  playVoice: function () {
    var that = this;
    wx.playVoice({
      filePath: this.data.tempFilePath,
      success: function () {
        console.log('play voice finished')
        that.setData({
          playing: false,
        })
      }
    })
  },
   //  暂停播放录制的音频
  pauseVoice: function () {
    wx.pauseVoice()
    this.setData({
      playing: false
    })
  },
  //  停止播放录制的音频
  stopVoice: function () {
    this.setData({
      playing: false,
 
    })
    wx.stopVoice()
  }
})

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-09-03，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序