2018年5月1日火曜日

概要

audio.js は HTML5 の <audio> タグをラップして対応してないブラウザでもオーディオを作成することができる JavaScript ライブラリです
使ってみたので導入方法など紹介します

環境

js ファイルをダウンロードして配置するだけです

3 つのファイルを自分のサイトの配置しましょう

audio タグを設置しましょう

<audio src="/sound/test.mp3" type="audio/mpeg" preload="auto"></audio>

<source> タグは使いません
audio タグないで src を指定しましょう
属性は preload="auto" だけ指定します
controls などを指定すると既存のプレイヤーが見えてしまうので指定しないようにしましょう

js ファイルを読み込みます
head タグ内で読み込みましょう

<script type="text/javascript" src="/js/audio.min.js"></script>

あとは audio.js を使ってプレイヤーを生成する <script> タグを追加しましょう
これは body タグの直前に配置しましょう

<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

とりあえずこれだけで動作します

サイトにアクセスして確認してみましょう
以下のような感じで表示されると思います

サイトにアクセスするとまず指定したオーディオファイルのロードが始まります
そして、ある程度バッファされると再生可能になります
シークすることもできますがシークできる範囲はバッファされた範囲までとなります
バッファが少なくなると自動的にオーディオファイルを読み込みします

つまりいきなり全てのオーディオファイルをバッファせず徐々に徐々にバッファするのでいきなり最後までシークすることはできません

詳しく調べてないですがおそらくこれは audio タグの仕様でサーバに負荷をかけないように徐々にバッファしているのだと思います

今回のように audio タグではなく Youtube などで音楽ファイルをホスティングして埋め込み型のプレイヤーを使えば好きな場所にシークすることができます

あと controls 属性が使えません
なのでボリュームなどの調整をしたい場合はマシン自体の音量調整を使うか js とボタンを作成して自分で調整できる仕組みを作ってあげる必要があります

プレイヤーの幅の指定がピクセル固定になっているのでスマホで見ると横にものすごくはみ出た状態になってしまいます
再生自体は問題なくできますがかっこ悪いです
なので無理やりですが以下の CSS を追加するとレスポンシブにすることができます

.audiojs { width: 100%; }
.audiojs .play-pause { width: 40px; }
.audiojs .scrubber { width: 45%; }

ただ、これを追加するとサイト上の表示が以下のようになるので、それを覚悟で入れる必要があります

少し面倒ですが js やサーバ側のコードでアクセスされた端末がモバイルかどうか判定して width を調整すればどちらでも対応することはできると思います

audio.js を使ってみました
簡単にプレイヤーを追加することができるのでとりあえずということであればこれで十分かなと思います
CSS や js を追加すればプレイヤーをカスタマイズすることもできるのでそれも嬉しい点かなと思います

ただ、個人的にはオーディオファイルはクラウドでホスティングするのが無難かなと思います
ページを公開しているサーバと同じサーバでオーディオファイルを配信すると負荷もあがるし管理も面倒になるので将来的なことを考えるとどこかでホスティングするのが一番かなと思います

SoundCloud などを使えば埋め込みのプレイヤーなども使えるので良いかなと思います
ただ、当たり前ですが大量に使うのであればお金を払う可能性が出てくるのでその辺りも事前に確認が必要です