feat: custom sounds, frontend sounds, docs for audio

docs/api/server/player/player-audio.md

@@ -0,0 +1,22 @@
+# Audio
+
+Play audio from frontend or using custom `.ogg` sound files.
+
+!!!
+If you want to use custom sound files, put them in the `webview/public/sounds` folder.
+!!!
+
+```ts
+import { useAudio } from '@Server/player/audio.js';
+
+// Create audio instance for player
+const audio = useAudio(player);
+
+// Play a custom sound from the public folder
+audio.playSound('sounds/positive.ogg');
+
+// Play a frontend sound that is native to GTA:V
+audio.playFrontendSound('TIMER_STOP', 'HUD_MINI_GAME_SOUNDSET');
+```
+
+[Frontend Sound List](https://altv.stuyk.com/docs/articles/tables/frontend-sounds.html)

src/main/client/index.ts

@@ -6,8 +6,11 @@ import './controllers/index.js';
 import './screen/index.js';
 import './system/index.js';
 import './virtualEntities/index.js';
+import { useWebview } from './webview/index.js';
 
 async function start() {
+    useWebview();
+
     // Load Plugins
     alt.log(':: Loading Client Plugins');
     import('./plugins.js');

src/main/client/webview/index.ts

@@ -22,11 +22,12 @@ function handleClientEvent(event: string, ...args: any[]) {
     ClientEvents[event](...args);
 }
 
-export function useWebview(path: 'http://assets/webview/index.html') {
+export function useWebview(path = 'http://assets/webview/index.html') {
     let isInitialized = true;
 
     if (!webview) {
         webview = new alt.WebView(path);
+        webview.unfocus();
         isInitialized = false;
     }
 

src/main/server/player/audio.ts

@@ -0,0 +1,22 @@
+import * as alt from 'alt-server';
+import { useNative } from './native.js';
+import { Events } from '../../shared/events/index.js';
+import { useWebview } from './webview.js';
+
+export function useAudio(player: alt.Player) {
+    const native = useNative(player);
+    const webview = useWebview(player);
+
+    function playFrontendSound(audioName: string, audioRef: string) {
+        native.invoke('playSoundFrontend', -1, audioName, audioRef, true);
+    }
+
+    function playSound(soundPath: string) {
+        webview.emit(Events.player.audio.play.local, soundPath);
+    }
+
+    return {
+        playFrontendSound,
+        playSound,
+    };
+}

src/main/server/webview/index.ts → src/main/server/player/webview.ts

@@ -1,8 +1,12 @@
-import { Events } from '../../shared/events/index.js';
 import * as alt from 'alt-server';
+import { Events } from '../../shared/events/index.js';
+
+export function useWebview(player: alt.Player) {
+    function emit(eventName: string, ...args: any[]) {
+        if (!player || !player.valid) {
+            return;
+        }
 
-export function useWebview() {
-    function emit(player: alt.Player, eventName: string, ...args: any[]) {
         player.emit(Events.view.onServer, eventName, ...args);
     }
 

src/main/shared/events/index.ts

@@ -23,6 +23,11 @@ export const Events = {
         },
     },
     player: {
+        audio: {
+            play: {
+                local: 'audio:player:sound:2d',
+            },
+        },
         native: {
             invoke: 'player:native:invoke',
         },

webview/composables/useAudio.ts

@@ -0,0 +1,35 @@
+import { Events } from '../../src/main/shared/events';
+import { useEvents } from './useEvents';
+
+const events = useEvents();
+
+let isInitialized = false;
+
+export function useAudio() {
+    if (!isInitialized) {
+        isInitialized = true;
+        events.on(Events.player.audio.play.local, play);
+    }
+
+    async function play(path: string) {
+        const audio = new Audio(path);
+        audio.loop = false;
+        await audio.play();
+
+        // this._audio[soundID] = new Audio(path);
+        // this._audio[soundID].soundID = soundID;
+        // this._audio[soundID].addEventListener('ended', this.audioStopped);
+        // this._audio[soundID].crossOrigin = 'anonymous';
+        // const ambientContext = new AudioContext();
+        // const source = ambientContext.createMediaElementSource(this._audio[soundID]);
+        // this._ambientPan[soundID] = ambientContext.createStereoPanner();
+        // source.connect(this._ambientPan[soundID]);
+        // this._ambientPan[soundID].connect(ambientContext.destination);
+        // this._audio[soundID].setAttribute('src', path);
+        // this._ambientPan[soundID].pan.value = pan;
+    }
+
+    return {
+        play,
+    };
+}

webview/src/App.vue

@@ -2,6 +2,7 @@
 import { onMounted } from 'vue';
 import { usePages } from '../composables/usePages';
 import { usePageEvents } from '../composables/usePageEvents';
+import { useAudio } from '../composables/useAudio';
 import DevelopmentBar from './components/Development.vue';
 
 const { pagesPersistent, pagesOverlay, page } = usePages();
@@ -14,6 +15,7 @@ function handleMount() {
     }
 
     init();
+    useAudio();
 }
 
 onMounted(handleMount);