How to Play a Beep Sound When Scanning a Barcode on iOS (iPhone, iPad)

When using our Barcode Scanner for Website SDK, you may encounter the following issue:

When the scanner is created and started immediately upon navigating to the scanner page, the beep sound does not play after a barcode is decoded.

You can test this behavior here:
https://websdk.datasymbol.com/

Why This Happens on iOS

iOS requires some form of user interaction before a webpage is allowed to play sound.
This could be a click, a tap, a scroll, etc.
If the scanner is created and started automatically, there is no user interaction yet — so iOS blocks the sound.

The Solution (The Trick)

The trick is simple: don’t create the scanner immediately after the page loads.
Instead, display a button such as “SCAN”.
When the user clicks this button, we create the scanner — and in the same event handler, we “unlock” the ability to play sounds.

Example Code

function OnScannerButtonClick() {
	beepObj = new Audio("");
	beepObj.play();
	beepObj.src = "https://websdk.datasymbol.com/audio/beep1.mp3";

	document.getElementById('scanbutton').style.display = 'none';
	CreateScanner();
}

Explanation

  • We create a new Audio object and call play() before setting its source.
  • Since the object has no source yet, no sound is actually played, but iOS now considers the page as having a valid user interaction.
  • After this, iOS allows JavaScript to play sounds freely.

Finally, in the onBarcodeReady event handler (which fires after a barcode is successfully decoded), we simply call:

beepObj.play();

This time, the sound will play correctly.

Example

You can see the full source code here:
https://websdk.datasymbol.com/appsound/js/main.js

And you can test the live demo here:
https://websdk.datasymbol.com/appsound/


Ready to get started?

Integrate the DataSymbol Web SDK into your Web application in under an hour. Check out our tutorials, documentation, source code, or download the demo app to get started right away.


Barcode Scanner Web SDK