我们可以在浏览器端，通过挪用 JS 原生的 API，将语音转换为文字，实现语音输入的效果。思路是：

录制一段音频；

将音频转换为 URL 格局的字符串（base64 位编码）；

挪用讯飞开放接口，将 base64 位编码转换为文本。

这篇文章实现前两步，将音频转换为 URL 格局的字符串（base64 位编码）。

这里将会用到于媒体录制相关的诸多 API，先将其列出：

MediaDevices （MediaDevices 使用要领）

MediaDevices 接口供给访谒连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。

MediaDevices.getUserMedia() 会提示用户给以使用媒体输入的许可。

我们将要访谒浏览器的麦克风。若浏览器撑持 getUserMedia，就可以访谒麦克风权限。
MediaDevices.getUserMedia()，返回一个 Promise 东西，获得麦克风许可后，会 resolve 回调一个 MediaStream 东西。MediaStream 包罗音频轨道的输入。

MediaRecorder（MediaRecorder 使用要领）

MediaRecorder() 结构函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 东西。

MediaStream 是将要录制的流. 它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流。

实例化的 MediaRecorder 东西，供给媒体录制的接口

MediaRecorder() 结构函数接受 MediaDevices.getUserMedia() resolve 回调的 MediaStream， 作为将要录制的流。并且可以指定 MIMEType 类型和音频比特率。
实例化该结构函数后，可以读取录制东西确当前状态，并按照状态选择登科、暂停和遏制。
MediaRecorder.stop()要领会出发遏制录制，同时触发 dataavailable 事件，返回一个存储 Blob 内容的录制数据，之后不再记录

Blob （Blob 使用要领）

Blob() 结构函数返回一个新的 Blob 东西。

Blob 东西暗示一个不成变、原始数据的类文件东西。

File 接口基于Blob，接受 Blob 东西的API也被列在 File 文档中。

Blob() 结构函数接受 MediaRecorder.ondataavailable() 要领返回的 Blob 类型的录制数据，并指定音频格局。
实例化该结构函数后，新创建一个不成变、原始数据的类文件东西。

URL.createObjectURL()（URL.createObjectURL() 使用要领）

URL.createObjectURL() 静态要领会创建一个 DOMString，此中包罗一个暗示参数中给出的东西的URL。

这个新的 URL 东西暗示指定的 File 东西或 Blob 东西。

URL.createObjectURL() 接受一个 Blob 东西，创建一个 DomString，该字符串作为 <audio> 元素的播放地点。

FileReader （FileReader 使用要领）

FileReader() 结构函数去创建一个新的 FileReader 东西。

readAsDataURL() 要领会读取指定的 Blob 或 File 东西。

读取操纵完成的时候，readyState 会酿成已完成 DONE，并触发 loadend 事件，同时 result 属性将包罗一个 data:URL 格局的字符串（base64 编码）以暗示所读取文件的内容。

实例化 FileReader() 结构函数，新创建一个 FileReader 东西。
使用 readAsDataURL() 要领，接受一个 Blob 东西，读取完成后，触发 onload 要领，同时 result 属性将包罗一个data:URL格局的字符串（base64 编码）

使用 Angular 将核心代码安排如下：

QaComponent

<div id="voiceIcon" class="iconfont icon-voice" (click)="showVoice = !showVoice" [title]="showVoice ? '遏制' : '录制'"></div> <!-- 语音录制动画 --> <app-voice [show]="showVoice"></app-voice> showVoice = false; // 录音动画显示隐藏 /** * 初始化完组件视图及其子视图之后，获取麦克风权限 */ ngAfterViewInit(): void { this.mediaRecorder(); } /** * 将语音文件转换为 base64 的字符串编码 */ mediaRecorder() { const voiceIcon = document.getElementById('voiceIcon') as HTMLDivElement; // 在用户通过提示允许的情况下，打开系统上的麦克风 if (navigator.mediaDevices.getUserMedia) { let chunks = []; const constraints = { audio: true }; // 指定请求的媒体类型 navigator.mediaDevices.getUserMedia(constraints).then( stream => { // 告成后会resolve回调一个 MediaStream 东西,包罗音频轨道的输入。 console.log('授权告成！'); const options = { audioBitsPerSecond: 22050, // 音频的比特率 }; // MediaRecorder 结构函数实例化的 mediaRecorder 东西是用于媒体录制的接口 // @ts-ignore const mediaRecorder = new MediaRecorder(stream, options); voiceIcon.onclick = () => { // 录制东西 MediaRecorder 确当前状态(闲置中 inactive,录制中 recording 或者暂停 paused) if (mediaRecorder.state === 'recording') { // 遏制录制. 同时触发dataavailable事件，之后不再记录 mediaRecorder.stop(); console.log('录音结束'); } else { // 开始录制媒体 mediaRecorder.start(); console.log('录音中...'); } console.log('录音器状态：', mediaRecorder.state); }; mediaRecorder.ondataavailable = (e: { data: any }) => { // 返回一个存储Blob内容的录制数据，在事件的 data 属性中会供给一个可用的 Blob 东西 chunks.push(e.data); }; mediaRecorder.onstop = () => { // MIME类型 为 audio/wav // 实例化 Blob 结构函数，返回的 blob 东西暗示一个不成变、原始数据的类文件东西 const blob = new Blob(chunks, { type: 'audio/wav; codecs=opus' }); chunks = []; // 如果作为音频播放，audioURL 是 <audio>元素的地点 const audioURL = window.URL.createObjectURL(blob); const reader = new FileReader(); // 取指定的 Blob 或 File 东西，，读取操纵完成的时候，readyState 会酿成已完成DONE reader.readAsDataURL(blob); reader.onload = () => { // result 属性将包罗一个data:URL格局的字符串（base64编码）以暗示所读取文件的内容 console.log(reader.result); // reader.result 为 base64 字符串编码 }; }; }, () => { console.error('授权掉败！'); }, ); } else { console.error('浏览器不撑持 getUserMedia'); } }