From 25d363cbf657c56f894c47110e56d9f1cca6cd3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81lvarez=20D=C3=ADez?= <miguelwork92@gmail.com>
Date: Fri, 10 Jan 2025 01:07:56 +0100
Subject: [PATCH] [UI] Add voice dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Miguel Álvarez Díez <miguelwork92@gmail.com>
---
 .../web/build/webpack.config.js               |  20 +-
 bundles/org.openhab.ui/web/package-lock.json  |  12 +
 bundles/org.openhab.ui/web/package.json       |   1 +
 .../web/src/assets/i18n/common/en.json        |   1 +
 .../src/assets/i18n/theme-switcher/en.json    |   7 +-
 .../org.openhab.ui/web/src/components/app.vue |   8 +-
 .../web/src/components/dialog-mixin.js        |  73 +++
 .../web/src/components/theme-switcher.vue     |  62 ++-
 .../org.openhab.ui/web/src/js/store/index.js  |   9 +-
 .../web/src/js/voice/audio-main.js            | 438 +++++++++++++++
 .../web/src/js/voice/audio-types.js           |  44 ++
 .../web/src/js/voice/audio-worker.js          | 514 ++++++++++++++++++
 .../src/js/voice/audio/audio-sink-worklet.js  | 154 ++++++
 .../web/src/js/voice/audio/audio-sink.js      |  94 ++++
 .../js/voice/audio/audio-source-worklet.js    |  14 +
 .../web/src/js/voice/audio/audio-source.js    | 105 ++++
 bundles/org.openhab.ui/web/src/pages/home.vue |   1 +
 17 files changed, 1541 insertions(+), 16 deletions(-)
 create mode 100644 bundles/org.openhab.ui/web/src/components/dialog-mixin.js
 create mode 100644 bundles/org.openhab.ui/web/src/js/voice/audio-main.js
 create mode 100644 bundles/org.openhab.ui/web/src/js/voice/audio-types.js
 create mode 100644 bundles/org.openhab.ui/web/src/js/voice/audio-worker.js
 create mode 100644 bundles/org.openhab.ui/web/src/js/voice/audio/audio-sink-worklet.js
 create mode 100644 bundles/org.openhab.ui/web/src/js/voice/audio/audio-sink.js
 create mode 100644 bundles/org.openhab.ui/web/src/js/voice/audio/audio-source-worklet.js
 create mode 100644 bundles/org.openhab.ui/web/src/js/voice/audio/audio-source.js

diff --git a/bundles/org.openhab.ui/web/build/webpack.config.js b/bundles/org.openhab.ui/web/build/webpack.config.js
index 99646abb9e..b3a6418877 100644
--- a/bundles/org.openhab.ui/web/build/webpack.config.js
+++ b/bundles/org.openhab.ui/web/build/webpack.config.js
@@ -70,16 +70,16 @@ module.exports = {
     allowedHosts: "all",
     historyApiFallback: true,
     proxy: [
-      {
-        context: ['/auth', '/rest', '/chart', '/proxy', '/icon', '/static', '/changePassword', '/createApiToken', '/audio'],
-        target: apiBaseUrl
-      },
-      {
-        context: ['/ws/logs', '/ws/events'],
-        target: apiBaseUrl,
-        ws: true
-      }
-    ]
+    {
+      context: ['/auth', '/rest', '/chart', '/proxy', '/icon', '/static', '/changePassword', '/createApiToken', '/audio'],
+      target: apiBaseUrl
+    },
+    {
+      context: ['/ws/logs', '/ws/events', '/ws/audio-pcm'],
+      target: apiBaseUrl,
+      ws: true
+    }
+  ]
   },
   performance: {
     maxAssetSize: 2048000,
diff --git a/bundles/org.openhab.ui/web/package-lock.json b/bundles/org.openhab.ui/web/package-lock.json
index 06f57e9a88..ff9c05b661 100644
--- a/bundles/org.openhab.ui/web/package-lock.json
+++ b/bundles/org.openhab.ui/web/package-lock.json
@@ -43,6 +43,7 @@
         "path-browserify": "^1.0.1",
         "pkce-challenge": "^3.1.0",
         "qrcode": "^1.5.4",
+        "reentrant-lock": "^3.0.0",
         "scope-css": "^1.2.1",
         "stream-browserify": "^3.0.0",
         "template7": "^1.4.2",
@@ -18576,6 +18577,12 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/reentrant-lock": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/reentrant-lock/-/reentrant-lock-3.0.0.tgz",
+      "integrity": "sha512-YEGnY2CuYT7/a0sVWr/wobSTwQVow60QoiJvDjLCrTQjawhdk1KpuBJM1JqWOYEnxIRnKCj9XjKCQC0XejVtgw==",
+      "license": "MIT"
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -35790,6 +35797,11 @@
         "resolve": "^1.20.0"
       }
     },
+    "reentrant-lock": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/reentrant-lock/-/reentrant-lock-3.0.0.tgz",
+      "integrity": "sha512-YEGnY2CuYT7/a0sVWr/wobSTwQVow60QoiJvDjLCrTQjawhdk1KpuBJM1JqWOYEnxIRnKCj9XjKCQC0XejVtgw=="
+    },
     "reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
diff --git a/bundles/org.openhab.ui/web/package.json b/bundles/org.openhab.ui/web/package.json
index 2fd9bf9534..de273ec3c4 100644
--- a/bundles/org.openhab.ui/web/package.json
+++ b/bundles/org.openhab.ui/web/package.json
@@ -84,6 +84,7 @@
     "path-browserify": "^1.0.1",
     "pkce-challenge": "^3.1.0",
     "qrcode": "^1.5.4",
+    "reentrant-lock": "^3.0.0",
     "scope-css": "^1.2.1",
     "stream-browserify": "^3.0.0",
     "template7": "^1.4.2",
diff --git a/bundles/org.openhab.ui/web/src/assets/i18n/common/en.json b/bundles/org.openhab.ui/web/src/assets/i18n/common/en.json
index f76f4d9c9e..246f5292a4 100644
--- a/bundles/org.openhab.ui/web/src/assets/i18n/common/en.json
+++ b/bundles/org.openhab.ui/web/src/assets/i18n/common/en.json
@@ -33,6 +33,7 @@
   "home.editHome": "Edit Home Page",
   "home.pinToHome": "Pin to Home",
   "home.exitToApp": "Return to App",
+  "home.triggerVoice": "Trigger voice dialog",
   "home.tip.otherApps": "Open the apps panel to launch other interfaces",
   "sidebar.noPages": "No pages",
   "sidebar.administration": "Administration",
diff --git a/bundles/org.openhab.ui/web/src/assets/i18n/theme-switcher/en.json b/bundles/org.openhab.ui/web/src/assets/i18n/theme-switcher/en.json
index 00e9816ad6..e497ed38a7 100644
--- a/bundles/org.openhab.ui/web/src/assets/i18n/theme-switcher/en.json
+++ b/bundles/org.openhab.ui/web/src/assets/i18n/theme-switcher/en.json
@@ -20,5 +20,10 @@
   "about.miscellaneous.theme.disablePageTransition": "Disable page transition animations",
   "about.miscellaneous.webaudio.enable": "Enable Web Audio sink support",
   "about.miscellaneous.commandItem.title": "Listen for UI commands to ",
-  "about.miscellaneous.commandItem.selectItem": "Item"
+  "about.miscellaneous.commandItem.selectItem": "Item",
+  "about.dialog": "Voice Support",
+  "about.dialog.enable": "Enable Voice Dialog",
+  "about.dialog.id": "Connection Id",
+  "about.dialog.listeningItem": "Listening Item",
+  "about.dialog.locationItem": "Location Item"
 }
diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
index 6acd7b240d..bcc97dd142 100644
--- a/bundles/org.openhab.ui/web/src/components/app.vue
+++ b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -276,6 +276,7 @@ import auth from './auth-mixin'
 import i18n from './i18n-mixin'
 import connectionHealth from './connection-health-mixin'
 import sseEvents from './sse-events-mixin'
+import dialog from './dialog-mixin'
 
 import dayjs from 'dayjs'
 import dayjsLocales from 'dayjs/locale.json'
