やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

ブログで音声ファイルを再生する(github,HTML5)

ブラウザがHTML5に対応し、wavかoggファイルが再生できる環境なら可。

再生

Scale wav ogg
C Major

開発環境

方法

  1. どこかのサーバに音声ファイルをアップロードする(ここではGitHub
  2. ブログ記事に<audio>タグを書く
  3. ブラウザで記事をみる
  4. プレーヤが表示され、再生ボタン押下で再生されたら成功

f:id:ytyaru:20170803183323p:plain

GitHubへアップロード

git pushする。

Rawデータ取得

データファイルのRawデータURLを取得する。

HTMLタグのsrc属性に指定するURLは、必ずRawデータURLにすること。さもないと正常に表示されない。

なお、<audio src=...>だけでなく、<img src=...>にも同じことが言える。生データが欲しければRawのURLを取得すること。

URL

GitHub上のURL

https://github.com/ytyaru/Audio.Sample.201708031714/tree/master/20170803/wav/CMajor.wav

RawデータURL

https://raw.githubusercontent.com/ytyaru/Audio.Sample.201708031714/master/20170803/wav/CMajor.wav

HTML5<audio>タグで指定するURLはRawデータのほう。GitHub上のURLを指定してしまうと、プレーヤが一瞬表示されてすぐ消える。

URLフォーマット

GitHub上のURL

https://github.com/{username}/{repos_name}/tree/master/{some_dir}/.../{file_name}

RawデータURL

https://raw.githubusercontent.com/{username}/{repos_name}/{some_dir}/.../{file_name}

<audio>タグ

複数リソースがある場合

<audio controls>
    <source src="https://raw.githubusercontent.com/ytyaru/Audio.Sample.201708031714/master/20170803/ogg/CMajor.ogg">
    <source src="https://raw.githubusercontent.com/ytyaru/Audio.Sample.201708031714/master/20170803/wav/CMajor.wav">
</audio>

OSやブラウザによって再生できるファイルが違うらしい。MP3なら間違いないらしい。私の環境ではMP3に変換する環境をつくるのが面倒そうなのでoggで妥協した。

単一リソースの場合

<audio controls src="https://github.com/ytyaru/Audio.Sample.201708031714/tree/master/20170803/ogg/CMajor.ogg"></audio>
<audio controls src="https://github.com/ytyaru/Audio.Sample.201708031714/tree/master/20170803/wav/CMajor.wav"></audio>

所感

SoundCloudなどの外部サービスを利用する方法などもあるらしいが、ブラウザで再生できなかった。時代はHTML5+GitHub