Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

MediaSession usage of the iframe widget. (ios)

Open
  • Is something wrong?
#502 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
ios, javascript, react-native
Domain
mobile

Research direction

Start by reproducing the issue with the React Native WebView examples, comparing the inline HTML iframe with the direct URL and observing the iOS MediaSession metadata. Trace whether the iframe or another widget entry point supplies “Soundcloud Widget”; done means identifying its source and confirming whether track title and artwork can be exposed reliably.

Written by the indexing model from the issue text.

Description

widget

Hi,

I'm trying to embed a soundcloud iframe inside a react-native application, and it works very well.
On IOS however, the system controls are showing a title: "Soundcloud Widget"

Image

Do you know where that title might be coming from?

Note: I was able to update the title by updating the MediaSession metadata inside the iframe ( We can inject JS into the iframe on ios ).
But this method is not stable, every once in a while it goes back to "Soundcloud Widget"

I'm trying to figure out what's happening.
My current assumption is, that you are updating the MediaSession inside the iframe as well. If so, do you have a default "Soundcloud Widget" title?

If that is the case, would you be open to set the mediaSession metadata to the track information inside the iframe? Title, and possibly artwork

If that assumption is wrong, maybe somewhere else you have a "Soundcloud Widget" value, which ios is using.
Do you have any ideas?

Example react-native code:

      const soundcloudURL = "your soundcloud url"
      // ... 
          <WebView
            source={{html: `
               <!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="UTF-8" />
                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
                    <style>
                      * { margin: 0; padding: 0; box-sizing: border-box; }
                      html, body { height: 100%; width: 100%; overflow: hidden; }
                      iframe { border: none; width: 100%; height: 100%; display: block; }
                    </style>
                  </head>
                  <body>
                    <iframe  src="${url}" allow="autoplay" />
                  </body>
                </html>
           `}}
        />
  // OR 
     <WebView source={{uri: url}} />
Dominant language
JavaScript
Stars
253
Forks
53
Avg merge
1m
Merged PRs (30d)
1

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from soundcloud/api

All issues in soundcloud/api

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.