Issues Integrating Audio Menu Features on My Culver Menu Website with Sonos Devices

Hello Sonos Community,

I’ve been working on a web project for my Culver menu website, where we try to enhance the dining experience by adding audio elements for each menu item like pronunciation guides, descriptions, or themed background sounds. The goal is that when someone accesses the menu on their device, they can stream these audio snippets directly to their Sonos speakers.

So far, I’ve tried embedding standard MP3 and AAC audio files using HTML5 audio tags, and even experimented with third-party streaming APIs, but I’m running into several issues:

1. Device Detection: The website doesn’t reliably detect Sonos speakers on the same network. Sometimes the devices show up, sometimes they don’t, even though they are on the same Wi-Fi.

2. Streaming Compatibility: When a device is detected, the audio sometimes plays partially or gets cut off mid-way. You can check url. It seems like the streaming format or the way the culver menu website serves the files could be a problem.

3. Latency & Synchronization: If multiple speakers are used simultaneously, the audio is noticeably out of sync. We want the menu descriptions to play in perfect sync across multiple zones.

4. Authentication & Access: We’ve tried using token-based access to secure our audio files, but Sonos occasionally fails to authenticate and just won’t play the files.

I’ve double-checked my network setup and firewall settings, and the files themselves play perfectly on other devices like laptops and phones.

I’m hoping to get guidance on:

• Best practices for serving menu-related audio from a web application to Sonos speakers.

• Recommended audio formats or streaming protocols that Sonos handles reliably.

• Any tips to handle device discovery and synchronization programmatically.

Any advice or examples from others who have integrated custom web-based audio with Sonos would be extremely helpful.

Thanks in advance!