Question

Embed on Android devices

  • 22 November 2016
  • 10 replies
  • 1200 views

Hello,

I'm trying to embed the SoundCloud player on a web app using the recommended embed code. However, when Android users tap the big orange Play on SoundCloud button, they are presented with a "There was a problem loading that URL." message if they have the SoundCloud app installed (if they don't have the app installed, they get jumped to the Google Play store). When users tap the button on iOS, they are taken to the SoundCloud webpage in Mobile Safari where they can play the track. This happens with every track I've tried and I've reproduced this on Chrome on Android 5 and 6. I have created an example here to try:

https://codepen.io/gmusick/full/WojpeZ/

Anyone from SoundCloud have any idea?

10 replies

We've noticed the same problem when the SoundCloud player is embedded via an AMP tag.
Userlevel 3
Badge
Hey!

I'm afraid it worked fine on Android for me.

Could you let me know the embed code you used? I'll check if there's anything wrong with it.

How many users have had this issue on their Android that you know of?

Also, could you let me know what web app you are talking about so I can take a look?

Cheers,
Jonathan.
I wasn't able to post this link before: the forum complained that my post was inappropriate!

But here's an example on an AMP page, with an tag on it, that fails when you tap on the "Play in SoundCloud" link on an Android device:

https://ampbyexample.com/components/amp-soundcloud/
The use of the intent:// URI will only launch a native Android app, when clicked from Chrome (https://developer.chrome.com/multidevice/android/intents). It won't work when clicked from an Android WebView.

Switching the URL to a soundcloud:// scheme might be a better solution?
In digging more into this, it looks like the embedded player has code to detect the device it's running on and changes the URL that will launch. Using the ampbyexample.com page I linked above, on iOS devices, the "Play in Soundcloud" link resolves to a URL using a soundcloud scheme, whereas on Android devices, it's using an intent scheme.

However, as I mentioned previously, intent:// URIs only work when clicked from Chrome, so users with a different default browser, or clicking from an embedded WebView(which is what we're doing in our app), will not be able to launch the native SoundCloud app. Moreover, something is wrong with the intent:// URIs as they are right now. Clicking on them, even from Chrome, doesn't work. We can confirm that the "hostname" of tracks is incorrect; it should be sounds.

My suggestion would be to always return a URI with soundcloud as a scheme, since the native Android app can handle links of that form also. We've confirmed that clicking on such a link from an Android WebView will launch the native SoundCloud app.

If, for some reason, you need to keep the intent scheme URI, though not ideal for compatibility across all Android users, we would suggest:

1) Fixing the "hostname" of the intent URI to use sounds, instead of tracks
2) Specifying S.browser_fallback_url (for users who don't have the native app) as described in https://developer.chrome.com/multidevice/android/intents
Another solution here, would be to use Firebase Dynamic Links which would:
- Take users to the App Store or Play Store if they don't have the native app installed
- Deep link to the native app, if they have it installed
- Optionally, fall back to a website

All of this from a single HTML link.
@flicknfung, your research matches up with my own. I didn't know about Firebase Dynamic Links; will check that out to see if it would work for us. Yeah, when I try changing the intent scheme from intent:// to soundcloud:// (via an in-app intent handler that looks for intent:// intents and sends a new intent with the soudcloud:// scheme), I can get SoundCloud to load, but I still get the "There was a problem loading that URL" message. I didn't change the hostname, however, so I will check that out.

@Jonathan, the codepen link I posted can be switched to "Pen" mode to see the embed code. Here's a direct link: https://codepen.io/gmusick/pen/WojpeZ. You'll see that the embed code looks like:

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/18942763&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>

which is directly copied from the SoundCloud embed share modal. The webapp I'm working on isn't yet publicly available, which is why I created the public codepen above that reproduces the problem (at least on devices we have here in the office). I'm not sure how many Android users are affected, but I've tried various Nexus devices with both Android 5 and 6 and an older Samsung Galaxy S4 and they've all reproduced this issue.
@gmusick I don't think Firebase will help you (or me) here, it's something that SoundCloud would have to put in their embed code. That is, instead of dynamically returning the link depending on platform, they could just replace that logic with a single Firebase Dynamic Link. But I could also understand if they don't want to do that, as it would tie them to Firebase/Google.

As it is though, I would like to hear on which webpage that @Jonathan gets the deep link to work. It certainly doesn't work on the CodePen you posted, nor on the AMP example page I posted.
@jonathan Any update on this? Can you answer the question I have in my last message?

Reply