kaguyadepth のウェブサイトでは静的サイトジェネレーター 「Catalpa」 に Green Audio Player を追加して MP3 再生できるようにしています。
GitHub からダウンロードした green-audio-player フォルダーをルートディレクトリに配置して、 templates フォルダー内の 「default.ftl」 と 「blog-post.ftl」 を次のように書き換えます。
- <title>の前に次の 1 行を追加します。
<link rel="stylesheet" href="${baseurl}green-audio-player/css/green-audio-player.css">
- </footer>の後に次の JavaScript コードを追加します。
<script src="${baseurl}green-audio-player/js/green-audio-player.min.js">null</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
GreenAudioPlayer.init({
selector: '.player',
stopOthersOnPlay: true
});
GreenAudioPlayer.init({
selector: '.player-with-download',
stopOthersOnPlay: true,
showDownloadButton: true
});
});
</script>
- Markdown に記述した${baseurl}が../../../と表示されてしまう場合は${r"${baseurl}"}のように${r"と"}で括ってください。
- Markdown の中に次のような HTML を記述することで Green Audio Player が表示されます。
<div class="player"><audio preload="metadata"><source src="hoge.mp3" type="audio/mpeg"></audio></div>
- ふぉ~ぽりふぉにっくまじっく8
- Tr.15 『ラジルギ』 i hate tha sunTr.16 『スペースインベーダーエクストリーム 2』 Invader GIRL! (Original Version)
クラスを .player-with-download
にすると MP3 をダウンロードできるようになります。
Green Audio Player はページ内に複数設置することができ、 1 つ目を再生中に 2 つ目を再生すると、 1 つ目が一時停止して 2 つ目の再生が始まるので便利です。
最終更新日
2025-04-15