TIDAL Embed Player open sourced!

[stefanmoro]

Today we’re happy to announce another step in our work towards a more open platform by open sourcing our embed player - our first full app open sourced!

The TIDAL Embed Player is built on the TIDAL SDK for Web, and has as such already been partly open sourced. By now open sourcing the entire app we hope to even further increase transparency around our tech platform, invite you all to get inspired by the code and/or help us improve the embed player experience.

We’re also launching some new exciting features with it, check out the announcement to learn more!

[ungive]

First of all, thank you for making this! I've just tried it and it works like a charm, great work!

I haven't played around too much with it yet, but I have a few questions:

• I see that when I have the Nostr extension installed in Google Chrome, the embed automatically detects it and offers to log me in. I have tried this in Firefox with the nos2x-fox extension (which is linked here and here), but the embed does not seem to detect it or offer me to log in. Is that expected? Will it work with Firefox in the future?
• Is it or will it be possible to control the embed from the parent window programmatically? IIRC the parent window cannot access the DOM of the embed/iframe if it's hosted on a different domain and therefore cannot click around in it (to control it via DOM events). It would be great if you could play/pause, scrub the playback position and change the song via TIDAL URL (or even title and artist).

Other notes:

• Before trying it with Google Chrome, I tried to use the embed with Chromium, which doesn't have Widevine DRM installed. The embed played the first 8 or so seconds and then skipped to the next song (continuously). The devtools logs revealed it was a Widevine issue. I think catching this error and telling the user that Widevine DRM is required would improve the UX a bit.
• The embed player code that I get when I click "Copy embed code" in the TIDAL desktop application does not work out of the box in Google Chrome, when I host a local HTML file. I get this error in the console: [Violation] Permissions policy violation: encrypted-media is not allowed in this document.. I need to add the allow="encrypted-media *;" attribute to the iframe for it to work (see this Stackoverflow answer). Perhaps a variation of it should be added to the embed code from the TIDAL desktop app. The embed code generator adds allow="encrypted-media": https://developer.tidal.com/documentation/embeds/embeds-code-generator

Cheers!

[stefanmoro]

Hey @ungive, thank you for the feedback, very valuable!

• nos2x-fox support: I don't see any reason why it shouldn't be possible for it to work. Looping in @enjikaka here as well.
• programmatic control: Not sure, not a web developer myself. Maybe @enjikaka has some comments? You also have all the code available to check out and test.
• DRM fail: Thank you for reporting. Agree that playback failure due to missing WV support should be handled more gracefully.
• encrypted-media: Thanks for reporting!

[ungive]

You also have all the code available to check out and test.

My current idea would be to host the embed client myself, on the same domain as the embed will be shown via iframe, so that I can either modify the embed code to add controls or access iframe elements from the parent frame/window. I'll give that a try when I get around it.

[enjikaka]

nos2x-fox

nos2x-fox is working for me. Any other extensions rolling for you that might affect it? @ungive

programmatic control

Some done here: https://github.com/tidal-music/embed-player/blob/main/src/client/js/message-bridge.js

"Copy embed code" in the TIDAL desktop application /.../ allow="encrypted-media"

We're working on getting that in! Expect it in the coming weeks or after summer.

[davddavd]

nos2x-fox works for me if I load at page directly in the address bar but fails for all other links embedded in pages or posts I have found.
Nostr not available in window. Install a NIP-07 extension or try another one. app.js:902:16

[enjikaka]

Then the extension is not available in the iframe. Check the settings for both the extension and Firefox, and submit a ticket with either nos2x-fox or Mozilla. Nothing I can do on my side for that!