如何在Tauri+Vue.js中播放本地音频文件？

针对你遇到的本地音频文件加载问题，这里提供两种可行的解决方法：

方法一：正确配置并使用 convertFileSrc #

ERR_CONNECTION_REFUSED 是因为未在Tauri配置中授权访问目标文件路径，按以下步骤修复：

1. 修改 Tauri 配置文件 #

打开 tauri.conf.json，在 tauri.security.assetScope 中添加AppData目录的访问权限：

{
  "tauri": {
    "security": {
      "assetScope": [
        "**/AppData/Roaming/com.tauri.dev/**"
      ]
    }
  }
}

生产环境建议缩小权限范围，避免使用过于宽松的 **。

2. 优化 Vue 组件代码 #

利用Vue的响应式绑定自动处理资源加载，无需手动操作DOM：

<template>
  <video controls>
    <source :src="sourceUrl" type="audio/mpeg">
  </video>
</template>

<script setup>
import { ref } from 'vue'
import { appDataDir, join, convertFileSrc } from '@tauri-apps/api/path'

const sourceUrl = ref('')

async function loadAudio() {
  const appDataDirPath = await appDataDir()
  const filePath = await join(appDataDirPath, 'test.mp3')
  sourceUrl.value = convertFileSrc(filePath)
}

// 组件挂载时加载音频
loadAudio()
</script>

方法二：通过 readBinaryFile 生成 Object URL #

如果你更倾向于直接读取文件内容，可以将 Uint8Array 转换为Blob后生成浏览器可识别的URL：

<template>
  <video controls>
    <source :src="sourceUrl" type="audio/mpeg">
  </video>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs'

const sourceUrl = ref('')
let objectUrl = ''

async function loadAudio() {
  const content = await readBinaryFile('test.mp3', { dir: BaseDirectory.AppData })
  const blob = new Blob([content], { type: 'audio/mpeg' })
  objectUrl = URL.createObjectURL(blob)
  sourceUrl.value = objectUrl
}

// 组件卸载时释放URL，避免内存泄漏
onUnmounted(() => {
  if (objectUrl) URL.revokeObjectURL(objectUrl)
})

loadAudio()
</script>

额外注意事项 #

• 始终使用Tauri提供的 join 方法处理路径，避免跨平台路径分隔符问题；
• 若使用 convertFileSrc，确保你的Tauri版本为v1.0+，不同版本的API参数可能略有差异；
• 测试前需重启Tauri开发服务，确保配置文件修改生效。

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