@@ -283,7 +284,7 @@ import dayjsLocales from 'dayjs/locale.json'
 import { AddonIcons, AddonTitles } from '@/assets/addon-store'
 
 export default {
-  mixins: [auth, i18n, connectionHealth, sseEvents],
+  mixins: [auth, i18n, connectionHealth, sseEvents, dialog],
   components: {
     EmptyStatePlaceholder,
     PanelRight,
@@ -700,11 +701,16 @@ export default {
         }
       })
 
+      this.$f7.on('triggerDialog', () => {
+        this.triggerDialog()
+      })
+
       if (window) {
         window.addEventListener('keydown', this.keyDown)
       }
 
       this.startEventSource()
+      this.startAudioWebSocket()
     })
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/dialog-mixin.js b/bundles/org.openhab.ui/web/src/components/dialog-mixin.js
new file mode 100644
index 0000000000..66c854d003
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/dialog-mixin.js
@@ -0,0 +1,73 @@
+import { getAccessToken } from '@/js/openhab/auth.js'
+
+export default {
+  data () {
+    return {
+      audioMain: null
+    }
+  },
+  methods: {
+    startAudioWebSocket () {
+      if (this.audioMain) {
+        return
+      }
+      const dialogEnabled = localStorage.getItem('openhab.ui:dialog.enabled') === 'true'
+      if (!dialogEnabled) {
+        return
+      }
+      const identifier = localStorage.getItem('openhab.ui:dialog.id') ?? 'anonymous'
+      const dialogListeningItem = localStorage.getItem('openhab.ui:dialog.listeningItem') ?? ''
+      const dialogLocationItem = localStorage.getItem('openhab.ui:dialog.locationItem') ?? ''
+      import('../js/voice/audio-main.js').then(({ AudioMain }) => {
+        if (this.audioMain) {
+          return
+        }
+        let port = ''
+        if (!((location.protocol === 'https:' && location.port === '443') || (location.protocol === 'http:' && location.port === '80'))) {
+          port = `:${location.port}`
+        }
+        const ohURL = `${location.protocol}//${location.hostname}${port}`
+        const updatePageIcon = (online, recording, playing) => {
+          let voiceIcon
+          if (!online) {
+            voiceIcon = 'f7:mic_slash_fill'
+          } else if (recording) {
+            voiceIcon = 'f7:mic_circle_fill'
+          } else if (playing) {
+            voiceIcon = 'f7:speaker_2_fill'
+          } else {
+            voiceIcon = 'f7:mic_circle'
+          }
+          this.$store.commit('setVoiceIcon', voiceIcon)
+        }
+        updatePageIcon(false)
+        this.audioMain = new AudioMain(ohURL, getAccessToken, {
+          onMessage: (...args) => {
+            console.debug('Voice: ' + args[0])
+          },
+          onRunningChange (io) {
+            updatePageIcon(io.isRunning(), io.isListening(), io.isSpeaking())
+          },
+          onListeningChange (io) {
+            updatePageIcon(io.isRunning(), io.isListening(), io.isSpeaking())
+          },
+          onSpeakingChange (io) {
+            updatePageIcon(io.isRunning(), io.isListening(), io.isSpeaking())
+          }
+        })
+        const events = ['touchstart', 'touchend', 'mousedown', 'keydown']
+        const startAudio = () => {
+          clean()
+          this.audioMain.initialize(identifier, dialogListeningItem, dialogLocationItem)
+        }
+        const clean = () => events.forEach(e => document.body.removeEventListener(e, startAudio))
+        events.forEach(e => document.body.addEventListener(e, startAudio, false))
+      })
+    },
+    triggerDialog () {
+      if (this.audioMain != null) {
+        this.audioMain.sendSpot()
+      }
+    }
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/components/theme-switcher.vue b/bundles/org.openhab.ui/web/src/components/theme-switcher.vue
index 4ef9c979b7..f6610de3fb 100644
--- a/bundles/org.openhab.ui/web/src/components/theme-switcher.vue
+++ b/bundles/org.openhab.ui/web/src/components/theme-switcher.vue
@@ -98,6 +98,26 @@
         </f7-list>
       </f7-col>
     </f7-row>
+
+    <f7-row v-if="showDialogOptions">
+      <f7-col>
+        <f7-block-title v-t="'about.dialog'" />
+        <f7-list>
+          <f7-list-item>
+            <span v-t="'about.dialog.enable'" />
+            <f7-toggle :checked="dialog === 'true'" @toggle:change="setDialog" />
+          </f7-list-item>
+          <f7-list-item>
+            <span v-t="'about.dialog.id'" />
+            <f7-input type="button" :value="identifier" />
+          </f7-list-item>
+          <item-picker :title="$t('about.dialog.listeningItem')" :multiple="false" :value="listeningItem"
+                       @input="setDialogListeningItem" />
+          <item-picker :title="$t('about.dialog.locationItem')" :multiple="false" :value="locationItem"
+                       @input="setDialogLocationItem" />
+        </f7-list>
+      </f7-col>
+    </f7-row>
   </f7-block>
 </template>
 
@@ -111,7 +131,6 @@
 <script>
 import { loadLocaleMessages } from '@/js/i18n'
 import ItemPicker from '@/components/config/controls/item-picker.vue'
-
 export default {
   components: {
     ItemPicker
@@ -165,6 +184,18 @@ export default {
     setCommandItem (value) {
       localStorage.setItem('openhab.ui:commandItem', value)
       setTimeout(() => { location.reload() }, 50) // Delay reload, otherwise it doesn't work
+    },
+    setDialog (value) {
+      localStorage.setItem('openhab.ui:dialog.enabled', value)
+      setTimeout(() => { location.reload() }, 50) // Delay reload, otherwise it doesn't work
+    },
+    setDialogListeningItem (value) {
+      localStorage.setItem('openhab.ui:dialog.listeningItem', value)
+      setTimeout(() => { location.reload() }, 50) // Delay reload, otherwise it doesn't work
+    },
+    setDialogLocationItem (value) {
+      localStorage.setItem('openhab.ui:dialog.locationItem', value)
+      setTimeout(() => { location.reload() }, 50) // Delay reload, otherwise it doesn't work
     }
   },
   computed: {
@@ -197,6 +228,30 @@ export default {
     },
     commandItem () {
       return localStorage.getItem('openhab.ui:commandItem') || ''
+    },
+    showDialogOptions () {
+      const getUserMediaSupported = !!(window.navigator && window.navigator.mediaDevices && window.navigator.mediaDevices.getUserMedia)
+      return getUserMediaSupported &&
+        !!window.AudioContext &&
+        !!window.crypto
+    },
+    dialog () {
+      return localStorage.getItem('openhab.ui:dialog.enabled') || 'default'
+    },
+    identifier () {
+      const key = 'openhab.ui:dialog.id'
+      let id = localStorage.getItem(key)
+      if (!id) {
+        id = `ui-${Math.round(Math.random() * 100)}-${Math.round(Math.random() * 100)}`
+        localStorage.setItem(key, id)
+      }
+      return id
+    },
+    listeningItem () {
+      return localStorage.getItem('openhab.ui:dialog.listeningItem') || ''
+    },
+    locationItem () {
+      return localStorage.getItem('openhab.ui:dialog.locationItem') || ''
     }
   }
 }
@@ -284,5 +339,8 @@ export default {
 .nav-bars-picker-fill .demo-navbar:before,
 .nav-bars-picker-fill .demo-navbar:after
   background #fff
-
+.title-fixed .item-title
+  width: 200%
+.input-right input
+  text-align: right
 </style>
diff --git a/bundles/org.openhab.ui/web/src/js/store/index.js b/bundles/org.openhab.ui/web/src/js/store/index.js
index 296a6d79de..d76f4f5959 100644
--- a/bundles/org.openhab.ui/web/src/js/store/index.js
+++ b/bundles/org.openhab.ui/web/src/js/store/index.js
@@ -33,11 +33,13 @@ const store = new Vuex.Store({
     },
     websiteUrl: null,
     developerDock: false,
-    pagePath: null
+    pagePath: null,
+    voiceIcon: null
   },
   getters: {
     apiEndpoint: (state) => (type) => (!state.apiEndpoints) ? null : state.apiEndpoints.find((e) => e.type === type),
-    locale: (state, getters) => state.locale ?? 'default'
+    locale: (state, getters) => state.locale ?? 'default',
+    voiceIcon: (state) => state.voiceIcon
   },
   mutations: {
     setRootResource (state, { rootResponse }) {
@@ -56,6 +58,9 @@ const store = new Vuex.Store({
     },
     setPagePath (state, value) {
       state.pagePath = value
+    },
+    setVoiceIcon (state, value) {
+      state.voiceIcon = value
     }
   },
   actions: {
diff --git a/bundles/org.openhab.ui/web/src/js/voice/audio-main.js b/bundles/org.openhab.ui/web/src/js/voice/audio-main.js
new file mode 100644
index 0000000000..c83d8a9128
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/js/voice/audio-main.js
@@ -0,0 +1,438 @@
+import { AudioSink } from './audio/audio-sink'
+import { AudioSource } from './audio/audio-source'
+import { WorkerInCmd, WorkerOutCmd } from './audio-types'
+
+export class AudioMain {
+  constructor (ohUrl, accessTokenGetter = null, events = {}) {
+    this.ohUrl = ohUrl
+    this.events = events
+    this.online = false
+    this.accessTokenGetter = accessTokenGetter
+    // voice audio context
+    this.audioContext = null
+    /// audio source
+    this.audioSource = null
+    this.sourceVolume = 50
+    this.micStreaming = false
+    this.listening = false
+    ///
+    /// audio sink
+    this.activeSinks = new Map()
+    this.sinkVolume = 50
+    ///
+    this.handleSuspendOnHidden = () => {
+      if (!document.hidden) {
+        this.getVoiceAudioContext()
+          .resume()
+          .catch(err => this.events.onMessage?.('Error resuming audio context', err))
+        this.startSourceCheckInterval()
+        this.postToWorker(WorkerInCmd.RESUME)
+      } else {
+        this.stopSourceCheckInterval()
+        this.getVoiceAudioContext()
+          .suspend()
+          .catch(err => this.events.onMessage?.('Error suspending audio context', err))
+        this.postToWorker(WorkerInCmd.SUSPEND)
+      }
+    }
+    this.worker = new Worker(new URL('./audio-worker.js', import.meta.url), {
+      name: 'websocket-audio-worker',
+      type: 'module'
+    })
+  }
+
+  isRunning () {
+    return this.online && this.audioContext?.state === 'running'
+  }
+
+  isListening () {
+    return this.listening
+  }
+
+  isSpeaking () {
+    return this.activeSinks.size > 0
+  }
+
+  /**
+   * Initializes the audio context used for the sink and source.
+   */
+  startVoiceAudioContext () {
+    if (!this.audioContext) {
+      const options = {}
+      // setting a custom sample rate only seems to work correctly in Chrome
+      // if (customSampleRate) {
+      //   options.sampleRate = customSampleRate
+      // }
+      this.audioContext = new AudioContext(options)
+
+      this.events.onMessage?.(
+        `Created audio context with sample rate ${this.audioContext.sampleRate}`,
+        'error'
+      )
+    }
+  }
+
+  /**
+   * Returns the audio context asserting it's defined.
+   *
+   * @returns the shared audio context.
+   */
+  getVoiceAudioContext () {
+    if (!this.audioContext) {
+      throw new Error('AudioContext not initialized')
+    }
+    return this.audioContext
+  }
+
+  /**
+   * Returns the audio context asserting it's initialized.
+   *
+   * @returns the audio source implementation.
+   */
+  getAudioSource () {
+    if (!this.audioSource) {
+      throw new Error('AudioSource not initialized')
+    }
+    return this.audioSource
+  }
+
+  /**
+   * Returns an audio processor node connected to the audio worker, so the audio gets converted and streamed to the server.
+   */
+  async getWorkerAudioProcessor () {
+    const audioContext = this.getVoiceAudioContext()
+    const _webSocketWorkletNode = new AudioWorkletNode(
+      audioContext,
+      'websocket-source-worklet',
+      {
+        numberOfInputs: 1,
+        numberOfOutputs: 0,
+        channelCount: 1,
+        channelCountMode: 'explicit'
+      }
+    )
+    const portPromise = new Promise(
+      resolve => (this.resolveSourcePort = resolve)
+    )
+    const command = {
+      cmd: WorkerInCmd.SOURCE_PORT,
+      port: _webSocketWorkletNode.port
+    }
+    this.worker.postMessage(command, [command.port])
+    await portPromise
+    return _webSocketWorkletNode
+  }
+
+  postToWorker (cmd, args = {}) {
+    try {
+      if (this.worker) {
+        this.worker.postMessage({ cmd, ...args })
+      } else {
+        this.events.onMessage?.(
+          'Worker not running',
+          'error'
+        )
+      }
+    } catch (error) {
+      this.events.onMessage?.(
+        'Unable to post to worker',
+        'error'
+      )
+    }
+  }
+
+  sendSpot () {
+    if (this.online && this.audioSource && !this.audioSource.isSuspended()) {
+      this.postToWorker(WorkerInCmd.ON_SPOT)
+    }
+  }
+
+  resetConnection (id) {
+    this.postToWorker(WorkerInCmd.RESET_CONNECTION, { id })
+  }
+
+  setAuthToken (token) {
+    if (token && this.worker) {
+      this.postToWorker(WorkerInCmd.TOKEN_RENEW, { token })
+    }
+  }
+
+  /**
+   * Connect the worker input audio node to the audio context media stream output,
+   * it keeps the keyword spotter input audio node connected if exists.
+   */
+  async startMicStreaming () {
+    if (!this.micStreaming) {
+      this.micStreaming = true
+      this.events.onMessage?.(
+        'Starting microphone audio streaming'
+      )
+      const processors = [await this.getWorkerAudioProcessor()]
+      if (!this.micStreaming) {
+        this.events.onMessage?.(
+          'Start microphone audio aborted',
+          'error'
+        )
+        return
+      }
+      this.getAudioSource()
+        .start(...processors)
+        .catch(err => this.events.onMessage?.(err))
+    } else {
+      this.events.onMessage?.(
+        'trying to start microphone streaming but it\'s already started!',
+        'error'
+      )
+    }
+  }
+
+  /**
+   * Disconnect the worker input audio node from the audio context media stream output,
+   * it keeps the keyword spotter input audio node connected if exists.
+   */
+  stopMicStreaming () {
+    if (this.micStreaming) {
+      this.micStreaming = false
+      // stop audio node
+      this.audioSource?.stop()
+    } else {
+      this.events.onMessage?.(
+        'trying to stop microphone streaming but it\'s already stopped!',
+        'error'
+      )
+    }
+  }
+
+  /**
+   * Clean up function, tries to dispose worker and keyword spotter input audio nodes.
+   */
+  async killMicProcessors () {
+    this.audioSource?.stop()
+  }
+
+  /**
+   * Handle messages from the websocket.
+   *
+   * @param command the command name.
+   * @param data the command data.
+   */
+  handleWorkerMessage (command, data) {
+    switch (command) {
+      case WorkerOutCmd.SOURCE_READY:
+        this.resolveSourcePort?.()
+        this.resolveSourcePort = undefined
+        break
+      case WorkerOutCmd.INITIALIZED:
+        this.online = true
+        this.events.onRunningChange?.(this)
+        this.events.onMessage?.('Connected', 'info', 2000)
+        break
+      case WorkerOutCmd.OFFLINE:
+        const accessToken = this.accessTokenGetter()
+        if (accessToken) {
+          this.setAuthToken(accessToken)
+        }
+        this.events.onMessage?.(
+          'Disconnected, trying to reconnect',
+          'error',
+          2000
+        )
+        this.resolveSourcePort?.()
+        this.resolveSourcePort = undefined
+        this.audioSource?.stop()
+        if (this.listening) {
+          this.listening = false
+          this.events.onListeningChange?.(this)
+        }
+        if (this.online) {
+          this.online = false
+          this.events.onRunningChange?.(this)
+        }
+        break
+      case WorkerOutCmd.START_SINK: {
+        const startSinkCmd = data
+        const sink = new AudioSink(
+          startSinkCmd.id,
+          startSinkCmd.channels,
+          this.sinkVolume
+        )
+        const sinkPortCmd = {
+          cmd: WorkerInCmd.SINK_PORT,
+          id: sink.getId(),
+          port: sink.getMessagePort()
+        }
+        this.worker.postMessage(sinkPortCmd, [sinkPortCmd.port])
+        this.activeSinks.set(sink.getId(), sink)
+        const startSpeaking = this.activeSinks.size === 1
+        this.events.onMessage?.(
+          `Starting sink stream ${sink.getId()}`
+        )
+        sink
+          .start()
+          .then(() => {
+            if (startSpeaking) {
+              this.events.onSpeakingChange?.(this)
+            }
+          })
+          .catch(err => console.error(err))
+        break
+      }
+      case WorkerOutCmd.STOP_SINK: {
+        const stopSinkCmd = data
+        const activeSink = this.activeSinks.get(stopSinkCmd.id)
+        if (activeSink) {
+          this.events.onMessage?.(`Stoping sink stream ${stopSinkCmd.id}`)
+          this.activeSinks.delete(stopSinkCmd.id)
+          activeSink.close()
+          if (this.activeSinks.size === 0) {
+            this.events.onSpeakingChange?.(this)
+          }
+        } else {
+          this.events.onMessage?.('Unable to stop sink, not found ' + stopSinkCmd.id)
+        }
+        break
+      }
+      case WorkerOutCmd.START_LISTENING:
+        if (!this.online) {
+          return
+        }
+        if (!this.listening) {
+          this.listening = true
+          this.startMicStreaming()
+          this.events.onListeningChange?.(this)
+        }
+        break
+      case WorkerOutCmd.STOP_LISTENING:
+        if (!this.online) {
+          return
+        }
+        if (this.listening) {
+          this.listening = false
+          this.stopMicStreaming()
+          this.events.onListeningChange?.(this)
+        }
+        break
+      case WorkerOutCmd.SINK_VOLUME: {
+        const { value: sinkVolume } = data
+        this.events.onMessage?.(`Sink volume: ${sinkVolume}`, 'info', 1000)
+        this.sinkVolume = sinkVolume
+        this.activeSinks.forEach(sink => sink.setVolume(this.sinkVolume))
+        break
+      }
+      case WorkerOutCmd.SOURCE_VOLUME: {
+        const { value: sourceVolume } = data
+        this.events.onMessage?.(`Source volume: ${sourceVolume}`, 'info', 1000)
+        this.sourceVolume = sourceVolume
+        this.getAudioSource().setVolume(sourceVolume)
+        break
+      }
+      default:
+        this.events.onMessage?.(`Unknown worker command ${command}`, 'error')
+    }
+  }
+
+  /**
+   * Handles the speaker configuration message.
+   *
+   * @param speakerConfig The speaker configuration instructed by the server.
+   */
+  async updateConfiguration (speakerConfig) {
+    const audioContext = this.getVoiceAudioContext()
+    const resumeAudioContext = () => audioContext.resume()
+    const closeMsg = this.events.onMessage?.(
+      'Resuming audio context, click to continue',
+      'info'
+    )
+    document.addEventListener('click', resumeAudioContext)
+    await this.getAudioSource().resume()
+    document.removeEventListener('click', resumeAudioContext)
+    closeMsg?.()
+    document.removeEventListener('visibilitychange', this.handleSuspendOnHidden)
+    if (speakerConfig.suspendOnHide) {
+      document.addEventListener('visibilitychange', this.handleSuspendOnHidden)
+    }
+    await AudioSink.configure(audioContext, speakerConfig.useAudioElement)
+    this.sinkVolume = speakerConfig.sinkVolume ?? this.sinkVolume
+    this.events.onMessage?.(
+      'No keyword spotter, click the widget to trigger the dialog',
+      'info',
+      5000
+    )
+  }
+
+  startSourceCheckInterval () {
+    this.stopSourceCheckInterval()
+    this.sourceCheckIntervalRef = setInterval(
+      () =>
+
+        this.getAudioSource()
+          .resume()
+          .catch(err => this.events.onMessage?.('Unable to resume audio source', err)),
+      5000
+    )
+  }
+
+  stopSourceCheckInterval () {
+    if (this.sourceCheckIntervalRef) {
+      clearInterval(this.sourceCheckIntervalRef)
+      this.sourceCheckIntervalRef = undefined
+    }
+  }
+
+  /**
+   * Initializes the workers instance.
+   *
+   * @param speakerId the speaker identifier used by the server.
+   * @param customSampleRate Custom sample rate for the audio context, non functional in some browsers.
+   */
+  async initialize (speakerId, listeningItem, locationItem) {
+    this.events.onMessage?.('Starting ws connection...', 'info', 500)
+    this.startVoiceAudioContext()
+    const audioContext = this.getVoiceAudioContext()
+    audioContext.onstatechange = () => {
+      this.events.onMessage?.(`Audio context state '${audioContext.state}'`)
+      this.events.onRunningChange?.(this)
+    }
+    await audioContext.resume()
+    await AudioSource.configure(audioContext)
+    this.audioSource = new AudioSource(50)
+    await this.audioSource.resume()
+    this.startSourceCheckInterval()
+    // TODO: allow configure options
+    await this.updateConfiguration({
+      suspendOnHide: false,
+      useAudioElement: true,
+      sourceVolume: 100,
+      sinkVolume: 100
+    })
+    try {
+      this.worker.onmessage = ev => {
+        this.handleWorkerMessage(ev.data.cmd, ev.data)
+      }
+      this.worker.onerror = err => {
+        this.events.onMessage?.('Worker error.' + err.message)
+      }
+      this.worker.postMessage({
+        cmd: WorkerInCmd.INITIALIZE,
+        id: speakerId,
+        token: this.accessTokenGetter?.() ?? null,
+        sampleRate: this.getVoiceAudioContext().sampleRate,
+        listeningItem,
+        locationItem,
+        ohUrl: this.ohUrl
+      })
+    } catch (error) {
+      this.events.onMessage?.(
+        'Unable to start WebWorker, try reloading the page',
+        'error',
+        2000
+      )
+      throw error
+    }
+  }
+
+  close () {
+    this.worker.terminate()
+    this.worker = null
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/js/voice/audio-types.js b/bundles/org.openhab.ui/web/src/js/voice/audio-types.js
new file mode 100644
index 0000000000..e70eaff91e
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/js/voice/audio-types.js
@@ -0,0 +1,44 @@
+/**
+ * Byte that indicates stream termination, (prefixed by "4 bytes id" + "stream type byte" )
+ */
+export const SINK_TERMINATION_BYTE = '254'
+
+// Commands from worker to server (no command for sending audio as it is sent as binary message).
+export const WebSocketInCmd = {
+  INITIALIZE: 'INITIALIZE',
+  ON_SPOT: 'ON_SPOT'
+}
+
+// Commands from server to worker (no command for receiving audio as is sent as binary).
+export const WebSocketOutCmd = {
+  INITIALIZED: 'INITIALIZED',
+  START_LISTENING: 'START_LISTENING',
+  STOP_LISTENING: 'STOP_LISTENING',
+  SINK_VOLUME: 'SINK_VOLUME',
+  SOURCE_VOLUME: 'SOURCE_VOLUME'
+}
+
+// Commands from main thread to worker.
+export const WorkerInCmd = {
+  INITIALIZE: 'INITIALIZE',
+  RESUME: 'RESUME',
+  SUSPEND: 'SUSPEND',
+  SOURCE_PORT: 'SOURCE_PORT',
+  SINK_PORT: 'SINK_PORT',
+  ON_SPOT: 'ON_SPOT',
+  RESET_CONNECTION: 'RESET_CONNECTION',
+  TOKEN_RENEW: 'TOKEN_RENEW'
+}
+
+// Commands from worker to main thread.
+export const WorkerOutCmd = {
+  INITIALIZED: 'INITIALIZED',
+  SOURCE_READY: 'SOURCE_READY',
+  OFFLINE: 'OFFLINE',
+  START_SINK: 'START_SINK',
+  STOP_SINK: 'STOP_SINK',
+  START_LISTENING: 'START_LISTENING',
+  STOP_LISTENING: 'STOP_LISTENING',
+  SINK_VOLUME: 'SINK_VOLUME',
+  SOURCE_VOLUME: 'SOURCE_VOLUME'
+}
diff --git a/bundles/org.openhab.ui/web/src/js/voice/audio-worker.js b/bundles/org.openhab.ui/web/src/js/voice/audio-worker.js
new file mode 100644
index 0000000000..85a897febd
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/js/voice/audio-worker.js
@@ -0,0 +1,514 @@
+/// <reference lib="webworker" />
+
+import {
+  SINK_TERMINATION_BYTE,
+  WebSocketInCmd,
+  WebSocketOutCmd,
+  WorkerInCmd,
+  WorkerOutCmd
+} from './audio-types'
+import { ReentrantLock } from 'reentrant-lock'
+
+/** WebSocket reconnection timeout */
+const RECONNECT_MS = 5000
+
+/**
+ * Handles the websocket connection and the required audio format conversions.
+ */
+export default class AudioWorker {
+  constructor (postMessage) {
+    this.postMessage = postMessage
+    /** Speaker id */
+    this.id = ''
+    /** Listening Item */
+    this.listeningItem = ''
+    /** Location Item */
+    this.locationItem = ''
+    /** Speaker id */
+    this.id = ''
+    /** OpenHAB token */
+    this.token = ''
+    /** Sample rate of the audio context sample rate */
+    this.sampleRate = 0
+    /** Stores each sink context by its id */
+    this.sinkContextStorage = new Map()
+    /** Lock used to ensure sink data chunks are processed in order */
+    this.sinkLock = new ReentrantLock()
+    /** Lock used to ensure source data chunks are processed in order */
+    this.sourceLock = new ReentrantLock()
+    /** Holds the openHAB server url */
+    this.ohUrl = ''
+    /** Waiting for main configuration confirmation */
+    this.configuring = false
+    /** Enables auto reconnection */
+    this.reconnect = false
+  }
+
+  /**
+   * Sends a {@link WorkerOutCmd} to the main thread
+   */
+  postToMainThread (cmd, args) {
+    this.postMessage({ cmd, ...(args ?? {}) })
+  }
+
+  /**
+   *
+   * Send a {@link WebSocketInCmd} to the openHAB server
+   */
+  postToWebSocket (cmd, args) {
+    if (this.socket && this.socket.readyState === this.socket.OPEN) {
+      this.socket.send(JSON.stringify({ cmd, args }))
+    } else {
+      console.error('post cmd ' + cmd + ': WebSocket is not connected')
+    }
+  }
+
+  /**
+   * Handles the {@link WorkerInCmd} received from the main thread
+   */
+  async onMainThreadCommand (ev) {
+    try {
+      if (ev.origin !== '' || typeof ev.data !== 'object') {
+        return
+      }
+      const command = ev.data?.cmd
+      switch (command) {
+        case WorkerInCmd.INITIALIZE: {
+          const initData = ev.data
+          this.id = initData.id
+          this.sampleRate = initData.sampleRate
+          this.locationItem = initData.locationItem
+          this.listeningItem = initData.listeningItem
+          this.token = initData.token ?? ''
+          this.ohUrl = initData.ohUrl
+            .replace('https:', 'wss:')
+            .replace('http:', 'ws:')
+          this.reconnect = true
+          this.connectWebSocket()
+          break
+        }
+        case WorkerInCmd.RESUME:
+          this.reconnect = true
+          this.connectWebSocket()
+          break
+        case WorkerInCmd.SUSPEND:
+          this.reconnect = false
+          if (this.reconnectTimeoutRef) {
+            clearTimeout(this.reconnectTimeoutRef)
+            this.reconnectTimeoutRef = undefined
+          }
+          this.disconnectWebSocket()
+          break
+        case WorkerInCmd.SOURCE_PORT: {
+          const listenData = ev.data
+          this.sourcePort?.close()
+          this.sourcePort = listenData.port
+          this.sourcePort.onmessage = ev =>
+            this.handleSourceAudioBuffer(ev.data)
+          this.sourcePort.start()
+          this.postToMainThread(WorkerOutCmd.SOURCE_READY)
+          break
+        }
+        case WorkerInCmd.SINK_PORT: {
+          const speakPortData = ev.data
+          const sinkContext = this.sinkContextStorage.get(speakPortData.id)
+          if (sinkContext) {
+            const sinkPort = (sinkContext.port = speakPortData.port)
+            sinkPort.onmessage = ev => {
+              if (ev.data === false) {
+                // clean up sink context
+                this.sinkContextStorage.delete(speakPortData.id)
+                sinkPort.close()
+                this.postToMainThread(WorkerOutCmd.STOP_SINK, {
+                  id: speakPortData.id
+                })
+              }
+            }
+            sinkPort.start()
+            if (sinkContext.buffersCache.length) {
+              sinkPort.postMessage(sinkContext.buffersCache)
+            }
+            if (sinkContext.streamEnded) {
+              // notify streamCompletion
+              sinkPort.postMessage(false)
+            }
+          } else {
+            console.error('Unable to handle sink port, missing sink context')
+          }
+          break
+        }
+        case WorkerInCmd.ON_SPOT:
+          this.postToWebSocket(WebSocketInCmd.ON_SPOT)
+          break
+        case WorkerInCmd.TOKEN_RENEW: {
+          const { token } = ev.data
+          this.token = token
+          break
+        }
+        case WorkerInCmd.RESET_CONNECTION: {
+          const { id } = ev.data
+          this.id = id
+          this.disconnectWebSocket()
+          break
+        }
+        default:
+          throw new Error('Unknown command: ' + command)
+      }
+    } catch (error) {
+      console.error('Error handling command in worker: ', error)
+    }
+  }
+
+  /**
+   * Handles the {@link WebSocketOutCmd} received from OpenHAB
+   */
+  onWebSocketCommand (data) {
+    try {
+      const command = data.cmd
+      switch (command) {
+        case WebSocketOutCmd.INITIALIZED:
+          this.postToMainThread(WorkerOutCmd.INITIALIZED)
+          break
+        case WebSocketOutCmd.START_LISTENING:
+          this.postToMainThread(WorkerOutCmd.START_LISTENING)
+          break
+        case WebSocketOutCmd.STOP_LISTENING:
+          this.postToMainThread(WorkerOutCmd.STOP_LISTENING)
+          break
+        case WebSocketOutCmd.SINK_VOLUME: {
+          const sinkVolumeData = data
+          this.postToMainThread(WorkerOutCmd.SINK_VOLUME, sinkVolumeData)
+          break
+        }
+        case WebSocketOutCmd.SOURCE_VOLUME: {
+          const sourceVolumeData = data
+          this.postToMainThread(WorkerOutCmd.SOURCE_VOLUME, sourceVolumeData)
+          break
+        }
+        default:
+          throw new Error('Unknown command ' + command)
+      }
+    } catch (error) {
+      console.error('Error handling command in audio-worker: ', error)
+    }
+  }
+
+  /**
+   *  Starts the websocket connection to the openHAB server, with retry on error/disconnection.
+   */
+  connectWebSocket () {
+    const retry = () => {
+      if (this.reconnectTimeoutRef) {
+        clearTimeout(this.reconnectTimeoutRef)
+        this.reconnectTimeoutRef = undefined
+      }
+      this.reconnectTimeoutRef = setTimeout(
+        this.connectWebSocket.bind(this),
+        RECONNECT_MS
+      )
+    }
+    let wsRef = this.socket
+    let secHeader = []
+    if (this.token.length) {
+      const encodedToken = btoa(this.token).replace(/=*$/, '')
+      secHeader = [`org.openhab.ws.accessToken.base64.${encodedToken}`, 'org.openhab.ws.protocol.default']
+    }
+    try {
+      wsRef = this.socket = new WebSocket(`${this.ohUrl}/ws/audio-pcm`, secHeader)
+    } catch (error) {
+      console.error(error)
+      return retry()
+    }
+    wsRef.addEventListener('open', async () => {
+      this.sourcePacketHeader = undefined
+      const initMessage = JSON.stringify({
+        cmd: WebSocketInCmd.INITIALIZE,
+        args: {
+          id: this.id,
+          forceSampleRate: this.sampleRate,
+          startDialog: true,
+          listeningItem: this.listeningItem,
+          locationItem: this.locationItem
+        }
+      })
+      if (!wsRef) {
+        console.error('on open: Websocket is not connected!')
+        return
+      }
+      wsRef.send(initMessage)
+    })
+    wsRef.addEventListener('message', msg => {
+      const msgType = typeof msg.data
+      switch (msgType) {
+        case 'string':
+          // incoming command
+          this.onWebSocketCommand(JSON.parse(msg.data))
+          break
+        case 'object':
+          if (msg.data instanceof Blob) {
+            // incoming audio
+            const blob = msg.data
+            this.sinkLock
+              .lock(() =>
+                blob
+                  .arrayBuffer()
+                  .then(buffer => this.handleSinkAudioBuffer(buffer))
+              )
+              .catch(err => console.error('audio-worker: error on sink blob', err))
+          }
+          break
+        default:
+          console.error(
+            'websocket => audio-worker: unprocessed message typeof ' + msgType
+          )
+      }
+    })
+    wsRef.addEventListener('close', () => {
+      console.warn('websocket => audio-worker: connection closed')
+      this.configuring = false
+      this.sourcePort?.close()
+      this.sourcePacketHeader = undefined
+      this.sourcePort = undefined
+      this.sourceProcessor = undefined
+      this.socket = undefined
+      this.postToMainThread(WorkerOutCmd.OFFLINE)
+      if (this.reconnect) {
+        retry()
+      }
+    })
+    wsRef.addEventListener('error', err => console.error('ERROR:', err))
+    return wsRef
+  }
+
+  /**
+   * Closes the active socket connection if any
+   */
+  disconnectWebSocket () {
+    if (this.socket) {
+      this.socket.close()
+    } else {
+      console.error('audio-worker: WebSocket is not connected')
+    }
+  }
+
+  /**
+   * Sends audio though a {@link WebSocket} after encode it as a int 16 lower-endian buffer.
+   * Prepends the audio data with a header that contains the identity and format.
+   */
+  handleSourceAudioBuffer (buffer) {
+    if (this.socket) {
+      if (!this.sourcePacketHeader) {
+        this.sourcePacketHeader = generateAudioPacketHeader(this.sampleRate, 16, 1)
+      }
+      const audioChunk = audioToInt16Buffer(buffer)
+      let audioPacketByteArray = new Uint8Array(this.sourcePacketHeader.byteLength + audioChunk.byteLength)
+      audioPacketByteArray.set(new Uint8Array(this.sourcePacketHeader), 0)
+      audioPacketByteArray.set(new Uint8Array(audioChunk), this.sourcePacketHeader.byteLength)
+      this.socket.send(audioPacketByteArray.buffer)
+    } else {
+      console.error('Error sending audio to oh: WebSocket is not connected')
+    }
+  }
+
+  /**
+   * Sends audio to the audio system, after encode it as a float 32 buffer.
+   * When it gets a new sink id (extracted from the buffer), it creates a sink context, request the required setup to the main thread.
+   *
+   * If there is message port in the correspondent {@link SinkContext} sends audio though it,
+   * else cache the audio into the sink context cache, so it can be send when the port is ready.
+   *
+   * Resamples the audio when needed from stream sample rate to the audio context sample rate.
+   */
+  async handleSinkAudioBuffer (buffer) {
+    // First 2 bytes from each chunk contains the stream id
+    const streamId = new Uint8Array(buffer.slice(0, 2)).join('-')
+    // skip packet header
+    const dataBuffer = buffer.slice(AUDIO_PACKET_HEADER_LENGTH)
+    let sinkContext = this.sinkContextStorage.get(streamId)
+    if (!sinkContext) {
+      // Second 3 bytes from each chunk contains the stream format
+      const { sampleRate, bitDepth, channels } = parseAudioFormat(buffer)
+      if (sampleRate !== this.sampleRate) {
+        console.error(`Unexpected sample rate on sink ${streamId} data`)
+      }
+      sinkContext = {
+        bitDepth,
+        buffersCache: [],
+        streamEnded: false,
+        port: undefined
+      }
+      this.sinkContextStorage.set(streamId, sinkContext)
+      // request the setup of a sink to the main thead
+      this.postToMainThread(WorkerOutCmd.START_SINK, {
+        id: streamId,
+        channels
+      })
+    }
+    if (dataBuffer.byteLength === 1) {
+      if (SINK_TERMINATION_BYTE === new Uint8Array(dataBuffer).toString()) {
+        sinkContext.streamEnded = true
+        if (sinkContext.port) {
+          sinkContext.port.postMessage(false)
+          return
+        }
+      }
+    }
+    let decodeFn
+    switch (sinkContext.bitDepth) {
+      case 8:
+        decodeFn = audioFromInt8Buffer
+        break
+      case 16:
+        decodeFn = audioFromInt16Buffer
+        break
+      case 24:
+        decodeFn = audioFromInt24Buffer
+        break
+      case 32:
+        decodeFn = audioFromInt32Buffer
+        break
+      default:
+        console.error(`Unsupported bitDepth ${sinkContext.bitDepth} on audio sink ${streamId} ignoring`)
+        return
+    }
+    const audioSamples = decodeFn(dataBuffer)
+    // transform the incoming buffer to the browser format and send
+    if (sinkContext.port) {
+      sinkContext.port.postMessage(audioSamples)
+    } else {
+      sinkContext.buffersCache.push(audioSamples)
+    }
+  }
+}
+
+// Audio packet header parser/generator
+
+const AUDIO_PACKET_HEADER_LENGTH = 2 + 4 + 1 + 1
+
+function generateAudioPacketHeader (sampleRate, bitDepth, channels) {
+  const view = new DataView(new ArrayBuffer(AUDIO_PACKET_HEADER_LENGTH))
+  let id = new Uint8Array(2)
+  crypto.getRandomValues(id)
+  view.setUint8(0, id[0])
+  view.setUint8(1, id[1])
+  view.setInt32(2, sampleRate, true)
+  view.setUint8(6, bitDepth)
+  view.setUint8(7, channels)
+  return view.buffer
+}
+
+function parseAudioFormat (buffer) {
+  const view = new DataView(buffer)
+  const sampleRate = view.getInt32(2, true)
+  const bitDepth = view.getUint8(6)
+  const channels = view.getUint8(7)
+  return { sampleRate, bitDepth, channels }
+}
+
+// WAV conversion utils
+/**
+ * Converts a Float32Array into a int16 ArrayBuffer, the required by the server.
+ */
+function audioToInt16Buffer (audioSamples) {
+  const bytesPerSample = 2
+  const output = new DataView(new ArrayBuffer(audioSamples.length * bytesPerSample))
+  let offset = 0
+  for (let i = 0; i < audioSamples.length; i += 1, offset += bytesPerSample) {
+    const floatValue = Math.max(-1, Math.min(1, audioSamples[i]))
+    output.setInt16(offset, floatValue < 0 ? floatValue * 0x8000 : floatValue * 0x7fff, true)
+  }
+  return output.buffer
+}
+
+/**
+ * Converts a int8 ArrayBuffer into a Float32Array of samples, the required by the browser.
+ */
+function audioFromInt8Buffer (buffer) {
+  const view = new DataView(buffer)
+  const bytesPerSample = 1
+  const nSamples = buffer.byteLength / bytesPerSample
+  const audioSamples = new Float32Array(nSamples)
+  for (let i = 0, offset = 0; i < nSamples; i += 1, offset += bytesPerSample) {
+    const intValue = view.getInt8(offset, true)
+    const floatValue = intValue < 0 ? intValue / 0x80 : intValue / 0x7F
+    audioSamples[i] = Math.max(-1, Math.min(1, floatValue))
+  }
+  return audioSamples
+}
+
+/**
+ * Converts a int16 ArrayBuffer into a Float32Array of samples, the required by the browser.
+ */
+function audioFromInt16Buffer (buffer) {
+  const view = new DataView(buffer)
+  const bytesPerSample = 2
+  const nSamples = buffer.byteLength / bytesPerSample
+  if (buffer.byteLength % bytesPerSample) {
+    console.warn('Voice: Missing bytes on audio data ' + buffer.byteLength % bytesPerSample)
+  }
+  const audioSamples = new Float32Array(nSamples)
+  for (let i = 0, offset = 0; i < nSamples; i += 1, offset += bytesPerSample) {
+    const intValue = view.getInt16(offset, true)
+    const floatValue = intValue < 0 ? intValue / 0x8000 : intValue / 0x7fff
+    audioSamples[i] = Math.max(-1, Math.min(1, floatValue))
+  }
+  return audioSamples
+}
+
+/**
+ * Converts a int32 ArrayBuffer into a Float32Array of samples, the required by the browser.
+ */
+function audioFromInt32Buffer (buffer) {
+  const view = new DataView(buffer)
+  const bytesPerSample = 4
+  const nSamples = buffer.byteLength / bytesPerSample
+  if (buffer.byteLength % bytesPerSample) {
+    console.warn('Voice: Missing bytes on audio data ' + buffer.byteLength % bytesPerSample)
+  }
+  const audioSamples = new Float32Array(nSamples)
+  for (let i = 0, offset = 0; i < nSamples; i += 1, offset += bytesPerSample) {
+    const intValue = view.getInt32(offset, true)
+    const floatValue = intValue < 0 ? intValue / 0x80000000 : intValue / 0x7fffffff
+    audioSamples[i] = Math.max(-1, Math.min(1, floatValue))
+  }
+  return audioSamples
+}
+
+class DataViewExtended extends DataView {
+  getUint24 (byteOffset = 0, littleEndian = false) {
+    return littleEndian
+      ? this.getUint8(byteOffset) + (this.getUint16(byteOffset + 1, littleEndian) << 8)
+      : (this.getUint16(byteOffset, littleEndian) << 8) + this.getUint8(byteOffset + 2)
+  }
+
+  getInt24 (byteOffset = 0, littleEndian = false) {
+    const valU24 = this.getUint24(byteOffset, littleEndian)
+    const isNeg = valU24 & 0x800000
+    return (!isNeg) ? valU24 : ((0xffffff - valU24 + 1) * -1)
+  }
+}
+
+/**
+ * Converts a int24 ArrayBuffer into a Float32Array of samples, the required by the browser.
+ */
+function audioFromInt24Buffer (buffer) {
+  const view = new DataViewExtended(buffer)
+  const bytesPerSample = 3
+  const nSamples = buffer.byteLength / bytesPerSample
+  if (buffer.byteLength % bytesPerSample) {
+    console.warn('Voice: Missing bytes on audio data ' + buffer.byteLength % bytesPerSample)
+  }
+  const audioSamples = new Float32Array(nSamples)
+  for (let i = 0, offset = 0; i < nSamples; i += 1, offset += bytesPerSample) {
+    const intValue = view.getInt24(offset, true)
+    const floatValue = intValue < 0 ? intValue / 0x800000 : intValue / 0x7fffff
+    audioSamples[i] = Math.max(-1, Math.min(1, floatValue))
+  }
+  return audioSamples
+}
+
+// bind the WebWorker context to an AudioWorker instance
+if (typeof postMessage !== 'undefined') {
+  const ioWorker = new AudioWorker(postMessage.bind(this))
+  onmessage = ioWorker.onMainThreadCommand.bind(ioWorker)
+}
diff --git a/bundles/org.openhab.ui/web/src/js/voice/audio/audio-sink-worklet.js b/bundles/org.openhab.ui/web/src/js/voice/audio/audio-sink-worklet.js
new file mode 100644
index 0000000000..498e707c49
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/js/voice/audio/audio-sink-worklet.js
@@ -0,0 +1,154 @@
+/**
+ * The {@link AudioSinkWorklet} is the {@link AudioWorkletProcessor} implementation used by the {@link AudioSink} class,
+ * it caches the data received through its {@link MessagePort} and feed it to the connected {@link AudioProcessor}
+ *
+ */
+class AudioSinkWorklet extends AudioWorkletProcessor {
+  constructor () {
+    super()
+    /**
+     * Audio Cache
+     */
+    this.audioCache = new AudioCache()
+    /**
+     * Indicates the data transmission has not ended
+     */
+    this.streaming = true
+    /**
+     * Indicates all data has been played and the sink can be disposed
+     */
+    this.done = false
+    // Setup message handler
+    this.port.onmessage = ev => this.handlePortMessage(ev.data)
+  }
+
+  handlePortMessage (data) {
+    if (data instanceof Float32Array) {
+      this.audioCache.writeAudioData(data)
+    } else if (Array.isArray(data)) {
+      data.forEach(buffer => this.audioCache.writeAudioData(buffer))
+    } else if (data === false) {
+      this.streaming = false
+    }
+  }
+
+  process (_, outputs) {
+    const frameLength = outputs[0][0].length
+    const channels = outputs[0].length
+    const bufferSize = frameLength * channels
+    const dataAvailable = this.audioCache.available(bufferSize)
+    if (!dataAvailable) {
+      if (this.streaming) {
+        return true
+      } else {
+        if (this.audioCache.size() !== 0) {
+          // send remaining audio
+          const audioData = new Float32Array(bufferSize)
+          audioData.set(
+            this.audioCache.readAudioData(this.audioCache.size()),
+            0
+          )
+          this.writeAudioSamples(audioData, outputs, channels)
+          return true
+        }
+        if (!this.done) {
+          this.done = true
+          // notify completion
+          this.port.postMessage(false)
+          this.port.close()
+        }
+        return false
+      }
+    }
+    const audioData = this.audioCache.readAudioData(bufferSize)
+    this.writeAudioSamples(audioData, outputs, channels)
+    return true
+  }
+
+  writeAudioSamples (audioData, outputs, channels) {
+    if (channels === 1) {
+      outputs[0][0].set(audioData, 0)
+    } else {
+      // move the interlaced audio samples to the correct channel
+      const channelsData = outputs[0]
+      audioData.forEach((sample, sampleNumber) => {
+        const channelIndex = sampleNumber % channels
+        channelsData[channelIndex][
+          (sampleNumber - channelIndex) / channels
+        ] = sample
+      })
+    }
+  }
+}
+
+/**
+ * The {@link AudioCache} class is an util to store the audio data received through the {@link MessagePort} so it can be consumed progressively.
+ */
+class AudioCache {
+  constructor () {
+    this.buffers = []
+    this.offset = 0
+    this.length = 0
+  }
+
+  readAudioData (n) {
+    this.length -= n
+    const currentBuffer = this.buffers[0]
+    const nextOffset = n + this.offset
+    if (nextOffset <= currentBuffer.length) {
+      const chunk = currentBuffer.subarray(this.offset, this.offset + n)
+      if (nextOffset < currentBuffer.length) {
+        this.offset = nextOffset
+      } else {
+        this.offset = 0
+        this.buffers.shift()
+      }
+      return chunk
+    } else {
+      const partialChunks = [currentBuffer.subarray(this.offset)]
+      this.buffers.shift()
+      let required = n - partialChunks[0].length
+      while (required > 0) {
+        const nextBuffer = this.buffers[0]
+        if (required > nextBuffer.length) {
+          partialChunks.push(nextBuffer)
+          required -= nextBuffer.length
+          this.buffers.shift()
+        } else {
+          const partialBuffer = currentBuffer.subarray(0, required)
+          partialChunks.push(partialBuffer)
+          this.offset = partialBuffer.length
+          required -= partialBuffer.length
+        }
+      }
+      const chunk = new Float32Array(n)
+      let resultOffset = 0
+      for (const _chunk of partialChunks) {
+        chunk.set(_chunk, resultOffset)
+        resultOffset += _chunk.length
+      }
+      return chunk
+    }
+  }
+
+  writeAudioData (buffer) {
+    this.length += buffer.length
+    this.buffers.push(buffer)
+  }
+
+  available (size) {
+    return this.length >= size
+  }
+
+  size () {
+    return this.length
+  }
+
+  clean () {
+    this.buffers = []
+    this.offset = 0
+    this.length = 0
+  }
+}
+
+registerProcessor('websocket-sink-worklet', AudioSinkWorklet)
diff --git a/bundles/org.openhab.ui/web/src/js/voice/audio/audio-sink.js b/bundles/org.openhab.ui/web/src/js/voice/audio/audio-sink.js
new file mode 100644
index 0000000000..ac46d6cc25
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/js/voice/audio/audio-sink.js
@@ -0,0 +1,94 @@
+/**
+ * The {@link AudioSink} class plays the audio transmitted by an AudioNode using the audioContext destination or a MediaStreamDestination + a web AudioElement.
+ */
+export class AudioSink {
+  constructor (id, channels, volume) {
+    this.id = id
+    this.channels = channels
+    this.processorNode = new AudioWorkletNode(
+      this.getAudioContext(),
+      'websocket-sink-worklet',
+      {
+        numberOfInputs: 0,
+        numberOfOutputs: 1,
+        outputChannelCount: [channels],
+        channelCountMode: 'explicit'
+      }
+    )
+    this.gainNode = this.getAudioContext().createGain()
+    this.gainNode.gain.value = volume / 100
+  }
+
+  static async configure (audioContext, useAudioElement) {
+    await audioContext.audioWorklet.addModule(new URL('./audio-sink-worklet.js', import.meta.url))
+    AudioSink.audioContext = audioContext
+    if (useAudioElement) {
+      console.debug('Voice: Using audio element to render sound')
+      if (!AudioSink.destination) {
+        AudioSink.destination = audioContext.createMediaStreamDestination()
+      }
+      if (!AudioSink.audioElement) {
+        AudioSink.audioElement = new Audio()
+        AudioSink.audioElement.srcObject = AudioSink.destination.stream
+      }
+    } else {
+      console.debug(
+        'Voice: Using audio context destination to render sound'
+      )
+      AudioSink.destination?.stream.getTracks().forEach(t => t.stop())
+      AudioSink.destination = undefined
+      AudioSink.audioElement?.remove()
+      AudioSink.audioElement = undefined
+    }
+  }
+
+  async start () {
+    AudioSink.connectedNodes++
+    this.processorNode.connect(this.gainNode)
+    if (!AudioSink.destination || !AudioSink.audioElement) {
+      this.gainNode.connect(this.getAudioContext().destination)
+    } else {
+      this.gainNode.connect(AudioSink.destination)
+      if (AudioSink.connectedNodes === 1) {
+        console.debug('Voice: Play audio element')
+        await AudioSink.audioElement.play()
+      }
+    }
+  }
+
+  getId () {
+    return this.id
+  }
+
+  setVolume (value) {
+    this.gainNode.gain.setValueAtTime(
+      value / 100,
+      this.getAudioContext().currentTime
+    )
+  }
+
+  close () {
+    AudioSink.connectedNodes--
+    const audioElement = AudioSink.audioElement
+    if (audioElement) {
+      if (AudioSink.connectedNodes === 0) {
+        console.debug('Voice: Pause audio element')
+        audioElement.pause()
+      }
+    }
+    this.processorNode.disconnect()
+    this.gainNode.disconnect()
+  }
+
+  getMessagePort () {
+    return this.processorNode.port
+  }
+
+  getAudioContext () {
+    if (!AudioSink.audioContext) {
+      throw new Error('Sink class must be configured')
+    }
+    return AudioSink.audioContext
+  }
+}
+AudioSink.connectedNodes = 0
diff --git a/bundles/org.openhab.ui/web/src/js/voice/audio/audio-source-worklet.js b/bundles/org.openhab.ui/web/src/js/voice/audio/audio-source-worklet.js
new file mode 100644
index 0000000000..c7c9ce76ad
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/js/voice/audio/audio-source-worklet.js
@@ -0,0 +1,14 @@
+/**
+ * The class {@link AudioSourceWorklet}, is an {@link AudioWorkletProcessor} implementation that sends the incoming audio data through a {@link MessagePort}.
+ */
+class AudioSourceWorklet extends AudioWorkletProcessor {
+  process (inputs) {
+    if (inputs[0].length) {
+      // only supports one channel
+      this.port.postMessage(new Float32Array(inputs[0][0]))
+    }
+    return true
+  }
+}
+
+registerProcessor('websocket-source-worklet', AudioSourceWorklet)
diff --git a/bundles/org.openhab.ui/web/src/js/voice/audio/audio-source.js b/bundles/org.openhab.ui/web/src/js/voice/audio/audio-source.js
new file mode 100644
index 0000000000..6917151b0c
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/js/voice/audio/audio-source.js
@@ -0,0 +1,105 @@
+/**
+ * Utility class to encapsulate the creation of a {@link MediaStreamAudioSourceNode}, and handle its connected {@link AudioNode} processors.
+ *
+ * It uses a {@link GainNode} to share the data across the connected nodes.
+ *
+ * We keep the gain node connected to the media source stream to avoid it gets paused.
+ */
+export class AudioSource {
+  constructor (volume) {
+    this.gainNode = this.getAudioContext().createGain()
+    this.setVolume(volume)
+  }
+
+  static async configure (audioContext) {
+    AudioSource.audioContext = audioContext
+    await audioContext.audioWorklet.addModule(new URL('./audio-source-worklet.js', import.meta.url))
+  }
+
+  async init () {
+    if (!this.stream) {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          autoGainControl: true,
+          echoCancellation: true,
+          noiseSuppression: true
+        },
+        video: false
+      })
+    }
+    if (!this.sourceNode) {
+      this.sourceNode = this.getAudioContext().createMediaStreamSource(
+        this.stream
+      )
+      // connect processor to source
+      this.sourceNode.connect(this.gainNode)
+    }
+  }
+
+  isSuspended () {
+    return this.getAudioContext().state !== 'running'
+  }
+
+  async resume () {
+    if (this.getAudioContext().state !== 'running') {
+      console.debug('Voice: Resuming voice audio context')
+      await this.getAudioContext().resume()
+    }
+    if (this.getAudioContext().state !== 'running') {
+    } else if (!this.stream || !this.stream.active) {
+      this.stream = undefined
+      this.sourceNode?.disconnect()
+      this.sourceNode = undefined
+      await this.init()
+    }
+  }
+
+  async start (...audioProcessors) {
+    await this.resume()
+    const currentProcessors = this.nodeProcessors ?? []
+    audioProcessors
+      .filter(p => !currentProcessors.includes(p))
+      .forEach(audioNode => this.connectNode(audioNode))
+    currentProcessors
+      .filter(p => !audioProcessors.includes(p))
+      .forEach(audioNode => this.disconnectNode(audioNode))
+    this.nodeProcessors = audioProcessors
+  }
+
+  setVolume (value) {
+    this.gainNode.gain.setValueAtTime(
+      value / 100,
+      this.getAudioContext().currentTime
+    )
+  }
+
+  stop () {
+    if (this.nodeProcessors) {
+      for (const audioNode of this.nodeProcessors) {
+        this.disconnectNode(audioNode)
+      }
+      this.nodeProcessors = undefined
+    }
+  }
+
+  connectNode (audioNode) {
+    this.gainNode.connect(audioNode)
+    if (audioNode.numberOfOutputs > 0) {
+      audioNode.connect(this.getAudioContext().destination)
+    }
+  }
+
+  disconnectNode (audioNode) {
+    this.gainNode.disconnect(audioNode)
+    if (audioNode.numberOfOutputs > 0) {
+      audioNode.disconnect(this.getAudioContext().destination)
+    }
+  }
+
+  getAudioContext () {
+    if (!AudioSource.audioContext) {
+      throw new Error('Source class must be configured')
+    }
+    return AudioSource.audioContext
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/pages/home.vue b/bundles/org.openhab.ui/web/src/pages/home.vue
index 4c290c0afe..270323a9e3 100644
--- a/bundles/org.openhab.ui/web/src/pages/home.vue
+++ b/bundles/org.openhab.ui/web/src/pages/home.vue
@@ -12,6 +12,7 @@
         {{ title }}
       </f7-nav-title>
       <f7-nav-right>
+        <f7-link v-if="this.$store.getters.voiceIcon" :icon-aurora="this.$store.getters.voiceIcon" :tooltip="$t('home.triggerVoice')" @click="$f7.emit('triggerDialog')" />
         <developer-dock-icon />
         <f7-link v-if="this.$store.getters.isAdmin" icon-ios="f7:pencil" icon-aurora="f7:pencil" icon-md="material:edit" :tooltip="$t('home.editHome')" :href="(homePageComponent) ? '/settings/pages/home/home' : '/settings/pages/home/add'" />
         <f7-link v-if="showPinToHome" icon-ios="f7:pin_fill" icon-aurora="f7:pin_fill" icon-md="material:add_location" :tooltip="$t('home.pinToHome')" @click="pinToHome" />