Audio glitches during playback on web when using Airplay

[robertgonzales]

Video Demo
https://www.dropbox.com/scl/fi/cd800cu5vidphj91qbzta/airplay-glitch.mov?rlkey=hb3pl3fszlt0m41oxuvn2j704&st=mtnne5xu&dl=0

airplay-glitch.mov

Describe the Bug
Audio repeats and stutters during playback, but only when playing on the web and using Airplay through an external speaker.

Steps To Reproduce

1. Run a web app using RNTP
2. Use Airplay to play through an external speaker
3. Play a track

Code To Reproduce

import { useEffect, useState } from "react"
import { Button, Text, View } from "react-native"
import TrackPlayer, {
  useIsPlaying,
  usePlaybackState
} from "react-native-track-player"

const track = `https://stream.mux.com/3Id1WxKBRjAbDvGd9nQQabTkglp7iVQvQOcdSQX5hDw.m3u8?add_audio_only=true`

function Player() {
  const { playing, bufferingDuringPlay } = useIsPlaying()
  const { state } = usePlaybackState()

  return (
    <View style={{ padding: 40, flex: 1, alignItems: "flex-start", gap: 10 }}>
      <Button
        disabled={bufferingDuringPlay}
        title={
          bufferingDuringPlay ? "Buffering..." : playing ? "Pause" : "Play"
        }
        onPress={async () => {
          if (playing) {
            await TrackPlayer.pause()
          } else {
            await TrackPlayer.play()
          }
        }}
      />
      <Text style={{ fontFamily: "monospace" }}>
        {JSON.stringify({ state }, null, 2)}
      </Text>
      <Text style={{ fontFamily: "monospace" }}>
        {JSON.stringify({ playing, bufferingDuringPlay }, null, 2)}
      </Text>
    </View>
  )
}

export default function App() {
  const [ready, setReady] = useState(false)
  useEffect(() => {
    ;(async () => {
      await TrackPlayer.setupPlayer()
      await TrackPlayer.add({
        id: "1",
        url: track,
        title: "Test",
        artist: "Test"
      })
      setReady(true)
    })()
  }, [])

  if (!ready) {
    return null
  }

  return <Player />
}

Replicable on Example App?
It doesn't look like the example app can run in web but if there are instructions to do so I'm happy to demonstrate the issue in the example app.

Environment Info:
Paste the results of npx react-native info:

System:
  OS: macOS 15.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 135.81 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.19.0
    path: ~/.nvm/versions/node/v20.19.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.19.0/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.19.0/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13208083
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.1
    wanted: ^20.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.5
    wanted: 0.79.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.81.4 is now available (your project is running on v0.79.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.81.4
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.79.5&to=0.81.4
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Paste the exact react-native-track-player version you are using: 4.1.2
Real device? Or simulator?: Web
What OS are you running?: Mac OSX

How I can Help
Happy to help test or investigate further. Unfortunately I don't know Swift/Android code so not sure where to look under the hood.

[jspizziri]

@robertgonzales if the issue is on web, then there's now swift or Kotlin at play, it's just web tech all the way down. Take a look if you can as this is likely going to be quite low on my list of priorities for the foreseeable future. Happy to provide guidance where I can!