7 files changed, 63 insertions, 16 deletions
diff --git a/webAO/client.js b/webAO/client.js
index eed1293..dfba169 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1674,15 +1674,8 @@ class Viewport {
     ];
 
     // Allocate multiple blip audio channels to make blips less jittery
-
-    this.blipChannels = new Array(
-      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
-      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
-      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
-      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
-      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
-      new Audio(`${AO_HOST}sounds/general/sfx-blipmale.opus`),
-    );
+    const blipSelectors = document.getElementsByClassName('blipSound')
+    this.blipChannels = [...blipSelectors];
     this.blipChannels.forEach((channel) => channel.volume = 0.5);
     this.blipChannels.forEach((channel) => channel.onerror = opusCheck(channel));
     this.currentBlipChannel = 0;
@@ -1698,12 +1691,8 @@ class Viewport {
     this.testimonyAudio = document.getElementById('client_testimonyaudio');
     this.testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.opus`;
 
-    this.music = new Array(
-      new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
-      new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
-      new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
-      new Audio(`${AO_HOST}sounds/music/trial (aa).opus`),
-    );
+    const audioChannels = document.getElementsByClassName('audioChannel')
+    this.music = [...audioChannels];
     this.music.forEach((channel) => channel.volume = 0.5);
     this.music.forEach((channel) => channel.onerror = opusCheck(channel));
 
@@ -2625,6 +2614,10 @@ window.imgError = imgError;
  * @param {HTMLImageElement} image the element containing the missing sound
  */
 export function opusCheck(channel) {
+  const audio = channel.src
+  if (audio === '') {
+    return
+  }
   console.info(`failed to load sound ${channel.src}`);
   let oldsrc = '';
   oldsrc = channel.src;
diff --git a/webAO/client/aoHost.js b/webAO/client/aoHost.js
new file mode 100644
index 0000000..b387608
--- /dev/null
+++ b/webAO/client/aoHost.js
@@ -0,0 +1,5 @@
+import queryParser from '../utils/queryParser'
+let { asset } = queryParser();
+const DEFAULT_HOST = 'http://attorneyoffline.de/base/';
+const AO_HOST = asset || DEFAULT_HOST 
+export default AO_HOST
diff --git a/webAO/components/__tests__/audioChannels.test.js b/webAO/components/__tests__/audioChannels.test.js
new file mode 100644
index 0000000..243d870
--- /dev/null
+++ b/webAO/components/__tests__/audioChannels.test.js
@@ -0,0 +1,9 @@
+import createAudioChannels from "../audioChannels";
+
+describe('createAudioChannels', () => {
+    test('Should create 4 channels', () => {
+        document.body.innerHTML = ''
+        createAudioChannels(4)
+        expect(document.getElementsByClassName('audioChannel').length).toBe(4)
+    })
+})
+\ No newline at end of file
diff --git a/webAO/components/__tests__/blips.test.js b/webAO/components/__tests__/blips.test.js
new file mode 100644
index 0000000..9c57e78
--- /dev/null
+++ b/webAO/components/__tests__/blips.test.js
@@ -0,0 +1,9 @@
+import createBlip from "../blip";
+
+describe('createBlip', () => {
+    test('create 3 blips audios', () => {
+        document.body.innerHTML = ``
+        createBlip(3)
+        expect(document.getElementsByClassName('blipSound').length).toBe(3)
+    })
+})
+\ No newline at end of file
diff --git a/webAO/components/audioChannels.js b/webAO/components/audioChannels.js
new file mode 100644
index 0000000..1979653
--- /dev/null
+++ b/webAO/components/audioChannels.js
@@ -0,0 +1,13 @@
+/**
+ * 
+ * @param {number} amountOfChannels Amount of Blips to put on page
+ */
+const createAudioChannels = (amountOfChannels) => {
+    for (let i = 0; i < amountOfChannels; i++) {
+        const audioChannel = document.createElement('audio')
+        audioChannel.setAttribute('class', 'audioChannel')
+        document.body.appendChild(audioChannel)
+    }
+}
+createAudioChannels(4)
+export default createAudioChannels 
diff --git a/webAO/components/blip.js b/webAO/components/blip.js
new file mode 100644
index 0000000..eacbeaf
--- /dev/null
+++ b/webAO/components/blip.js
@@ -0,0 +1,17 @@
+import AO_HOST from '../client/aoHost'
+
+/**
+ * 
+ * @param {number} amountOfBlips Amount of Blips to put on page
+ */
+const createBlip = (amountOfBlips) => {
+    for (let i = 0; i < amountOfBlips; i++) {
+        const audio = document.createElement('audio')
+        const blipUrl = `${AO_HOST}sounds/general/sfx-blipmale.opus`
+        audio.setAttribute('class', 'blipSound')
+        audio.setAttribute('src', blipUrl)
+        document.body.appendChild(audio)
+    }
+}
+createBlip(6)
+export default createBlip
+\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 0ffb9ab..07bca15 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,7 @@ module.exports = {
     client: './webAO/client.js',
     master: './webAO/master.ts',
     dom: glob.sync('./webAO/dom/*.js'),
+    components: glob.sync('./webAO/components/*.js'),
   },
   node: {
     global: true,
@@ -92,7 +93,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       title: 'Attorney Online',
       filename: 'client.html',
-      chunks: ['client', 'ui', 'dom'],
+      chunks: ['client', 'ui', 'dom', 'components'],
       template: 'public/client.html',
     }),
     new webpack.DefinePlugin({