2025-04-15  Catalpa

Green Audio Player

kaguyadepth のウェブサイトでは静的サイトジェネレーター Catalpa Green Audio Player を追加して MP3 再生できるようにしています。

GitHub からダウンロードした green-audio-player フォルダーをルートディレクトリに配置して templates フォルダー内の default.ftl blog-post.ftl を次のように書き換えます。

  1. <title>の前に次の 1 行を追加します。
<link rel="stylesheet" href="${baseurl}green-audio-player/css/green-audio-player.css">
  1. </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""}で括ってください。
  1. 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 sun
Tr.16 スペースインベーダーエクストリーム 2 Invader GIRL! (Original Version)

クラスを .player-with-download にすると MP3 をダウンロードできるようになります。

Green Audio Player はページ内に複数設置することができ 1 つ目を再生中に 2 つ目を再生すると 1 つ目が一時停止して 2 つ目の再生が始まるので便利です。

最終更新日 2025-04-15
この記事を共有しませんか?
ブックマーク ポスト