feat(stage-tamagotchi,stage-pages,stage-shared): show alert when there is no audio input for troubleshooting

Author: sumimakito

apps/stage-tamagotchi/src/main/windows/beat-sync/index.ts

@@ -33,7 +33,7 @@ export async function setupBeatSync() {
   })
   const context = createContext(ipcMain, window).context
 
-  // TODO(Makito): Revisit and improve
+  // TODO(Makito): Bypass here with the broadcast channel-based transport when it is released.
   // [main] -> [renderer] beat-sync
   const toggle = defineInvoke(context, beatSyncElectronToggle) as (enabled: boolean) => Promise<void> // TODO: Better type
   const getState = defineInvoke(context, beatSyncElectronGetState)

packages/stage-pages/src/pages/settings/modules/beat-sync.vue

@@ -11,15 +11,16 @@ import {
   toggleBeatSync,
   updateBeatSyncParameters,
 } from '@proj-airi/stage-shared/beat-sync/browser'
-import { AudioSpectrumVisualizer } from '@proj-airi/stage-ui/components'
+import { Alert, AudioSpectrumVisualizer } from '@proj-airi/stage-ui/components'
 import { Button, FieldCheckbox, FieldRange } from '@proj-airi/ui'
 import { createTimeline } from 'animejs'
 import { nanoid } from 'nanoid'
-import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const state = ref<BeatSyncDetectorState>()
 const frequencies = ref<number[]>([])
+const totalFreqHistory = ref<number[]>([])
 const isUpdatingFrequencies = ref(false)
 
 const { t } = useI18n()
@@ -72,13 +73,30 @@ function resetDefaultParameters() {
 
 async function updateFrequencies() {
   frequencies.value = Array.from(await getBeatSyncInputByteFrequencyData())
+  totalFreqHistory.value.push(frequencies.value.reduce((a, b) => a + b, 0))
 
-  if (isUpdatingFrequencies.value)
+  while (totalFreqHistory.value.length > 50)
+    totalFreqHistory.value.shift()
+
+  if (isUpdatingFrequencies.value) {
     requestAnimationFrame(updateFrequencies)
-  else
-    frequencies.value = [0]
+  }
+  else {
+    frequencies.value = frequencies.value.map(() => 0)
+    totalFreqHistory.value = []
+  }
 }
 
+const noAudioDetected = computed(() => {
+  if (!isUpdatingFrequencies.value)
+    return false
+
+  if (totalFreqHistory.value.length < 50)
+    return false
+
+  return totalFreqHistory.value.reduce((a, b) => a + b, 0) === 0
+})
+
 watch(state, async (newState) => {
   if (newState?.isActive) {
     if (!isUpdatingFrequencies.value) {
@@ -145,6 +163,18 @@ onUnmounted(() => {
           </div>
         </div>
 
+        <Alert
+          v-if="noAudioDetected"
+          type="warning"
+        >
+          <template #title>
+            No audio detected
+          </template>
+          <template #content>
+            Please make sure that the correct permissions are granted and the audio source is playing sound.
+          </template>
+        </Alert>
+
         <div flex="~ col gap-4">
           <div flex="~ row" items-center justify-between>
             <div>

packages/stage-shared/src/beat-sync/browser/eventa.ts

@@ -4,6 +4,7 @@ import { isElectronWindow } from '@proj-airi/stage-shared'
 
 export function createContext() {
   if (isElectronWindow(window)) {
+    // TODO(Makito): Replace this with the broadcast channel-based transport when it is released.
     return createElectronRendererContext(window.electron.ipcRenderer).context
   }
   else {