Embedded player for social media

floehopper commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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

freerange / jam-coop

Embedded player for social media #221

XML

JSON