Merge pull request #11164 from Budibase/budi-7167-add-a-sound-alert-to-qr-scanner-component

add scanner beep on successful qr/barcode scan

packages/client/manifest.json

@@ -3172,6 +3172,46 @@
         "key": "allowManualEntry",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Play sound on scan",
+        "key": "beepOnScan",
+        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Sound pitch",
+        "key": "beepFrequency",
+        "dependsOn": "beepOnScan",
+        "defaultValue": 2637,
+        "options": [
+          {
+            "label": "Low",
+            "value": 2096
+          },
+          {
+            "label": "Regular",
+            "value": 2637
+          },
+          {
+            "label": "High",
+            "value": 3136
+          },
+          { "label": "Custom", "value": "custom" }
+        ]
+      },
+      {
+        "type": "number",
+        "label": "Sound frequency (Hz)",
+        "key": "customFrequency",
+        "defaultValue": 1046,
+        "min": 20,
+        "max": 8000,
+        "dependsOn": {
+          "setting": "beepFrequency",
+          "value": "custom"
+        }
+      },
       {
         "type": "validation/string",
         "label": "Validation",

packages/client/src/components/app/forms/CodeScanner.svelte

@@ -8,6 +8,10 @@
   export let disabled = false
   export let allowManualEntry = false
   export let scanButtonText = "Scan code"
+  export let beepOnScan = false
+  export let beepFrequency = 2637
+  export let customFrequency = 1046
+
   const dispatch = createEventDispatcher()
 
   let videoEle
@@ -21,8 +25,13 @@
     fps: 25,
     qrbox: { width: 250, height: 250 },
   }
+  const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
+
   const onScanSuccess = decodedText => {
     if (value != decodedText) {
+      if (beepOnScan) {
+        beep()
+      }
       dispatch("change", decodedText)
     }
   }
@@ -84,6 +93,27 @@
     }
     camModal.hide()
   }
+
+  const beep = () => {
+    const oscillator = audioCtx.createOscillator()
+    const gainNode = audioCtx.createGain()
+
+    oscillator.connect(gainNode)
+    gainNode.connect(audioCtx.destination)
+
+    const frequency =
+      beepFrequency === "custom" ? customFrequency : beepFrequency
+    oscillator.frequency.value = frequency
+    oscillator.type = "square"
+
+    const duration = 420
+    const endTime = audioCtx.currentTime + duration / 1000
+    gainNode.gain.setValueAtTime(1, audioCtx.currentTime)
+    gainNode.gain.exponentialRampToValueAtTime(0.001, endTime)
+
+    oscillator.start()
+    oscillator.stop(endTime)
+  }
 </script>
 
 <div class="scanner-video-wrapper">

packages/client/src/components/app/forms/CodeScannerField.svelte

@@ -11,6 +11,9 @@
   export let onChange
   export let allowManualEntry
   export let scanButtonText
+  export let beepOnScan
+  export let beepFrequency
+  export let customFrequency
 
   let fieldState
   let fieldApi
@@ -42,6 +45,9 @@
       disabled={fieldState.disabled}
       {allowManualEntry}
       scanButtonText={scanText}
+      {beepOnScan}
+      {beepFrequency}
+      {customFrequency}
     />
   {/if}
 </Field>