微信小程序云开发录音与播放页面代码

以下是微信小程序云开发录音与播放页面的代码示例：

index.wxml:

<!-- 录音按钮 -->
<button bindtouchstart="startRecord" bindtouchend="stopRecord">按住录音</button>

<!-- 播放录音按钮 -->
<button bindtap="playRecord">播放录音</button>

index.js:

const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()

Page({
  data: {
    tempFilePath: ''
  },

  // 开始录音
  startRecord() {
    recorderManager.start({
      format: 'mp3'
    })
  },

  // 停止录音
  stopRecord() {
    recorderManager.stop()
    recorderManager.onStop(res => {
      console.log('录音文件路径：', res.tempFilePath)
      this.setData({
        tempFilePath: res.tempFilePath
      })
    })
  },

  // 播放录音
  playRecord() {
    innerAudioContext.src = this.data.tempFilePath
    innerAudioContext.play()
  }
})

在上述代码中，我们首先使用 `wx.getRecorderManager()` 获取录音管理器，并使用 `recorderManager.start()` 开始录音，使用 `recorderManager.stop()` 停止录音，并在 `recorderManager.onStop()` 中获取录音文件的路径。

接着，我们使用 `wx.createInnerAudioContext()` 创建一个内部音频播放器，并使用 `innerAudioContext.play()` 播放录音文件。

需要注意的是，由于涉及到录音和播放，需要在小程序的 `app.json` 文件中设置相应的权限：

{
  "permission": {
    "scope.record": {
      "desc": "用于录音"
    },
    "scope.writePhotosAlbum": {
      "desc": "用于保存录音文件"
    }
  }
}

同时，还需要在小程序的云开发控制台中开通云存储服务，并在 `project.config.json` 文件中添加以下配置：

{
  "cloudfunctionRoot": "./functions",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true,
    "newFeature": true,
    "coverView": true,
    "nodeModules": true,
    "autoAudits": false,
    "useMultiFrameRuntime": true,
    "enablePullDownRefresh": true,
    "enableShareAppMessage": true,
    "enableShareTimeline": true,
    "enablePageScroll": true,
    "enablePageReachBottom": true,
    "enablePageShare": true
  },
  "packOptions": {
    "ignore": []
  },
  "compileType": "miniprogram",
  "appid": "your appid",
  "projectname": "your project name",
  "miniprogramRoot": "./"
}

以上代码中的 `your appid` 和 `your project name` 需要替换为真实的小程序 appid 和项目名称。