soundcloud / soundcloud/api

MediaSession usage of the iframe widget. (ios)

Open
#502 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

widget
Dominant language
JavaScript
Stars
254
Forks
53
PR merge metrics
No merged PRs in 30d

Description

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}} />

Contributor guide

No contributing guide indexed for this repository

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.

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.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.