我正在编写我的第一个基于JavaScript的 Tauri 1.0应用程序，它将与条码扫描仪接口，将信息提交给我的API，然后根据API响应显示成功或失败的状态。

作为用户体验的一部分，我想在应用包中播放一些小音频片段。但我遇到了信息不一致的问题，想请已经在使用这项技术的人给出反馈。

1. 这些文件应该放在哪里？是在 src 目录下还是在 src-tauri 目录下嵌套？
2. 如何在main.ts中引用音频文件？
3. 为实现这种行为，我可能需要做哪些修改？
4. 这些音频片段将基于API响应的成功/失败来播放，而不是由用户触发的事件（点击等）。这会是个问题吗？

下面是我尝试过的一些方法

const playAudio = (path: string) => {
  const audio = new Audio(path);
  audio.play().catch(error => {
    console.error('Playback failed:', error);
  });
};
playAudio('/assets/audio/success.mp3');

// This results in
NotSupportedError: The operation is not supported.

function playAudio(absoluteFilePath: string) {
  const assetUrl = convertFileSrc(absoluteFilePath);
  const audio = new Audio(assetUrl);
  audio.play().catch(err => console.error(err));
};
playAudio('/Users/amatthews/Library/CloudStorage/Dropbox/github/ntd-scanning/tauri/src/assets/audio/success.mp3');

// this results in 
Failed to load resource: unsupported URL

我读到关于需要 convertFileSrc、更新 tauri.conf.json 文件等的各种说法，但我尝试的一切都失败了。

有人有可以帮助我解决这个问题的建议吗？

下面是我当前的文件结构：

.
├── index.html
├── node_modules
├── src
│   └── assets
│       └── audio
│           ├── failure.mp3
│           └── success.mp3
└── src-tauri
    ├── tauri.conf.json
    ├── icons
    ├── src
    └── target

这是我当前的 tauri.conf.json 文件。

{
  "$schema": "https://schema.tauri.app/config/1",
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devPath": "http://localhost:1420",
    "distDir": "../dist",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "ntd-scanner",
    "version": "0.1.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      }
    },
    "windows": [
      {
        "title": "ntd-scanner",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": null
    },
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.ntd-scanner.app",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/[email protected]",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}

解决方案

经过更多时间的研究，我发现对于放在src文件夹中的音频文件，就像我的那样，并不需要复杂的设置。你只需要对配置文件做几处小改动，并提供一个指向该文件的本地路径。下面是我的解决办法。

我的文件结构：

.
├── index.html
├── node_modules
├── src
│   └── assets
│       └── audio
│           ├── failure.mp3
│           └── success.mp3
└── src-tauri
    ├── tauri.conf.json
    ├── icons
    ├── src
    └── target

playAudio 方法：

async function playAudio(assetUrl: string) {
  try {
    // 3. Play the audio file
    const audio = new Audio(assetUrl);
    await audio.play();
  } catch (error) {
    console.error('Playback failed or file not found:', error);
  }
};


const successAudioPath = 'src/assets/audio/success.mp3';
// and calling the method:
playAudio(successAudioPath);

tauri.conf.json 文件。请注意添加了 tauri.allowList.path 和 tauri.allowList.protocol 节点。

{
  "$schema": "https://schema.tauri.app/config/1",
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devPath": "http://localhost:1420",
    "distDir": "../dist",
    "withGlobalTauri": true
  },
  "package": {
    "productName": "ntd-scanner",
    "version": "0.1.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "path": {
        "all": true
      },
      "protocol": {
        "all": true,
        "asset": true,
        "assetScope": ["**"]
      },
      "shell": {
        "all": false,
        "open": true
      }
    },
    "windows": [
      {
        "title": "ntd-scanner",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": "default-src 'self'; media-src 'self' asset: https://asset.localhost;"
    },
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.ntd-scanner.app",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/[email protected]",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}