📃 录音、上传并播放

使用 uni.getRecorderManager 进行录制

通过 uni.getRecorderManager 获取全局唯一的录音管理器 recorderManager。

示例：

<template>
  <view>
    <button @tap="startRecord">开始录音</button>
    <button @tap="endRecord">停止录音</button>
    <button @tap="playVoice">播放录音</button>
  </view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
  data: {
    voicePath: ''
  },
  onLoad() {
    recorderManager.onStop(function (res) {
      console.log('recorder stop' + JSON.stringify(res));
      let path = res.tempFilePath; // 临时文件路径
      // 上传的处理...
    });
  },
  methods: {
    startRecord() {
      console.log('开始录音');
      recorderManager.start({format: 'mp3', duration: 60000, sampleRate: 48000, encodeBitRate: 128000});
    },
    endRecord() {
      console.log('录音结束');
      recorderManager.stop();
    },
    playVoice() {
      console.log('播放录音');
      if (this.voicePath) {
        innerAudioContext.src = this.voicePath;
        innerAudioContext.play();
      }
    }
  }
}
</script>

比起 plus.audio.getRecorder 在安卓端录制的是 amr 格式，通过 uni.getRecorderManager 进行录制的音频可以指定为 aac/mp3 格式，更有利于网页中播放，而不需要额外的转码

方法与事件

方法

• start options 开始录音
• pause 暂停录音
• resume 继续录音
• stop 停止录音

事件

• onStart 录音开始事件
• onPause 录音暂停事件
• onStop 录音停止事件，会回调文件地址
• onFrameRecorded 已录制完指定帧大小的文件，会回调录音分片结果数据。如果设置了 frameSize ，则会回调此事件
• onError 录音错误事件, 会回调错误信息

:::info 开发者工具上的录音文件与移动端格式不同，暂时只可在工具上进行播放调试，无法直接播放或者在客户端上播放 :::

开始录音

使用 start 方法开始录音, 同时触发 onStart 事件, start 方法接收一个 options 参数, 用于配置录音设备:

其中，采样率和码率有一定要求，具体有效值如下：

结束录音

使用 stop 方法结束录音, 同时触发 onStop 事件, onStop 可获得录音文件的临时路径：

recorderManager.onStop(res => {
  console.log('recorder stop' + JSON.stringify(res));
  this.voicePath = res.tempFilePath;
});

audio 组件

uni-app 内置音频组件 audio，使用方式如下：

<template lang="pug">
.content
  audio#audio(controls
    src='/static/music.jpg'
    poster='致爱丽丝'
    name='暂无'
    author='/static/music.mp3'
    @play="play"
    @pause="pause"
    @ended="ended"
  )
</template>

audio 组件的属性有：

• src 要播放音频的资源地址，本地路径或网络路径
• loop 默认为false，是否循环播放
• controls 默认为false，是否显示默认控件
• poster 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
• name 未知音频 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
• author 未知作者 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效

audio 组件的事件有：

• error 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
• play 当开始/继续播放时触发play事件
• pause 当暂停播放时触发 pause 事件
• timeupdate 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
• ended 当播放到末尾时触发 ended 事件

音频组件上下文

通过 uni.createInnerAudioContext() 创建并返回内部 audio 上下文 innerAudioContext 对象。

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';
innerAudioContext.onPlay(() => {
  console.log('开始播放');
});
innerAudioContext.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});

innerAudioContext 对象的属性列表

innerAudioContext 对象的方法列表

innerAudioContext 对象的事件列表

背景音乐上下文

通过 uni.getBackgroundAudioManager() 获取全局唯一的背景音频管理器 backgroundAudioManager。

const bgAudioMannager = uni.getBackgroundAudioManager();
bgAudioMannager.title = '致爱丽丝';
bgAudioMannager.singer = '暂无';
bgAudioMannager.coverImgUrl = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg';
bgAudioMannager.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';

backgroundAudioManager 对象的属性列表

backgroundAudioManager 对象的方法列表

backgroundAudioManager 对象的事件列表

通过 plus.audio.getRecorder 获取录音设备

以下示例演示通过调用录音设备进行音频录制并上传到OSS，先上代码：

<template>
    <view>
    <view class="">
      <button type="primary" @click="startRecord">开始录音</button>
    </view>
    <view class="">
      <button type="primary" @click="stopRecord">结束录音</button>
    </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                r: null
            };
        },
    created () {
      this.r = plus.audio.getRecorder();
      console.log(this.r.supportedFormats);
    },
    methods: {
      startRecord() {
        if ( this.r == null ) {
          console.log( "Device not ready!" );
          return;
        }
        let vm = this
        this.r.record({filename:"_doc/audio/"}, function (path) {
          console.log( "Audio record success :" + path ); // 临时文件路径
          // 上传的处理...
        }, function (e) {
          console.log( "Audio record failed: " + e.message );
        });
      },
      stopRecord() {
        this.r.stop();
      }
    }
    }
</script>

以上方式录制的音频, 不同设备在格式上有所不同：

• Android - 2.2+ (支持): Android平台支持”amr”、”3gp”格式，默认为”amr”。
• iOS - 4.5+ (支持): iOS平台支持”wav”、”aac”、”amr”格式，默认为”wav”。

获取录音对象

语法格式：

AudioRecorder plus.audio.getRecorder();

AudioRecorder对象

interface AudioRecorder {
    readonly attribute String[] supportedSamplerates;
    readonly attribute String[] supportedFormats;
    function record( option, successCB, errorCB );
    function stop();
}

属性：

• supportedSamplerates: 数组，支持的录音采样率，字符串格式为“采样频率”，如“8000”；其单位为Hz。
• supportedFormats: 数组，支持的录音文件的格式，字符串格式为文件格式后缀名，如”mp3”、”aac”、”wav”等 (不同设备支持程度不一致, 上面有说到)

方法：

• record: 调用设备麦克风进行录音操作
• stop: 结束录音操作

录音

通过 record 方法调用设备麦克风进行录音操作

recorder.record( option, successCB, errorCB );

选项

option 为 AudioRecorderStyles 对象, 包括如下属性：

• channels: (String 类型 )录音声道, 可取值： “mono” - 单声道录音； “stereo” - 立体声道录音。 默认值为”mono”。
• filename: (String 类型 )保存录音文件的路径, 可设置具体文件名，也可只设置路径，如果以“/”结尾则表明是路径，文件名由录音程序自动生成。 如未设置则使用默认目录生成随机文件名称，默认目录为应用%APPID%下的documents目录。
• samplerate: (String 类型 )录音文件的采样率, 需通过supportedSamplerates属性获取设备支持的采样率，若设置无效的值，则使用系统默认的采样率。
• format: (String 类型 )录音文件的格式, 需通过supportedFormats属性获取设备支持的录音格式，若设置无效的值，则使用系统默认的录音格式。

回调

• successCB: (RecordSuccessCallback) 必选 录音操作成功的回调函数, 接收一个参数 recordFile, 为录音成功后的文件临时路径
• errorCB: (AudioErrorCallback) 可选 录音操作失败的回调函数, 接收一个参数 error, 为录音失败后的错误

:::warning 录音对象是设备的独占资源，在同一时间仅可执行一个录音操作，否则可能会导致操作失败。 :::

参考资料

• uni-app record-manager
• uni-app audio组件
• uni-app audio-context
• uni-app background-audio-manager
• H5+ audio