decodeAudioData不能直接读取本地文件，需先用File API获取File对象，再通过FileReader读取为ArrayBuffer，最后传入decodeAudioData解码；全过程异步且播放须由用户手势触发。
AudioContext 的 decodeAudioData 本身**不能直接读取本地文件**，它只负责将已获取的音频数据（如 ArrayBuffer）解码为可播放的 AudioBuffer。真正“读取本地 MP3 文件”的关键步骤在它之前：你需要先通过 File API 或拖放等方式拿到文件，再用 FileReader 读取为 ArrayBuffer，最后传给 decodeAudioData。
1. 获取本地 MP3 文件（用户选择）
最常用方式是通过 `` 让用户选择一个 MP3 文件：
<input type="file" id="audioFile" accept="audio/mpeg">
监听 change 事件，拿到 File 对象：
document.getElementById('audioFile').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file && file.type.startsWith('audio/')) {
// 后续读取和解码
}
});
2. 用 FileReader 读取为 ArrayBuffer
File 是 Blob 的子类，可用 FileReader.readAsArrayBuffer() 转成二进制数据：
立即学习“前端免费学习笔记（深入）”；
const reader = new FileReader();
reader.onload = function() {
const arrayBuffer = reader.result; // 就是解码需要的原始数据
decodeAndPlay(arrayBuffer);
};
reader.onerror = function() {
console.error('读取文件失败');
};
reader.readAsArrayBuffer(file);
3. 用 decodeAudioData 解码并使用
创建 AudioContext（注意需用户手势触发），调用 decodeAudioData：
function decodeAndPlay(arrayBuffer) {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
audioContext.decodeAudioData(arrayBuffer)
.then(audioBuffer => {
// 解码成功，得到可播放的 AudioBuffer
playAudioBuffer(audioContext, audioBuffer);
})
.catch(err => {
console.error('解码失败：', err);
});
}
function playAudioBuffer(context, buffer) {
const source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(); // 需要用户交互后才能 start（如点击）
}
⚠️ 注意：AudioContext.start() 和 source.start() 在多数浏览器中必须由用户手势（如 click、touchend）触发，否则会被静音策略阻止。
4. 完整可运行示例（精简版）
把上面逻辑串起来，加个播放按钮确保符合音频策略：
<input type="file" id="fileInput" accept="audio/mpeg">
<button id="playBtn" disabled>播放</button>
<script>
let audioBuffer = null;
let audioContext = null;
document.getElementById('fileInput').onchange = function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
audioContext.decodeAudioData(reader.result)
.then(buf => {
audioBuffer = buf;
document.getElementById('playBtn').disabled = false;
})
.catch(e => console.error('解码出错：', e));
};
reader.readAsArrayBuffer(file);
};
document.getElementById('playBtn').onclick = () => {
if (audioBuffer && audioContext) {
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();
}
};
</script>
不复杂但容易忽略：解码是异步的，读取是异步的，播放受音频策略约束——三者缺一不可。
