音频开发问题：无法获取audio元素值及实现用户音频下载

问题原因 #

• 无法获取audio元素值：<audio>元素根本没有value或data属性，你用了错误的属性名。就算改成访问src，用base64字符串做下载链接也不是最优做法。
• 音频下载失败：当前代码里拿不存在的audio.value当下载链接，肯定失败；另外readAsDataURL生成的base64字符串在部分浏览器里做下载链接会有兼容性问题，还占内存。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频编辑器</title>
</head>
<body>
    <input id="file" type="file" accept="audio/*">
    <button id="save" onclick="save()">Save</button>
</body>
<script>
    let selectedFile; // 存用户选中的原文件对象

    document.getElementById("file").addEventListener("change", function(e){
        selectedFile = e.target.files[0];
        if (!selectedFile) return;

        // 创建audio元素播放音频
        const aud = document.createElement("audio");
        aud.id = "audio";
        aud.src = URL.createObjectURL(selectedFile); // 生成临时文件URL，比base64高效
        document.body.appendChild(aud);
        aud.play().catch(err => console.error("播放出错:", err));
    });

    function save(){
        if (!selectedFile) {
            alert("先选个音频文件啊");
            return;
        }

        // 生成下载链接
        const a = document.createElement("a");
        a.href = URL.createObjectURL(selectedFile);
        a.download = selectedFile.name; // 保留原文件名，用户体验更好
        document.body.appendChild(a);
        a.click();
        // 释放临时URL，避免内存浪费
        URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
    }
</script>
</html>

核心改动说明 #

• 新增selectedFile变量直接存储用户选中的File对象，不用绕弯从audio元素取资源，逻辑更可靠。
• 用URL.createObjectURL()替代FileReader.readAsDataURL()，生成的临时文件URL比base64字符串更省内存、加载更快。
• 下载时直接基于原File对象生成链接，确保下载的是用户上传的原文件（后续做音频编辑时，只需把编辑后的音频转为Blob，仍可复用此方法下载）。
• 删除了错误的audio.value获取逻辑，换成直接操作File对象的方式。
• 添加了音频文件类型限制（accept="audio/*"）和基础错误提示，避免用户误操作。

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