Are self-hosted audio cards possible?

[CharlieRSmart]

Hi all,

I work at a local public radio station. I recently came across WNYC’s audio player in their tweet and thought it would be cool to try something similar. I designed a responsive audio player to be contained within the player card iFrame. However, I am a bit confused as to whether something like this is still possible. The player card documentation says they are for “video clips and audio streams” and refer to “video and audio” players, but some forum posts I have read seem to suggest that audio players are limited only to soundcloud. Is this the case? Would a custom audio player ever be approved for a player card?

Thanks!

[joncipriano]

The answer to both of your questions is, “yes”

The audio Player Card you see Soundcloud using within the Twitter mobile app is limited to our partners. It’s a little fancier than the standard Player Card.

The standard Player Card you can implement on your own. You can review the docs here.

Some additional tips:

1. Use HTML5 for your player.
2. Make sure you test across a variety of devices.

[CharlieRSmart]

Thanks @joncipriano! Followup question – I have a draft of my player as well as a page with the meta tags hosted on my personal sandbox site. The tags are below.

<meta property="twitter:card" content="player" />
<meta property="twitter:title" content="Audio Player Test" />
<meta property="twitter:player" content="https://www.charliesmart.info/contents_2.html" />
<meta property="twitter:player:width" content="435" />
<meta property="twitter:player:height" content="105" />
<meta property="twitter:site" content="@CharlieRSmart" />
<meta property="twitter:image:src" content="https://www.charliesmart.info/img/placeholder.png" />

However, when I try to validate the card it tells me that the page was fetched successfully and that the metatags were found, but it says
"WARN: Not Whitelisted" and in the preview it says “Unable to render preview.” Is there anything obvious that I am doing wrong? Thanks again!

[joncipriano]

Hi @CharlieRSmart, please provide a URL with the meta tags on it and we’ll take a look. Thanks!

[CharlieRSmart]

@joncipriano https://www.charliesmart.info/index.html

Thanks!

[joncipriano]

I see an issue. You will need to change your URLs in the meta tags from relative to absolute. The code in your previous post looks ok, but your actual page has relative URLs in the source.

As an example twitter:player should be:

https://www.charliesmart.info/contents_2.html

You will want to do the same for your image URL, also.

[CharlieRSmart]

@joncipriano Thanks for the suggestion. I originally had the link absolute but switched them when I was playing around with things trying to get it to work. I switched them back to absolute, but it’s still not working Any other suggestions? Thanks again for your help!

[joncipriano]

Can you try adding a robots.txt file to you website? The Twitter crawler is very conservative.

Details can be found here:
https://dev.twitter.com/cards/getting-started#crawling

[CharlieRSmart]

@joncipriano Hmmmmmm, still not working. Sorry for being such a pain about this. Is there anything else that might be causing the problem?

[joncipriano]

I was able to get your Card working here:

Audio Player Test

I changed two things:

1. Removed “src” from the image property. There was a change that may have impacted that. If you found that in the docs, we should correct it.

2. Changed “property” to “name” in your meta tags.

Not sure which one resolved it, but check out the source of that URL. Hope that does the trick for you.

[CharlieRSmart]

@joncipriano Great, that seems to work! The same metatags are still giving me the same problem when I host them on my site though. Final question – could there be any other differences between my site and yours that are causing the issue? Could my host be blocking access or something like that? Thanks again so much for your help.