React Native WebView Spotify playback stops after few seconds on Android 11

Other Questions Spotify
1

I have a music streaming app built with React Native that uses WebView to load Spotify Web SDK. The playback works perfectly on newer Android versions like 14 and 15, but I’m facing issues on Android 11.

When I try to play music on Android 11, it starts playing normally but after a few seconds the audio stops completely. I also get playback errors in the console. This only happens on Android 11 - other versions work fine.

Here’s my WebView setup:

<WebView
    webviewDebuggingEnabled={true}
    mediaPlaybackRequiresUserAction={false}
    androidLayerType='software'
    allowsProtectedMedia={true}
    mixedContentMode="compatibility" 
    mediaCapturePermissionGrantType='prompt'
    userAgent="Mozilla/5.0 (Linux; Android 11; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.72 Mobile Safari/537.36"
    originWhitelist={['*']}
    source={{
        uri: `https://music-cdn.example.com/spotify-player.html?authToken=${authToken}&songId=${songId}`,
        userAgent: "Mozilla/5.0 (Linux; Android 11; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.72 Mobile Safari/537.36"
    }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    thirdPartyCookiesEnabled={true}
    allowUniversalAccessFromFileURLs={true} 
    allowsInlineMediaPlayback={true}
    cacheEnabled={false}     
    onError={(event) => {
        const { nativeEvent } = event;
        console.error('WebView failed: ', nativeEvent);
    }}
    onLoad={() => {
        console.log('WebView ready');
    }}
    onMessage={(msg) => {
        console.log('WebView message:', msg.nativeEvent.data);
    }}
    style={{ flex: 1, width: screenWidth, height: screenHeight}}
/>

Is there any specific configuration needed for Android 11 compatibility?

2

Android 11’s got some funky WebView audio focus bugs that got fixed in later versions. Try adding androidHardwareAccelerationDisabled={false} and ditch that old Chrome 89 user agent - just let it use the default. Also double-check your manifest has the right audio focus permissions since Android 11’s really picky about that.

3

This is an Android 11 WebView media session conflict. Had the exact same issue last year with a different streaming service. Android 11’s stricter media policies mess with WebView audio sessions. Add setMediaPlaybackRequiresUserAction={false} and allowsBackgroundProcessing={true} if your WebView supports it. The cacheEnabled={false} is probably breaking Spotify’s token auth on Android 11. I’d enable cache and handle token refresh yourself instead. Also try wrapping your WebView in a keepAwake component - stops the system from killing audio processing. Android 11 is way more aggressive about background audio than newer versions.

4

I encountered a similar issue with the WebView and Spotify on Android 11. The underlying problem often stems from hardware acceleration conflicting with the Web Audio API used by the Spotify SDK. I recommend removing the androidLayerType='software' property, as it can introduce more issues than it resolves. Additionally, the user agent you’re using appears to be outdated; reverting to the default user agent might improve compatibility. Setting allowsFullscreenVideo={false} can also help since Android 11 has been known to cause problems with media sessions, which can disrupt background audio playback.

5

Android 11’s WebView has nasty audio context bugs that cause exactly this. The WebView’s audio context gets suspended after a few seconds because Android 11’s power management is super aggressive. I ran into this on a client project and fixed it by forcing the WebView to request audio focus through injected JavaScript. You’ll need to inject code that calls audioContext.resume() periodically and handles ‘audioprocess’ events properly. Also try setting javaScriptCanOpenWindowsAutomatically={true} - sounds weird but it stops Android 11 from treating your audio as background media. Your current setup has too many conflicting properties that Android 11 can’t handle together. Strip it back to basics and add onShouldStartLoadWithRequest to catch when Spotify tries opening new contexts.

6

Check your targetSdkVersion in android/app/build.gradle - if it’s set to 30 (Android 11), you’re probably hitting scoped storage restrictions that break Spotify’s local caching. I had this exact issue and downgrading to targetSdk 29 fixed it temporarily. The real fix was updating react-native-webview to 11.23+ which handles Android 11’s audio focus changes properly. Your WebView config’s overcomplicated too - ditch allowUniversalAccessFromFileURLs and mixedContentMode since they cause security restrictions on Android 11. That playback stopping after a few seconds? That’s the system stealing audio focus from WebView processes.