折腾:
【已解决】web端html+js中如何调用麦克风获取用户语音输入说话
期间,想要搞清楚除了此处的:
mimeType: ‘audio/webm’,
之外,MediaRecorder还支持其他哪几种录音格式
js MediaRecorder audio type support
MediaRecorder.isTypeSupported – Web APIs | MDN
“audio/webm\;codecs=opus”,
MediaRecorder.mimeType – Web APIs | MDN
Record Audio and Video with MediaRecorder | Web | Google Developers
难道是:
直接指定
audio/wav
audio/mp3
audio/ogg
等等,自己想要支持的格式,就可以了?
All MIME types supported by MediaRecorder in Firefox and Chrome? – Stack Overflow
Can I use… Support tables for HTML5, CSS3, etc
ai/audio-recorder-polyfill: MediaRecorder polyfill to record audio in Edge and Safari
支持:Edge and Safari
看起来是:
Chrome默认只支持webm
Firefox默认只支持ogg
其他格式,只能自己去转码了
转换成想要的wav,mp3,amr,pcm等等
而上面这个插件实现了wav
去代码中检测Chrome支持哪些
结果是:
代码:
<code> console.log("Current browser: vendor=%s, platform=%s, userAgent=%s", navigator.vendor, navigator.platform, navigator.userAgent); const AUDIO_TYPE = { webm: { mimeType: 'audio/webm', suffix: ".webm" }, wav: { mimeType: 'audio/wav', suffix: ".wav" }, pcm: { mimeType: 'audio/pcm', suffix: ".pcm" }, ogg: { mimeType: 'audio/ogg', suffix: ".ogg" }, mp3: { mimeType: 'audio/mp3', suffix: ".mp3" } } console.log("[webm] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.webm.mimeType)); console.log("[wav] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.wav.mimeType)); console.log("[pcm] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.pcm.mimeType)); console.log("[ogg] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.ogg.mimeType)); console.log("[mp3] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.mp3.mimeType)); </code>
输出:
<code>Current browser: vendor=Google Inc., platform=MacIntel, userAgent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36 [webm] isTypeSupported=true main.js:189 [wav] isTypeSupported=false main.js:190 [pcm] isTypeSupported=false main.js:191 [ogg] isTypeSupported=false main.js:192 [mp3] isTypeSupported=false </code>
->Chrome只支持webm,不支持其他audio的格式。
再去Safari中测试试试
结果都没法执行
MediaRecorder.isTypeSupported
因为前面代码:
<code> function testAudioInput(){ console.log("testAudioInput"); navigator.mediaDevices .getUserMedia({ audio: true, video: false }) .then(onSuccessGetUserMedia) .catch(function (error) { console.log("Try get audio input error: %o", error); //DOMException: Permission denied }); } </code>
直接报错:
<code>Trying to call getUserMedia from an insecure document. testAudioInput — main.js:309 (匿名函数) — main.js:323 fire — jquery-1.11.1.js:3119 fireWith — jquery-1.11.1.js:3231 ready — jquery-1.11.1.js:3443 completed — jquery-1.11.1.js:3474 updateHighlight — main.js:330 </code>
即使去Safari中设置了:
麦克风-》访问其他网站时,允许
都还是不行。所以暂时放弃测试Safari。
再去试试:
<code> function justTestMediaRecorderIsTypeSupported(){ console.log("justTestMediaRecorderIsTypeSupported"); const AUDIO_TYPE = { webm: { mimeType: 'audio/webm', suffix: ".webm" }, wav: { mimeType: 'audio/wav', suffix: ".wav" }, pcm: { mimeType: 'audio/pcm', suffix: ".pcm" }, ogg: { mimeType: 'audio/ogg', suffix: ".ogg" }, mp3: { mimeType: 'audio/mp3', suffix: ".mp3" } } console.log("[webm] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.webm.mimeType)); console.log("[wav] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.wav.mimeType)); console.log("[pcm] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.pcm.mimeType)); console.log("[ogg] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.ogg.mimeType)); console.log("[mp3] isTypeSupported=%s", MediaRecorder.isTypeSupported(AUDIO_TYPE.mp3.mimeType)); } </code>
结果:
Safari报错:
<code>ReferenceError: Can't find variable: MediaRecorder </code>
所以看来Safari是真不支持:MediaRecorder
注:当前Safari版本 11.1 (13605.1.33.1.4)
【总结】
此处貌似是:
Chrome默认只支持webm
Firefox默认只支持ogg
Safari根本就不支持MediaRecorder
另外:navigator.mediaDevices.getUserMedia,也会报错-》无法测试
转载请注明:在路上 » 【已解决】js中MediaRecorder录音支持哪些音频格式