javascript 如何在Tauri中播放本地音频文件?

sqougxex  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(346)

我正在TauriVue.js上开发一个mp3(音频)播放器。
我尝试了多种解决方案,但没有一个奏效。
我的播放器使用了一个简单的视频标签:

<video ref="video" :key="queryUrl" controls>
    <source
      :key="queryUrl"
      :src="sourceUrl"
      ref="source"
      type="audio/mpeg"
    >
</video>

首先,我尝试改变来源:

const appDataDirPath = await appDataDir();
const filePath = await join(appDataDirPath, 'test.mp3');
sourceUrl.value = filePath;

但得到了这个错误:
不允许加载本地资源:file:/C:/Users/hangel/AppData/Roaming/com.tauri.dev/test.mp3
从JavaScript中使用音频会导致相同的错误:

const audio = new Audio('C:\\Users\\hangel\\AppData\\Roaming\\com.tauri.dev\\test.mp3');
// Not allowed to load local resource

然后,我尝试使用tauri文档中的convertFileSrc

const appDataDirPath = await appDataDir();
const filePath = await join(appDataDirPath, 'test.mp3');
const assetUrl = convertFileSrc(filePath);

source.value.src = assetUrl;
video.value.appendChild(source.value);
video.value.load();

但我也得到了一个错误:
GET https://asset.localhost/C%3A%5CUsers%5Changel%5CAppData%5CRoaming%5Ccom.tauri.dev%5Ctest.mp3 net::ERR_CONNECTION_REFUSED
我的最后一次尝试是使用Tauri的readBinaryFile
但是我不知道如何使用我的文件(Uint 8Array)的内容。

const content = await readBinaryFile('test.mp3', { dir: BaseDirectory.AppData });
// returns a Uint8Array
// what to do with this array ?
jk9hmnmh

jk9hmnmh1#

您可以使用Tauri的convertFileSrc方法加载本地音频(媒体)文件。
文件:https://tauri.app/fr/v1/api/js/tauri/#convertfilesrc
要使用此方法,您需要执行以下步骤:
tauri.conf.json中,需要在tauri.allowlist中添加协议:

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

还有这个,仍然在tauri.conf.jsontauri.allowlist中:

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

然后,您可以加载mp3文件:

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

  const appDataDirPath = await appDataDir();
  const filePath = await join(appDataDirPath, 'test.mp3');
  const musicUrl = convertFileSrc(filePath);

  source.value.src = musicUrl;
  video.value.appendChild(source.value);
  video.value.load();

相关问题