Github Pages+Hexoのブログに音声ファイルの埋め込み

hexo/source直下にsoundsディレクトリを作成し、そこへ音声ファイルを配置。
以下のHTMLタグで埋め込み。

1	<audio src="example.mp3" autoplay loop></audio>

autoplayで自動再生。loopでリピート再生。

下記では音は鳴るが、インターフェースが表示されない。

1	<audio src="/sounds/bell.oga" autoplay></audio>

controlsを加えれば良いようだ。

1	<audio src="/sounds/bell.oga" controls></audio>

数種類の形式を用意する場合は下記。

<audio preload="metadata" controls>
<source src="/sounds/bell.aac" type="audio/aac">
<source src="/sounds/bell.mp3" type="audio/mp3">
<source src="/sounds/bell.oga" type="audio/ogg">
</audio>

Githubでは1ファイルあたり50MBまでという推奨があるらしい。
（100MB以上は制限によりプッシュ出来ないとのこと。）

（参照サイト）
HTML5/埋め込み/audio要素プラグインを使わずに音声を再生する - TAG index Webサイト
 GitHubの各種サイズ上限とファイル削除の方法 - huguma’s blog (仮)

表示

Github Pages+Hexoのブログに音声ファイルの埋め込み

Comments