在web应用程序上本地保存数据时选择音频格式
我有一个网络应用程序，从用户那里获取一些音频记录输入。还有一个按钮可以在本地保存为音频文件。我得到的结果文件是ogg-opus格式的。具体来说，当我使用file命令时，我在终端中得到了这样的信息：
MyMac$ file Clip.wav
Clip.wav: Ogg data, Opus audio,
MyMac$ 我可以用VLC检查录音是否正常。另一方面，我不能像通常使用mp3、m4a或wav文件那样播放重放文件。
MyMac$ afplay Clip.wav
Error: AudioFileOpen failed ('typ?')
MyMac$ 下面是我的相关代码：
if (navigator.mediaDevices.getUserMedia) {
// getUserMedia is supported.
const constraints = { audio: true };
let chunks = [];
let onSuccess = function(stream) {
const mediaRecorder = new MediaRecorder(stream);
visualize(stream);
........
mediaRecorder.onstop = function(e) {
........
audio.setAttribute('controls', '');
........
audio.controls = true;
const blob = new Blob(chunks, { 'type' : 'audio/wav;codecs=0' });
chunks = [];
........
upload.addEventListener("click",
function(event) {loadToServer(blob)})
........
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
}
let onError = function(err) {
console.log('The following error occured: ' + err);
}
navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);
} else {
console.log('getUserMedia not supported on your browser!');
}我想知道如何修改我的代码，以便生成一个正确的wav文件，甚至是mp3。
注意：
我已经尝试修改了这一行代码：
const blob = new Blob(chunks, { 'type' : 'audio/wav;codecs=0' });在不同的方面，但都没有任何影响。
回答 1
Stack Overflow用户
发布于 2021-07-26 09:31:18
为了指定录音的mimeType，需要在MediaRecorder开始录音之前告诉MediaRecorder您喜欢哪个mimeType。
- const mediaRecorder = new MediaRecorder(stream);
+ const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });不幸的是，任何浏览器都不支持audio/wav。当尝试上面的片段时，您将得到一个错误。
因为我也需要wav录音，所以我构建了一个库来添加这个功能。它被称为可扩展媒体记录器，因为它可以与您喜欢的任何其他(音频)编解码器一起扩展。
如果您不想使用第三方库并保持浏览器使用它最喜欢的编解码器，您可以像这样保存您的文件，以便获得一个具有正确后缀的有效文件。
- const blob = new Blob(chunks, { 'type' : 'audio/wav;codecs=0' });
+ const blob = new Blob(chunks, { 'type' : mediaRecorder.mimeType });后缀将是类型的一部分，在斜杠之后和可能的分号之前。
下面是一个完整的HTML文档的例子，它使用jspm加载可扩展的媒体记录器，而不需要绑定器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<button id="start" disabled>start</button>
<button id="stop" disabled>stop</button>
<script type="module">
import { MediaRecorder, register } from 'https://jspm.dev/extendable-media-recorder';
import { connect } from 'https://jspm.dev/extendable-media-recorder-wav-encoder';
const $start = document.getElementById('start');
const $stop = document.getElementById('stop');
await register(await connect());
const chunks = [];
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecoder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
mediaRecoder.addEventListener('dataavailable', ({ data }) => {
chunks.push(data);
});
mediaRecoder.addEventListener('stop', ({ data }) => {
const blob = new Blob(chunks, { type : mediaRecoder.mimeType });
console.log(blob);
});
$start.addEventListener('click', () => {
mediaRecoder.start();
$stop.addEventListener('click', () => {
$stop.disabled = true;
mediaRecoder.stop();
});
$start.disabled = true;
$stop.disabled = false;
});
$start.disabled = false;
</script>
</body>
</html>https://stackoverflow.com/questions/68526556
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号