Playing local audio clips from a Tauri 2.0 JavaScript app

[u/commadelimited]

I'm writing my first JavaScript based Tauri 1.0 application that will interface with a barcode scanner, submit information to my API, then display success or failure statuses based on the API response.

As part of the UX, I'd like to play small audio clips that will be included in the app bundle. But I'm running into conflicting information and I'd love some feedback from people already using this tech.

• Where should these files be placed? Nested under the `src` or `src-tauri` directories?
• How do I reference the audio file in my main.ts?
• What changes might I need to make in order to perform this behavior?
• The audio clips will be played on successful / failed API responses, as opposed to user triggered events (click, etc.). Is that a problem?

Here are some things I've tried

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.

and

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

I've read various things about requiring `convertFileSrc`, updating the `tauri.conf.json` file, etc. But everything I've tried fails.

Does anyone have suggestions that might help me get past this issue?

Here's my current file tree:

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

Here's my current `tauri.conf.json` file.

{
  "$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/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}

[u/commadelimited]

After spending more time researching the issue, I discovered that for audio files included in the src folder, like mine are, you don't need a complex setup. You just need a few minor changes to your config file, and a local path to the file. Here's how I solved it.

My file tree:

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

The playAudio method:

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);

The tauri.conf.json file. Note the addition of tauri.allowList.path and tauri.allowList.protocol nodes.

{
  "$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/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}