Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embedded player for social media #221

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Embedded player for social media #221

wants to merge 1 commit into from

Conversation

floehopper
Copy link
Member

@chrislo I started doing some work on this a while ago based on how SoundCloud does it.

If you look at the <head> on this album page, you can see the following which is used by the hellsite and/or other social media:

<meta
  property="twitter:player"
  content="https://w.soundcloud.com/player/?url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F780253879&amp;auto_play=false&amp;show_artwork=true&amp;visual=true&amp;origin=twitter"
>

Also there are also these oEmbed links which I believe is what Mastodon uses:

<link
  rel="alternate"
  type="text/xml+oembed"
  href="https://soundcloud.com/oembed?url=https%3A%2F%2Fsoundcloud.com%2Fbrenvik%2Fbrenvik-jogging-house&amp;format=xml"
>
<link
  rel="alternate"
  type="text/json+oembed"
  href="https://soundcloud.com/oembed?url=https%3A%2F%2Fsoundcloud.com%2Fbrenvik%2Fbrenvik-jogging-house&amp;format=json"
>

These oEmbed endpoints serve up:

XML

<oembed>
  <version type="float">1.0</version>
  <type>rich</type>
  <provider-name>SoundCloud</provider-name>
  <provider-url>https://soundcloud.com</provider-url>
  <height type="integer">400</height>
  <width>100%</width>
  <title>BRENVIK - Jogging House by Brenvik</title>
  <description>
    Composing & mixing : @brenvik Mastering : @cadillacprod Instagram : @brenvikmusic Facebook : facebook.com Brenvikofficial
  </description>
  <thumbnail-url>
    https://i1.sndcdn.com/artworks-8vNJgn1vdOH333WX-hQm7AQ-t500x500.jpg
  </thumbnail-url>
  <html>
    <![CDATA[<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F780253879&show_artwork=true"></iframe>]]>
  </html>
  <author-name>Brenvik</author-name>
  <author-url>https://soundcloud.com/brenvik</author-url>
</oembed>

JSON

{
  "version": 1,
  "type": "rich",
  "provider_name": "SoundCloud",
  "provider_url": "https://soundcloud.com",
  "height": 400,
  "width": "100%",
  "title": "BRENVIK - Jogging House by Brenvik",
  "description": "Composing & mixing : @brenvik\nMastering : @cadillacprod\n\nInstagram : @brenvikmusic\nFacebook : facebook.com/Brenvikofficial",
  "thumbnail_url": "https://i1.sndcdn.com/artworks-8vNJgn1vdOH333WX-hQm7AQ-t500x500.jpg",
  "html": "<iframe width=\"100%\" height=\"400\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F780253879&show_artwork=true\"></iframe>",
  "author_name": "Brenvik",
  "author_url": "https://soundcloud.com/brenvik"
}

But the common theme of all three is the "player URL" which looks like this. It's the latter that I think I was trying to build in this WIP branch...

@chrislo
Copy link
Member

chrislo commented Aug 9, 2024

That's brilliant! I understand how it works now, there will be a URL on jam.coop that gets iframe-d in to the embedded site. Sounds like a good approach.

@floehopper
Copy link
Member Author

You can see how a SoundCloud album URL is rendered in Mastodon here:

Screenshot 2024-08-09 at 15 45 59

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants