H5 网页录音功能，支持 pc、android，新兼容了 ios，欢迎 star

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2077 天前的主题，其中的信息可能已经有所发展或是发生改变。

非黑即白，哪有即是黑的又是白的，ios 看起来像是怪胎，既支持(Safari)又不支持(WKWebView)，火狐和 ie6 都比他可爱。并不算是兼容 IOS，可以说是为苹果手机另外写了一套代码，IOS 上增加微信浏览器、小程序 web-view 的录音支持。

本来我是拒绝兼容的，但后来还是做了兼容处理，这几天就把它开源了。

新兼容 IOS 微信的 GitHub 代码： https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample

iOS

兼容

录音

代码

18 条回复 • 2019-04-25 08:30:36 +08:00

coderabbit

2019-04-24 08:08:58 +08:00 via Android

first mark

ihidchaos

2019-04-24 08:11:12 +08:00 via Android

secong mark

ihidchaos

2019-04-24 08:12:01 +08:00 via Android

@ihidchaos second

logicr

2019-04-24 08:41:59 +08:00 via Android

third mark

w292614191

2019-04-24 08:52:19 +08:00

我是用微信 Js-sdk 实现的，只能录制 60 秒。到 58 秒，我就 stop 了。

xiangyuecn

2019-04-24 09:00:00 +08:00

@w292614191 对哦，我忘记了微信限制 60 秒了，晚点我在程序里面做一下限制

ddllzz

2019-04-24 09:17:43 +08:00 via Android

感谢，已经用上了

shell314

2019-04-24 10:49:24 +08:00 via Android

Star 一波

Huelse

2019-04-24 11:18:49 +08:00

star +1

Exia

2019-04-24 15:00:13 +08:00

很赞

xnode

2019-04-24 15:04:42 +08:00

mark++!!!!

xiangyuecn

2019-04-24 15:10:14 +08:00

@w292614191 #5 @xiangyuecn #6 已经没有 1 分钟限制了，想录几秒录几秒。但录久了编码会慢的要死😂

dearxe2v

2019-04-24 16:07:55 +08:00

帮顶

ThirdParty

2019-04-24 17:36:15 +08:00

我再来一个 H5 语音转文字和文字转语音, 是 w3c 定义的标准，由浏览器实现

```
<form action="">
<input type="text" />
<select>
</select>
<input type="submit" />
</form>
<div class="output"></div>
<script>
window.onload = function () {

// var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
// //var recognition = new SpeechRecognition();
// var recognition = new webkitSpeechRecognition();
// //var speechRecognitionList = new SpeechGrammarList();
// var speechRecognitionList = new webkitSpeechGrammarList();
// speechRecognitionList.addFromString(grammar, 1);
// recognition.grammars = speechRecognitionList;
// //recognition.continuous = false;
// recognition.lang = 'en-US';
// recognition.interimResults = false;
// recognition.maxAlternatives = 1;

// var diagnostic = document.querySelector('.output');
// var bg = document.querySelector('html');

// document.body.onclick = function () {
// recognition.start();
// console.log('Ready to receive a color command.');
// }

// recognition.onresult = function (event) {
// var color = event.results[0][0].transcript;
// diagnostic.textContent = 'Result received: ' + color;
// bg.style.backgroundColor = color;
// }

var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');

function populateVoiceList() {
voices = synth.getVoices();

for (i = 0; i < voices.length; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' [' + voices[i].lang + '] ';

if (voices[i].default) {
option.textContent += ' DEFAULT';
}

option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = function (event) {
event.preventDefault();

var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for (i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
utterThis.voice = voices[i];
}
}
synth.speak(utterThis);
inputTxt.blur();
}
};
</script>
```

xiangyuecn

2019-04-24 18:46:20 +08:00

@ThirdParty 语音合成看起来靠谱点，语音识别嘛... 🤣 推荐一波：用 Recorder 来录音，然后把音频发送给第三方接口进行识别，简单可靠准确率奇高😎

rookiebulls

2019-04-24 18:47:28 +08:00 via iPhone

赞一个

ouou8

2019-04-24 19:37:21 +08:00

赞一个

sailing0505

2019-04-25 08:30:36 +08:00 via Android

看看