如何在JavaScript中播放D盘音频文件？DOMException报错解决

你遇到的这个错误是因为浏览器的安全策略禁止网页直接访问本地文件系统的绝对路径（比如D:\VM\vmShare\...），这种直接引用本地磁盘路径的方式会被判定为不安全的跨域/本地资源访问，导致媒体资源无法加载。

下面是两种可行的解决方案：

方案1：将音频文件放在网站项目目录中，使用相对路径引用 #

把音频文件放到你网页所在的项目文件夹内（比如创建一个audio子目录），然后用相对路径替代绝对路径，这是网页加载资源的标准合法方式。

修改后的代码示例：

var audio, audio_outcome;

func_playAudio();
function func_playAudio(){
    // 假设audio文件夹和当前HTML文件处于同一层级
    const audio_file_0 = './audio/boom.mp3';
    const audio_file_1 = './audio/thunder.mp3';
    audio_outcome = 0;

    if (audio_outcome == 0){
        audio = new Audio(audio_file_0);
        // 捕获播放可能出现的错误，比如用户未交互触发播放
        audio.play().catch(err => console.error('播放失败:', err));
    }else if (audio_outcome == 1){
        audio = new Audio(audio_file_1);
        audio.play().catch(err => console.error('播放失败:', err));
    }
}

方案2：通过File API让用户手动选择本地音频文件 #

如果你的需求是允许用户加载任意本地磁盘的音频文件，而不是固定的项目内资源，可以使用input[type="file"]结合File API来实现：

HTML部分 #

<input type="file" accept="audio/*" id="audioPicker">
<button onclick="playSelectedAudio()">播放选中音频</button>

JavaScript部分 #

let audio;

function playSelectedAudio(){
    const fileInput = document.getElementById('audioPicker');
    if (!fileInput.files.length) {
        alert('请先选择音频文件');
        return;
    }
    const selectedFile = fileInput.files[0];
    // 创建临时URL供Audio对象使用
    const fileUrl = URL.createObjectURL(selectedFile);
    
    audio = new Audio(fileUrl);
    audio.play().catch(err => console.error('播放失败:', err));
    
    // 播放结束后释放临时URL，避免内存泄漏
    audio.onended = () => {
        URL.revokeObjectURL(fileUrl);
    }
}

额外提醒 #

• 浏览器要求媒体播放必须由用户交互触发（比如点击按钮），如果直接在页面加载时调用play()，可能会被浏览器阻止，所以建议把播放逻辑绑定到用户操作事件上。
• 确保音频文件格式是浏览器支持的（MP3、WAV、OGG等主流格式均兼容）。

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