audiojs Player用のJavaScriptライブラリがダウンロード出来ない時の対応策

 

audiojs Player用のJavaScriptライブラリを使うメリット

HTML5の <audio> タグを使うと、ブラウザごとに表示される音声Playerのデザインが異なり、横幅などのスタイルを自由に変更できません。　そこで、audiojs Player用のJavaScript を使用すると、ブラウザに依存せず統一されたデザインの音声Playerを表示でき、例えば、下に示すPlayerの様に横幅などのスキン・スタイルも変更できます。

 

 

公式GitHubからaudio.js ライブラリをダウンロードする方法

audio.jsページを開いたら、ページの後段「Source code」にある  Source on Github リンクをクリックすると、GitHubのkolber/audiojs ページに遷移します。

• step.1

  kolber/audiojsページの左にある 赤矢印のボタンを押して、defaultのmasterから gh-pages を選択（レ点）します。（下のスクショ画像参照）

  




• step.2

  gh-pages 画面に切り替わったら、右の [Code] ボタンを押して、Daunload ZIP をクリックすると audiojs-gh-pages.zip がダウンロードできます。　




• step.3

  ダウンロードしたaudiojs-gh-pages.zipファイルを解凍すると、下に示す様にaudiojsフォルダーの存在が確認できます。　このaudiojsフォルダーのファイルは、以前ダウンロード出来た内容と同じものです。　audio.js Playerで使用するファイルは、赤矢印で示す３つのファイルです。

  audiojsフォルダーをWebサイトのドメイン（例えばWordpressが入っている場所）にアップロードして使います。

  

  1. audio.min.js
  2. audiojs.swf
  3. player-graphics.gif

  念の為、ダウンローした赤矢印で示す３つのファイルを「ファイルのハッシュ値を比較するツール」を使って、当サイトで従来より使用しているaudiojsファイルと比較したところ、ハッシュ値が一致しており、同一ファイルであることが確認できました。

 

 

補足：GitHubのmasterからaudio.jsをダウンロードして使ってみました。

GitHubのgh-pagesからダウンロードしたファイルのタイムスタンプを見ると、2013年12月11日でした。　一方、defaultのmasterに切り替えて [Code] ボタンを押して、ZIPファイルをダウンロード（audiojs-master.zip）し、解凍したファイルを見るとタイムスタンプが2017年3月6日になって新しくなっていました。

タイムスタンプが新しいaudiojs-masterフォルダーのaudiojsフォルダーをWebサイトのドメイン（例えばWordpressが入っている場所）にアップロードして、audiojs Playerを使用したところ、 下に示す様にPlayerの▶ボタン等が消失していますので残念ながら使えません！　

参考までに、対処療法ですが、以下のコードをHTMLの</body>直前に記述すると、▶ボタン等を復活させることが出来ました。

 

以上から、audio.js のJavaScriptライブラリは、GitHubのgh-pagesからダウンロードしたファイルを使用するのが無難の様です。