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">

2. </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"と"}で括ってください。

3. 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 つ目の再生が始まるので便利です。