ブラウザがHTML5に対応し、wavかoggファイルが再生できる環境なら可。
再生
Scale | wav | ogg |
---|---|---|
C Major |
開発環境
- Linux Mint 17.3 MATE 32bit
- Firefox 52.0
- GitHub
方法
- どこかのサーバに音声ファイルをアップロードする(ここではGitHub)
- ブログ記事に
<audio>
タグを書く - ブラウザで記事をみる
- プレーヤが表示され、再生ボタン押下で再生されたら成功
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。