はじめに
自作曲を公開するサイトを作りました。
正確には自作曲と、それを AI でリミックスした曲を公開しています。
せっかくなので X に URL を貼り付けて投稿した際に、ポストに音楽プレイヤーが表示されるようにしてみました。
やりかた
まず、曲の詳細ページと、その曲のプレイヤーページを作ります。
例)
-
曲の詳細ページ
https://music-gg.com/ja/music/mountain-range-e-swing/
-
プレイヤーページ
https://music-gg.com/ja/music/mountain-range-e-swing/player
プレイヤーページは、OGP に表示するためのシンプルな構成です。
（直接アクセスされない想定）
で、曲の詳細ページの <head> 箇所に X 専用の OGP を追加していきます。
twitter:player にプレイヤーページの URL を記載します。
<meta property="twitter:player" content="https://music-gg.com/ja/music/mountain-range-e-swing/player">
<meta property="twitter:player:width" content="480">
<meta property="twitter:player:height" content="200">
これで OK。
失敗談
当初は twitter:player に mp3 へのリンクを直接書いていたのですが、それだと OGP をクリックした時に mp3 ファイルが別タブで開く挙動になってしまいました。
余談
リミックスには Suno を使っています。
昔作った曲を AI にリミックスさせて悦に入ってるのはなんか気持ち悪いなーと思いつつ楽しいからやめられない。