サーバに起因するHTML用 埋込オーディオプレーヤでの音声ファイルのロード不良について

投稿日:2017年11月7日 更新日:

 
このブログで使用している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」です。
 

「Audio.jsプレーヤの外観」

この他にも、「MediaElement.js」等があります。 Audio.jsの使い方は、「Web Design Leaves」サイトで詳しく紹介されいますのでご参照ください。 当ブログでも参考にさせて頂きました。

尚、Audio.jsは、オープンソースのMIT Licenseの扱いですので、使用に当たり、HTMLページのheader部分等に、右の内容をコメントアウト(明示)することが必要です。

 

 

スポンサーリンク

 

 

サーバに起因するAudio.js の不具合・状況

MacbookのSafariでは、Audio.jsのコントールバー等、特段の問題は発生しませんでしたが、Window10のEdgeで、以下のような不具合に遭遇してしまいました。
 

 
<不具合の確認状況>

  1.  念のため、別のwindowsPCで確認するも改善しない。
  2.  Audio.js本家のサイトでのデモは、正常に動作する。
  3.  昔使用していた無料レンタルサイトにアップロードしてテストすると正常に動作する。

以上の2.と3.から、Audio.jsにおいて、当ブログで使用しているレンタルサーバ(ロリポップ)に何らかのトラフィック上の問題があるのでは無いかと思い至り、「ロリポップサーバ」に問合せしました。

尚、通常のaudioタグでの使用やMediaElement.jsの場合は、Windows10 Edgeでも正常に動作するので、Audio.jsは、トラフィック上に何らかの特有の弱点があるのかも知れません。

ロリポップからの回答によりますと、

  • 「ロリポップ!ではファイルを圧縮して転送を行う機能を導入しておりますが、この時に「MP3」ファイルなどの音声・動画ファイルを圧縮して転送を行うと、ファイルの時間を取得することができない現象が発生していることが判明しております。 ついては、以下のコードを記述した「.htaccess」ファイルを設置していただくことによって、「MP3」ファイルを圧縮して転送を行う対象から除外することが可能でございます。
    SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary」との回答を得ました。

 

「.htaccess」の対策と確認

早速、ロリッポプから提示された対策を行って見ました。

  • 元々「.htaccess」のファイルは、301リダイレクト(新ページへ自動転送)用として、サーバーのルートに配置されいますので、以下の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で何らかの問題があったら、サーバ側を疑ってみることも一法で

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

 

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

4

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

5

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2019 All Rights Reserved Powered by AFFINGER5.