This is an attempt to have an embeddable player from my faircamp site, when I post song links on Mastodon.
I've tried to make this as simple as possible. I don't want to manually edit my faircamp pages, so instead, I made a separate html page which generates the player, which I can then put anywhere on my site.
Here's an example page for one of my tracks. You must have embeds enabled in your faircamp for it to work. This page will redirect to the relevant faircamp page when someone clicks through to it.
All the OpenGraph "og:" tags are copied from the song's html page, which was originally generated by faircamp (with OpenGraph enabled).
Essentially you just need to add the "twitter:" tags. Only 2 of these "twitter:" tags are absolutely required.
Regrettably, it is necessary to include these twitter player tags in the html. This apparently sort of tricks Mastodon into rendering the player card. But! There may be better ways to do this, like oEmbed, that I'm not familiar with at the moment. I'm still looking into it and experimenting.
Then you can just post a link to this specific html file.
Note that this embed doesn't work on all fedi clients and apps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jazz Pesto (Extra Sauce Mix)</title>
<meta charset="utf-8">
<meta name="description" content="The Honk Tapes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<meta property="og:image" content="https://reverb10000.com/the-honk-tapes/cover_800.jpg"/>
<meta property="og:image:height" content="800"/>
<meta property="og:image:width" content="800"/>
<meta property="og:image:alt" content="Cover art for The Honk Tapes in tasteful shades of brown and yellow. It says "Honk Yonder The Honk Tapes" against a plain brown background. At the bottom the top half some golden glyphs is just visible."/>
<meta property="og:locale" content="en"/>
<meta property="og:site_name" content="Reverb 10000"/>
<meta property="og:title" content="Jazz Pesto (Extra Sauce Mix)"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://reverb10000.com/the-honk-tapes/4/"/>
<meta property="twitter:player" content="https://reverb10000.com/the-honk-tapes/embed/4/">
<meta property="twitter:card" content="player">
<meta http-equiv="refresh" content="0; url=https://reverb10000.com/the-honk-tapes/4/" />
</head>
<body>
<p><a href="https://reverb10000.com/the-honk-tapes/4/">Honk Yonder - Jazz Pesto (Extra Sauce Mix)</a></p>
</body>
</html>
Here's an even shorter version. This one doesn't have the OpenGraph "og:" tags but still works. There's no cover art in the card, though.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jazz Pesto (Extra Sauce Mix)</title>
<meta charset="utf-8">
<meta name="description" content="The Honk Tapes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<meta property="twitter:player" content="https://reverb10000.com/the-honk-tapes/embed/4/">
<meta property="twitter:card" content="player">
<meta http-equiv="refresh" content="0; url=https://reverb10000.com/the-honk-tapes/4/" />
</head>
<body>
<p><a href="https://reverb10000.com/the-honk-tapes/4/">Honk Yonder - Jazz Pesto (Extra Sauce Mix)</a></p>
</body>
</html>