如何将本地音频文件导入<audio>标签及实现相关功能

下面是完整的实现代码，包含你需要的所有核心功能，以及可选的快捷键支持：

修改后的HTML #

<!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">
    <link rel="stylesheet" href="./style.css">
    <title>Audio Manager</title>
</head>
<body>
    <div class="file-select-container">
        <input type="file" id="real-file" hidden="hidden" accept=".ogg,.wav,.aiff,.mp3,.aac,.flac,.alac,.dsd,.pcm" />
        <button type="button" id="custom-button">CHOOSE A FILE</button>
        <span id="custom-text">No file chosen, yet.</span>
    </div>

    <!-- 音频管理表格 -->
    <table id="audio-table" class="audio-table">
        <thead>
            <tr>
                <th>文件名</th>
                <th>音频播放器</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="audio-table-body">
            <!-- 动态生成的音频项会插入到这里 -->
        </tbody>
    </table>

    <script src="./main.js"></script>
</body>
</html>

更新后的CSS #

#custom-button {
    padding: 10px 20px;
    color: white;
    background-color: #009578;
    border: 1px solid #000;
    cursor: pointer;
    transition: background-color 0.1s;
}

#custom-button:hover {
    background-color: #00b28f;
}

#custom-text {
    margin-left: 10px;
    font-family: sans-serif;
    color: #aaa;
}

.file-select-container {
    margin: 20px 0;
}

.audio-table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
}

.audio-table th, .audio-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.audio-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.delete-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.1s;
}

.delete-btn:hover {
    background-color: #c82333;
}

.audio-table-body tr.selected {
    background-color: #e9ecef;
}

完整的JavaScript逻辑 #

const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");
const audioTableBody = document.getElementById("audio-table-body");

// 自定义按钮触发文件选择
customBtn.addEventListener("click", function() {
    realFileBtn.click();
});

// 文件选择后的处理逻辑
realFileBtn.addEventListener("change", function() {
    if (!realFileBtn.files.length) {
        customTxt.innerHTML = "No file chosen, yet.";
        return;
    }

    const file = realFileBtn.files[0];
    customTxt.innerHTML = file.name;

    // 创建音频元素和表格行
    addAudioToTable(file);

    // 重置文件输入，允许重新选择同一文件
    realFileBtn.value = "";
});

// 添加音频到表格
function addAudioToTable(file) {
    // 创建表格行
    const row = document.createElement("tr");

    // 文件名单元格
    const nameCell = document.createElement("td");
    nameCell.textContent = file.name;
    row.appendChild(nameCell);

    // 音频播放器单元格
    const audioCell = document.createElement("td");
    const audioElement = document.createElement("audio");
    audioElement.controls = true;
    audioElement.src = URL.createObjectURL(file);
    audioCell.appendChild(audioElement);
    row.appendChild(audioCell);

    // 删除按钮单元格
    const actionCell = document.createElement("td");
    const deleteBtn = document.createElement("button");
    deleteBtn.className = "delete-btn";
    deleteBtn.textContent = "X";
    deleteBtn.addEventListener("click", function() {
        // 释放音频URL资源，避免内存泄漏
        URL.revokeObjectURL(audioElement.src);
        row.remove();
    });
    actionCell.appendChild(deleteBtn);
    row.appendChild(actionCell);

    // 添加到表格
    audioTableBody.appendChild(row);
}

// 可选：快捷键支持（Ctrl+O打开文件选择，Delete删除选中的行）
document.addEventListener("keydown", function(e) {
    // Ctrl+O 快速打开文件选择窗口
    if (e.ctrlKey && e.key === "o") {
        e.preventDefault();
        realFileBtn.click();
    }

    // Delete 删除选中的表格行
    if (e.key === "Delete") {
        const selectedRow = document.querySelector("#audio-table-body tr.selected");
        if (selectedRow) {
            const audioElement = selectedRow.querySelector("audio");
            URL.revokeObjectURL(audioElement.src);
            selectedRow.remove();
        }
    }
});

// 表格行选中逻辑
audioTableBody.addEventListener("click", function(e) {
    const row = e.target.closest("tr");
    if (!row) return;

    // 移除其他行的选中状态
    document.querySelectorAll("#audio-table-body tr").forEach(r => r.classList.remove("selected"));
    // 标记当前行为选中状态
    row.classList.add("selected");
    row.setAttribute("tabindex", "0");
    row.focus();
});

关键功能拆解 #

• 音频导入：用URL.createObjectURL(file)生成本地音频临时链接，无需上传服务器即可直接播放，处理完文件后重置输入框，允许重复选同一文件。
• 表格管理：每选一个音频就动态生成一行表格，包含文件名、带原生控件的播放器和删除按钮，删除时必须调用URL.revokeObjectURL释放资源，避免内存泄漏。
• 删除按钮：每个音频项旁的"X"按钮绑定点击事件，直接移除对应行并清理资源。
• 快捷键支持：Ctrl+O快速触发文件选择，Delete键删除选中的表格行（点击行即可选中）。

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