Recorder开启手机录音功能并将录音保存本地

让时光到此为止。

已于 2022-04-11 13:23:35 修改

阅读量2.1k

点赞数

分类专栏：应用场景文章标签： javascript vue.js

于 2022-04-11 13:02:46 首次发布

本文链接：https://blog.csdn.net/qq_35257117/article/details/124096687

版权

这个功能很简单其实，使用vue-Recorder插件就可以实现，但是如果我们只想要在某一页面中使用，不需要部署至全局的话，可以不通过package打包，只需要在cdn中引入recorder插件（这里需要注意版本）。

在 index.html中引入cdn 中的script代码：

  <script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/recorder-core.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/engine/mp3.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/engine/mp3-engine.js"></script>
  <script
    src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/extensions/frequency.histogram.view.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/src/extensions/lib.fft.js"></script>

webpack.base.config.js中写入，用于在页面打包时不打包recorder包：

externals: {
    'recorder': 'Recorder'
  },

在需要用到的页面中调用

var newRec = Recorder({
   
        type: "mp3",
        sampleRate: 16000,
        bitRate: 16, // mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
        onProcess(buffers, powerLevel, bufferDuration, bufferSampleRate) {
   
          // 可视化图形绘制
          wave.input(buff