Customizing the Scanner Sound

Sometimes it is desirable to customize the sound played when a barcode is scanned, depending on business logic. Currently STRICH itself includes only a standard "cash register" beep sound, which can be toggled on or off via the audio property of the feedback configuration.

Use Cases for Playing Custom Sounds

Some examples of scanning scenarios where a custom sound is desirable:

Valid/expired tickets: a positive sound is played if the QR code contains a valid ticket, a negative one if it's expired or not in the expected format.
Format issues: a negative sound is played if the scanned barcode is in the wrong format, has an incorrect length, contains unexpected data.
Network errors: the scanned barcode could not be looked up, play a sound to indicate that the user should try again.

As STRICH is only concerned with scanning barcodes, it cannot know if a barcode is valid in the context of its host app. An app-specific, asynchronous operation (e.g. an HTTP request) is often required to determine its validity, which introduces an unpredictable delay.

Playing Custom Sounds with Howler.js

The recommended approach to playing custom sounds is using a library like Howler.js to play the sound in the detected callback, and disabling the default beep by setting the audio to false.

Sample Code

In this sample, a positive sound is played if the scanned QR code contains a valid URL, and a negative sound is played otherwise. The sounds are preloaded before the scanner is started, so that they are ready to play immediately when a code is scanned.

// import Howler.js for playing sounds
import { Howl } from 'https://cdn.jsdelivr.net/npm/howler@2.2.4/+esm';

// prepare Howler.js sounds
const sounds = {
    positive: new Howl({
        src: ['positive.mp3'],
        preload: true
    }),
    negative: new Howl({
        src: ['negative.mp3'],
        preload: true
    })
}

/** Play a positive sound if QR Code contains a valid URL, negative otherwise */
function processDetection(detection) {
    try {
        const parsedUrl = new URL(detection.data);
        console.log(`QR code contains URL: ${parsedUrl}`)
        sounds.positive.play();
    } catch (e) {
        // TypeError thrown if URL is not OK
        sounds.negative.play();
    }
}

try {
    await StrichSDK.initialize(`<your license key>`);
    const cfg = {
        selector: '.barcode-reader',
        engine: {
            symbologies: ['qr'],
        },
        feedback: {
            audio: false // disable STRICH's default beep
        }
    };
    let barcodeReader = new BarcodeReader(cfg);
    barcodeReader.detected = (detections) => processDetection(detections[0]);
    await barcodeReader.initialize();
    await barcodeReader.start();
} catch (e) {
    window.alert(e.message);
}

08 May 2025