如何用JS实现录音完成后触发音频下载及服务器存储功能

方案一：录音完成后触发本地下载 #

原代码已生成音频Blob，但未正确触发下载，且文件名设置错误（写成了respuesta.html）。修改parar函数，补充下载逻辑：

自动触发下载 #

在生成Blob后添加以下代码，录音完成后直接弹出下载提示：

// our final binary blob
var blob = new Blob([view], {
    type: 'audio/wav'
});

// --- 新增下载触发代码 ---
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var link = document.createElement('a');
link.style.display = 'none';
link.download = 'grabacion.wav'; // 修正为音频文件名
link.href = url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 释放URL对象，避免内存泄漏
window.URL.revokeObjectURL(url);
// --- 下载代码结束 ---

// 原有播放逻辑保留
document.getElementById("pintar_ruta").innerHTML = "";
document.getElementById("capa_respuesta").style.display = 'inline';
document.getElementById("respuesta").src = url;

添加可点击的下载按钮 #

若不想自动下载，可生成一个按钮供用户主动点击：

// our final binary blob
var blob = new Blob([view], {
    type: 'audio/wav'
});

var url = (window.URL || window.webkitURL).createObjectURL(blob);

// --- 创建下载按钮 ---
var downloadBtn = document.createElement('button');
downloadBtn.textContent = '下载录音';
downloadBtn.onclick = function() {
    var link = document.createElement('a');
    link.download = 'grabacion.wav';
    link.href = url;
    link.click();
};
// 将按钮添加到页面指定容器
document.getElementById("pintar_ruta").innerHTML = "";
document.getElementById("pintar_ruta").appendChild(downloadBtn);

// 原有播放逻辑保留
document.getElementById("capa_respuesta").style.display = 'inline';
document.getElementById("respuesta").src = url;

方案二：服务器端持久化存储 #

将音频文件上传至服务器保存，后端返回下载链接后，在页面生成下载按钮。

前端修改（parar函数内） #

// our final binary blob
var blob = new Blob([view], {
    type: 'audio/wav'
});

// 准备上传表单数据
var formData = new FormData();
formData.append('audio', blob, 'grabacion.wav');

// 上传至后端接口
fetch('/upload-audio', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => {
    // 后端返回下载链接后生成按钮
    var downloadBtn = document.createElement('a');
    downloadBtn.textContent = '下载录音';
    downloadBtn.href = data.downloadUrl;
    downloadBtn.download = 'grabacion.wav';
    document.getElementById("pintar_ruta").appendChild(downloadBtn);
})
.catch(error => {
    console.error('上传失败:', error);
    document.getElementById("pintar_ruta").textContent = '录音上传失败，请重试';
});

// 原有播放逻辑保留
var url = (window.URL || window.webkitURL).createObjectURL(blob);
document.getElementById("pintar_ruta").innerHTML = "";
document.getElementById("capa_respuesta").style.display = 'inline';
document.getElementById("respuesta").src = url;

后端示例（Node.js/Express） #

const express = require('express');
const multer = require('multer');
const app = express();
const fs = require('fs');

// 创建uploads目录（若不存在）
if (!fs.existsSync('./uploads')) {
    fs.mkdirSync('./uploads');
}

// 配置文件存储规则
const storage = multer.diskStorage({
    destination: './uploads/',
    filename: (req, file, cb) => {
        cb(null, `${Date.now()}-${file.originalname}`);
    }
});
const upload = multer({ storage });

// 上传接口
app.post('/upload-audio', upload.single('audio'), (req, res) => {
    res.json({
        downloadUrl: `/download/${req.file.filename}`
    });
});

// 下载接口
app.get('/download/:filename', (req, res) => {
    const filename = req.params.filename;
    res.download(`./uploads/${filename}`, 'grabacion.wav');
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

内容的提问来源于stack exchange，提问作者al3j4ndr0