skip to content
usubeni fantasy logo Usubeni Fantasy

Blog Music Player + 1

/ 3 min read

project
This Post is Available In: CN EN

Although I originally intended to create a lyrics interpreter rather than a blog player, once I started building it, I realized it could also work as a hodgepodge of features, so I went all in~

The final result turned out pretty well. Let me briefly introduce this open-source project:

Special thanks to Meting - without Meting, this project wouldn’t exist!

I won’t go into detail about the song search, lyrics viewing, and AI features. Below, I’ll mainly introduce its capabilities as a blog music player, which consists of 3 main features:

  • Embed playable cards
  • Embed link cards
  • Generate image shares

First is the playable card, which can play embedded songs, but you must provide the corresponding music platform’s cookie. While the experience is excellent - you can play directly without redirecting - it’s quite troublesome for maintainers. You need to set cookies when deploying the service and replace them promptly when they expire, otherwise playback won’t work.

Here’s an example with QQ Music: after logging into QQ Music, press F12, open the Network tab, find the cookie, and fill it in during deployment or directly on the web configuration page~

<iframe
  loading="lazy"
  height="80px"
  width="100%"
  style="border-radius: 15px;"
  src="https://elixia-player.koyeb.app/embed/tencent/003cI52o4daJJL"
  frameborder="0"
></iframe>

After filling in the cookie and embedding the above code, you should see a player like this:

Next is the link card, which is a more balanced approach and also the most recommended method:

<iframe
  loading="lazy"
  height="80px"
  width="100%"
  style="border-radius: 15px;"
  src="https://elixia-player.koyeb.app/card/tencent/001t1qJd0DaKOs"
  frameborder="0"
></iframe>

Finally, there’s the image format that completely abandons HTML, with fully static content. Many UGC platforms don’t allow iframe embedding, so you can directly use the generated PNG image:

![](https://elixia-player.koyeb.app/card/tencent/002POzud0db9lK/image)
Pretender

Of course, I still recommend wrapping it with a link so users can click to navigate directly. Here’s the complete version:

昔涟 
[![昔涟](https://elixia-player.koyeb.app/card/tencent/002rhFKO3EjKAg/image)](https://y.qq.com/n/ryqq_v2/songDetail/002rhFKO3EjKAg)

Note: My free-tier service generates images very slowly, so I recommend saving a copy to your own server 😂

Other official options:

Spotify is a good choice in terms of design and loading speed, but the fatal flaw is that it requires a VPN to access, and you can’t expect all your readers to have VPN access 😂

<iframe
  style="border-radius:12px"
  src="https://open.spotify.com/embed/track/2leJWl7tBdFVj5Imag5T8J?utm_source=generator"
  width="100%"
  height="152"
  frameborder="0"
  allowfullscreen=""
  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  loading="lazy"
></iframe>

NetEase Cloud Music isn’t bad either, but it loads extremely slowly. When I wrote my anime music recommendations, I embedded a bunch of NetEase Cloud iframes, and the loading speed wasn’t great. Plus, I’m not a fan of its appearance…

<iframe
  frameborder="0"
  border="0"
  width="100%"
  height="100"
  src="//music.163.com/outchain/player?type=2&id=28915185&auto=0&height=66"
>
</iframe>

As for QQ Music, I couldn’t find an embeddable player on their official website.

That’s pretty much it. Feel free to use my deployed service directly, though it might be a bit slow to load since it’s on a free tier… So I also welcome you to deploy Elixia Player yourself on koyeb, which will reduce congestion and provide a slightly better experience.

Loading comments...