微信小程序开发实战(28):播放、暂停、停止声音


使用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() }})
到顶部