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

[xiangyuecn]

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

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

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

---

[coderabbit]

first mark

[ihidchaos]

secong mark

[ihidchaos]

@ihidchaos second

[logicr]

third mark

[w292614191]

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

[xiangyuecn]

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

[ddllzz]

感谢，已经用上了

[shell314]

Star 一波

[Huelse]

star +1

[Exia]

很赞

[xnode]

mark++!!!!

[xiangyuecn]

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

[dearxe2v]

帮顶

[ThirdParty]

我再来一个 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]

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

[rookiebulls]

赞一个

[ouou8]

赞一个

[sailing0505]

看看