如何在 Tauri 应用中安全播放本地音频文件（MP3）-js教程-PHP中文网

如何在 Tauri 应用中安全播放本地音频文件（MP3）

本文详解如何在 Tauri + Vue 项目中正确加载并播放本地存储的音频文件，重点解决 Not allowed to load local resource 和 ERR_CONNECTION_REFUSED 等常见错误，核心在于配置自定义协议、设置 CSP 安全策略，并使用 convertFileSrc 安全转换文件路径为可访问的 asset:// URL。

本文详解如何在 tauri + vue 项目中正确加载并播放本地存储的音频文件，重点解决 `not allowed to load local resource` 和 `err_connection_refused` 等常见错误，核心在于配置自定义协议、设置 csp 安全策略，并使用 `convertfilesrc` 安全转换文件路径为可访问的 `asset://` url。

在 Tauri 中直接使用本地文件路径（如 C:\...\test.mp3）赋值给

✅ 正确方案需三步协同：

1. 配置 tauri.conf.json 启用 asset: 协议与作用域
在 tauri.allowlist.protocol 中显式启用 asset 协议，并允许通配符路径访问：

"protocol": {
  "all": false,
  "asset": true,
  "assetScope": ["**"]
}

⚠️ 注意："all": true 不推荐，存在安全风险；应仅开放必需协议。

2. 配置内容安全策略（CSP）允许 asset: 媒体源
在 tauri.allowlist.security.csp 中补充 media-src，明确授权 asset: 协议用于音频/视频加载：

"security": {
  "csp": "default-src 'self'; media-src 'self' asset: https://asset.localhost;"
}

若使用 Vue CLI 或 Vite 构建，还需确保开发服务器的 CSP 元标签（如）不覆盖此配置；生产环境以 tauri.conf.json 为准。

3. 在前端代码中安全生成并加载音频 URL
使用 @tauri-apps/api 提供的路径工具与 convertFileSrc：

import { appDataDir, join } from '@tauri-apps/api/path';
import { convertFileSrc } from '@tauri-apps/api/tauri';

// ✅ 正确获取 AppData 目录下的音频路径
const appDataPath = await appDataDir();
const filePath = await join(appDataPath, 'test.mp3');

// ✅ 转换为 asset:// URL（如：asset://localhost/C%3A%5C...%5Ctest.mp3）
const audioUrl = convertFileSrc(filePath);

// ✅ 绑定到 video/audio 元素（Vue 3 Composition API 示例）
const videoRef = ref<htmlvideoelement null>(null);
const sourceRef = ref<htmlsourceelement null>(null);

if (videoRef.value && sourceRef.value) {
  sourceRef.value.src = audioUrl;
  sourceRef.value.type = 'audio/mpeg';
  videoRef.value.load(); // 触发重新加载
}</htmlsourceelement></htmlvideoelement>

<!-- 模板中保持简洁，避免重复 key 导致重渲染 -->
<video ref="videoRef" controls class="w-full"><source ref="sourceRef"></source></video>

? 补充说明：为何不用 readBinaryFile？
虽然 readBinaryFile 可读取二进制数据（Uint8Array），但将其转为 Blob 再生成 URL.createObjectURL() 在 Tauri 中不可靠——因 Tauri Webview 对 blob: URL 的媒体解码支持有限，且内存占用高、无法流式播放。convertFileSrc 是官方推荐的零拷贝、高效、安全的替代方案。

✅ 验证要点