このブログで使用しているhtml埋込オーディオプレーヤ「Audio.js」は、MacのSafariでは問題なく動作しましたが、WindowsのEdgeでは、MP3のファイルが上手くロード出来ず、プレーヤのコントロールバーにあるファイルの読込状況を示すドーナツの回転が止まらない等の現象に直面しました。
この現象は、使用してるレンタルサーバーに起因していることが判り、この対策を示します。
埋込プレーヤ・Audio.js について
ブログで音声を再生するとき、html要素のaudioタグ（<audio></audio>）を埋め込めばば簡単に再生することができますが、ブラウザによって、スタイルが下の様にマチマチになってしまいます。
| OSX safari |  |
| OSX google chrome |  |
| windows10 fireFox |  |
| windows10 Edge |  |
| windows10 IE10 |  |
そこで、色々なブラウザでも統一したスタイルにできるのが、「Audio.js」です。
この他にも、「MediaElement.js」等があります。 Audio.jsの使い方は、「Web Design Leaves」サイトで詳しく紹介されいますのでご参照ください。 当ブログでも参考にさせて頂きました。
尚、Audio.jsは、オープンソースのMIT Licenseの扱いですので、使用に当たり、HTMLページのheader部分等に、右の内容をコメントアウト（明示）することが必要です。
サーバに起因するAudio.js の不具合・状況
MacbookのSafariでは、Audio.jsのコントールバー等、特段の問題は発生しませんでしたが、Window10のEdgeで、以下のような不具合に遭遇してしまいました。
＜不具合の確認状況＞
- 念のため、別のwindowsPCで確認するも改善しない。
- Audio.js本家のサイトでのデモは、正常に動作する。
- 昔使用していた無料レンタルサイトにアップロードしてテストすると正常に動作する。
以上の２.と３.から、Audio.jsにおいて、当ブログで使用しているレンタルサーバ（ロリポップ）に何らかのトラフィック上の問題があるのでは無いかと思い至り、「ロリポップサーバ」に問合せしました。
尚、通常のaudioタグでの使用やMediaElement.jsの場合は、Windows10 Edgeでも正常に動作するので、Audio.jsは、トラフィック上に何らかの特有の弱点があるのかも知れません。
ロリポップからの回答によりますと、
- 「ロリポップ！ではファイルを圧縮して転送を行う機能を導入しておりますが、この時に「MP3」ファイルなどの音声・動画ファイルを圧縮して転送を行うと、ファイルの時間を取得することができない現象が発生していることが判明しております。 ついては、以下のコードを記述した「.htaccess」ファイルを設置していただくことによって、「MP3」ファイルを圧縮して転送を行う対象から除外することが可能でございます。
SetEnvIfNoCase Request_URI .mp3$ no-gzip dont-vary」との回答を得ました。
「.htaccess」の対策と確認
早速、ロリッポプから提示された対策を行って見ました。
- 元々「.htaccess」のファイルは、３０１リダイレクト（新ページへ自動転送）用として、サーバーのルートに配置されいますので、以下の2つのコードを「.htaccess」に追記しサーバーにアップロードました。
• MP3用： SetEnvIfNoCase Request_URI .mp3$ no-gzip dont-vary
• AAC用： SetEnvIfNoCase Request_URI .m4a$ no-gzip dont-vary
- 以上の対策で、あら不思議、windows IE10含めAudio.jsのオーディオプレーヤ・コントロールバーが正常に動作し音源が再生されました。 MediaElement.jsがwindows Edgeで正常に動作することから、Audio.js側に何らかの原因があると思われますが、対処療法的ですが改善できました。
もしも、Audio.jsで何らかの問題があったら、サーバ側を疑ってみることも一法では？