Recorder用于html5录音 html5录音 mp3 wav ogg webm amr g711a g711u 格式

[Recorder](https://github.com/xiangyuecn/Recorder/) | RecordApp Basic: <a title="Stars" href="https://github.com/xiangyuecn/Recorder"><img src="https://img.shields.io/github/stars/xiangyuecn/Recorder?color=0b1&logo=github" alt="Stars"></a> <a title="Forks" href="https://github.com/xiangyuecn/Recorder"><img src="https://img.shields.io/github/forks/xiangyuecn/Recorder?color=0b1&logo=github" alt="Forks"></a> <a title="npm Version" href="https://www.npmjs.com/package/recorder-core"><img src="https://img.shields.io/npm/v/recorder-core?color=0b1&logo=npm" alt="npm Version"></a> <a title="License" href="https://github.com/xiangyuecn/Recorder/blob/master/LICENSE"><img src="https://img.shields.io/github/license/xiangyuecn/Recorder?color=0b1&logo=github" alt="License"></a> Traffic: <a title="npm Downloads" href="https://www.npmjs.com/package/recorder-core"><img src="https://img.shields.io/npm/dt/recorder-core?color=f60&logo=npm" alt="npm Downloads"></a> <a title="cnpm" href="https://npmmirror.com/package/recorder-core"><img src="https://img.shields.io/badge/-cnpm-555" alt="cnpm"></a><a title="cnpm" href="https://npmmirror.com/package/recorder-core"><img src="https://npmmirror.com/badge/d/recorder-core.svg" alt="cnpm"></a> <a title="JsDelivr CDN" href="https://www.jsdelivr.com/package/gh/xiangyuecn/Recorder"><img src="https://img.shields.io/badge/CDN-JsDelivr-f60" alt="JsDelivr CDN"></a> <a title="unpkg CDN" href="https://unpkg.com/recorder-core/"><img src="https://img.shields.io/badge/CDN-unpkg-f60" alt="unpkg CDN"></a> <a title="51LA" href="https://www.51.la/?20469973"><img src="https://img.shields.io/badge/51LA-available-0b1" alt="51LA"></a> **【[源GitHub仓库](https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample)】 | 【[Gitee镜像库](https://gitee.com/xiangyuecn/Recorder/tree/master/app-support-sample)】如果本文档图片没有显示，请手动切换到Gitee镜像库阅读文档。** # :open_book:RecordApp 最大限度的统一兼容PC、Android和IOS **因为从IOS 14.3开始，IOS已开始提供全面的`getUserMedia`支持，本兼容方案会随着IOS老版本的逐渐消失而渐渐失去价值；如果你不打算兼容老版本IOS，请直接使用Recorder，体验强大的H5录音，无需再使用RecordApp编写蹩脚的代码；本兼容方案将逐渐停止支持，并最终彻底被删除。** [在线测试](https://jiebian.life/web/h5/github/recordapp.aspx)，`RecordApp`源码在[/src/app-support](https://github.com/xiangyuecn/Recorder/tree/master/src/app-support)目录，当前`/app-support-sample`目录为参考配置的演示目录。`RecordApp`由`Recorder`提供基础支持，所以`Recorder`的源码也是属于`RecordApp`的一部分。 提供了一个vue版的demo，在 [/assets/demo-vue](https://github.com/xiangyuecn/Recorder/tree/master/assets/demo-vue) 目录中，[在线测试](https://jiebian.life/web/h5/github/recordapp.aspx?path=/assets/demo-vue/recordapp.html)。 # :open_book:快速使用 你可以通过阅读和运行[QuickStart.html](https://jiebian.life/web/h5/github/recordapp.aspx?path=/app-support-sample/QuickStart.html)文件来快速入门学习，你可以直接将 [/app-support-sample/QuickStart.html](https://github.com/xiangyuecn/Recorder/blob/master/app-support-sample/QuickStart.html) 文件copy 到你的(https)网站中，然后将变量PageSet_RecordAppWxApi改成你自己的后端API地址，无需其他文件，就能正常开始测试了，App内同样适用。 ## 【后端】可选 - 实现后端微信接口 RecordApp默认开启IOS端微信内的支持（可配置禁用支持），在IOS微信环境内，自动走微信JsSDK来录音，其他环境走Native、H5录音。 开启微信支持需要后端实现： - 签名接口：使用微信JsSDK需要后端提供JsSDK签名。 - 素材下载接口：JsSDK录音完成后需要后端服务器调用微信素材接口下载录音二进制数据。 你可以直接copy [app-support-sample/ios-weixin-config.js](https://github.com/xiangyuecn/Recorder/blob/master/app-support-sample/ios-weixin-config.js) 这个演示配置文件改改，提供后端接口后即可正常使用。 详细的接口文档和实现，请阅读下面的`Weixin(IOS-Weixin).Config`章节。 ## 【App】可选 - 实现App原生接口 RecordApp默认未开启App内原生录音支持，可开启后在App环境中将走Native录音，其他环境走Weixin、H5录音。 你可以直接copy [app-support-sample/native-config.js](https://github.com/xiangyuecn/Recorder/blob/master/app-support-sample/native-config.js) 这个演示配置文件改改，然后Android、IOS App内使用`demo_android`、`demo_ios`目录内的`RecordAppJsBridge.java`或`RecordAppJsBridge.swift`，即可正常使用。 详细的开启和实现，请阅读下面的`Native.Config`章节。 > 注：Android可以不实现App原生接口，仅IOS App实现原生接口；因为Android可以通过开启WebView的H5录音权限来进行H5录音，不过H5的麦克风获取似乎没有原生来的稳定，具体的H5权限开启请阅读Recorder首页文档中 `Android Hybrid App中录音示例` 这节。 ## 【集成步骤1】加载框架 **方式一**：使用script标签引入 ``` html <!-- 可选的独立配置文件，提供这些文件时可免去修改app.js源码。这些配置必须放到app.js之前。 【注意】：使用时应该使用自己编写的文件，而不是直接使用这个参考用的文件 --> <!-- 可选开启native支持的相关配置 --> <script src="app-support-sample/native-config.js"></script> <!-- 可选开启ios weixin支持的相关配置 --> <script src="app-support-sample/ios-weixin-config.js"></script> <!-- 在需要录音功能的页面引入`app-support/app.js`文件（src内的为源码、dist内的为压缩后的）即可。 app.js会自动加载实现文件、Recorder核心、编码引擎，应确保app.js内BaseFolder目录的正确性(参阅RecordAppBaseFolder)。 （如何避免自动加载：使用时可以把所有支持文件全部手动引入，或者压缩时可以把所有支持文件压缩到一起，会检测到组件已加载，就不会再进行自动加载；会自动默认加载哪些文件，请查阅app.js内所有Platform的paths配置） （**注意：需要在https等安全环境下才能进行录音**） --> <script src="src/app-support/app.js"></script> <!-- 可选的扩展支持项的引入 方法一：我们可以先直接引入Recorder核心，然后再引入扩展支持，这样会自动检测到组件已加载 <script src="src/recorder-core.js"></script> <script src="src/extensions/waveview.js"></script> 方法二：通过注入到Default实现的paths中让RecordApp去自动加载 <script> RecordApp.Platforms.Default.Config.paths.push({ url:"src/extensions/waveview.js" ,lazyBeforeStart:1 //开启延迟加载，在Start调用前任何时间进行加载都行 ,check:function(){return !Recorder.WaveView} //检测是否需要加载 }); </script> 方法三：直接修改app.js源码中RecordApp.Platforms.Default.Config.paths，添加需要加载的js --> ``` **方式二**：通过import/require引入 通过npm进行安装 `npm install recorder-core` ，如果直接clone的源码下面文件路径调整一下即可 [​](?Ref=ImportCode&Start) ``` javascript //可选的独立配置文件，提供这些文件时可免去修改app.js源码。这些配置文件需要自己编写，参考https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample 目录内的这两个演示用的配置文件代码。 //你可以直接copy /app-support-sample 目录内的两个演示配置文件改改后，就能正常使用了 import '你的配置文件目录/native-config.js' //可选开启native支持的相关配置 import '你的配置文