zoukankan      html  css  js  c++  java
  • 微信小程序--录制音频,播放音频

    1.在pages创建一个main文件夹
    2.在main文件夹下创建一个miain.js文件。
    添加代码:

    const constant = require('../../utils/constant.js')
    const app = getApp()
    const recorderManager = wx.getRecorderManager()
    const innerAudioContext = wx.createInnerAudioContext()
    
    Page({
      data:{
        money:"0.00",
         userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
      },
      onLoad: function () {
        if (app.globalData.userInfo) {
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse){
          // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {
            
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else {
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
        }
      },
         getlocat:function(){
           wx.authorize({
             scope: 'scope.record',
             success() {
               // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
              const options = {
                duration: 600000,
                sampleRate: 44100,
                numberOfChannels: 1,
                encodeBitRate: 192000,
                format: 'mp3',
                frameSize: 50
              }
    
    
               recorderManager.start(options)
    
               recorderManager.onStart(() => {
                 console.log('recorder start')
               })
               recorderManager.onError((res) => {
                 console.log(res);
               })
             }
           })
          //  console.log(app)
         },
    
         strop:function(){
           recorderManager.stop()
           recorderManager.onStop((res) => {
           console.log('recorder stop', res)
           const { tempFilePath } = res
           console.log(tempFilePath) 
           this.tempFilePath = tempFilePath
           })
               },
         //播放声音
         play: function () {
           innerAudioContext.autoplay = true
           innerAudioContext.src = this.tempFilePath;
           innerAudioContext.onPlay(() => {
             console.log('开始播放')
           })
           innerAudioContext.onError((res) => {
             console.log(res.errMsg)
             console.log(res.errCode)
           })
    
         },
    })

    3.新建一个main.wxml文件
    添加代码如下

    <view>
        <button bindtap='getlocat'>测试</button>
         <button bindtap='strop'>测sss试</button>
         <button bindtap="play" >播放录音</button>
    </view>
  • 相关阅读:
    关于Tomcat的那些事儿(一)
    关于Spring的问题(一)
    关于Spring的@RequestBody的使用
    关于Eclipse切换所有分支
    关于使用BetterIntelliJ激活IntelliJ IDEA
    关于Elasticsearch的问题(一)
    关于Elasticsearch那些事
    关于LRU算法及Java实现
    自定义滚动条
    创建型模式之建造者模式
  • 原文地址:https://www.cnblogs.com/yu-hailong/p/8386567.html
Copyright © 2011-2022 走看看