MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

audioのロードについて
https://forums.mozillazine.jp/viewtopic.php?f=2&t=16745		 ページ 1 ／ 1
作成者:  ojaiman [ 2017年8月18日(金) 16:31 ]
記事の件名:  audioのロードについて
多数のMP3ファイルを再生するウェブページを構築しています。
ロード、再生はJavascriptを利用しています。

MP3ファイルを多数ロードすると、昔は（Version 29.0.1）
全てのファイルを100%自動にロードしてくれましたが、

現在は（Version 55.0.2）ロードが途中で止まり、再生を始めてから、残りの部分をロードする仕様になっているかと思います。

問題なのは、順番にロードを行って、途中で止まり、それ以降のファイルは一切ロードしてくれないので、
「canplaythrough」が発動しないファイルが出てくるのです。
平均5MB位のmp3ファイルを10個～20個くらいロードしています。

about:configなどで、キャッシュを色々弄ったりしたのですが、根本的な解決方法が分かりません。

社内サーバ（apache）を利用しています。

音声を複数ファイル、一度にロードした際、
全てのファイルを100%ロードさせる方法はありませんでしょうか。
作成者:  EarlgreyTea [ 2017年8月18日(金) 19:31 ]
記事の件名:  Re: audioのロードについて
ojaiman さんが書きました:
多数のMP3ファイルを再生するウェブページを構築しています。
ロード、再生はJavascriptを利用しています。
これだけではどういう風にやっているのかわからないです。
もう少し具体的に説明していただくか、可能ならサンプルコードをご提示（zipに入れて添付）いただければと思います。
作成者:  ojaiman [ 2017年8月21日(月) 15:13 ]
記事の件名:  Re: audioのロードについて
返信ありがとうございました。
検証の為に、コードをそぎ落としていくと、Javascriptは関係なく、HTMLでの問題と判りました。

コード:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta http-equiv="content-style-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Pragma" content="no-cache">
<title>load test</title>
</head>
<body>
<div>
<audio id="audio1" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98041.mp3" type="audio/mp3">
</audio>
<audio id="audio2" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98042.mp3" type="audio/mp3">
</audio>
<audio id="audio3" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98043.mp3" type="audio/mp3">
</audio>
<audio id="audio4" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98044.mp3" type="audio/mp3">
</audio>
<audio id="audio5" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98045.mp3" type="audio/mp3">
</audio>
<audio id="audio6" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98046.mp3" type="audio/mp3">
</audio>
<audio id="audio7" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98047.mp3" type="audio/mp3">
</audio>
<audio id="audio8" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98048.mp3" type="audio/mp3">
</audio>
<audio id="audio9" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98049.mp3" type="audio/mp3">
</audio>
<audio id="audio10" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98040.mp3" type="audio/mp3">
</audio>
<audio id="audio11" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98051.mp3" type="audio/mp3">
</audio>
<audio id="audio12" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98052.mp3" type="audio/mp3">
</audio>
<audio id="audio13" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98053.mp3" type="audio/mp3">
</audio>
<audio id="audio14" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98054mp3" type="audio/mp3">
</audio>
<audio id="audio15" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98055.mp3" type="audio/mp3">
</audio>
<audio id="audio16" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98056.mp3" type="audio/mp3">
</audio>
<audio id="audio17" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98057.mp3" type="audio/mp3">
</audio>
<audio id="audio18" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98058.mp3" type="audio/mp3">
</audio>
<audio id="audio19" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98059.mp3" type="audio/mp3">
</audio>
<audio id="audio20" preload="auto" controls oncanplaythrough="console.log(this.id);">
<source src="/music/98060.mp3" type="audio/mp3">
</audio>
</div>
</body>
</html>


このような複数のMP3ファイルをロードした時、ロードが途中で止まり、全くロードしていないmp3は、再生する事ができない状態となります。

無駄なロードを防ぐ為に、必要分だけDLするという仕様は理解できるのですが、
再生したいファイルがロードされていない場合、待ち続けても再生されないという状態です…。

※再生した時にロードで待ちたくないので、「クリックなどでロード」ではなく、
ページ表示時に全てロードしたいです。

表示されているファイルを全て再生可能な状態にしたい、
あわよくば、全部最後までロードしてほしい、と思っていますが、
キャッシュ周りなど、設定でなんとかなるものでしょうか。
または、Javascript側のテクニックなどあるのでしょうか・・・。
作成者:  EarlgreyTea [ 2017年8月26日(土) 11:20 ]
記事の件名:  Re: audioのロードについて
ojaiman さんが書きました:
検証の為に、コードをそぎ落としていくと、Javascriptは関係なく、HTMLでの問題と判りました。
サンプルコードを見させていただきました。audio要素を埋め込んでいるだけなのですね。
この場合、ページの全てのaudio要素に指定されたmp3ファイルを一度にサーバーに要求をかけ、データが送られてくるのを待つのみとなります。
手近なレンタルサーバーに同様のhtmlとMP3をアップロードしてFirefox 28と55でテストしてみましたが、プレーヤーの見かけはかなり変わりましたが、特に動作に違いは見受けられませんでした。

ojaiman さんが書きました:
MP3ファイルを多数ロードすると、昔は（Version 29.0.1）
全てのファイルを100%自動にロードしてくれましたが、

現在は（Version 55.0.2）ロードが途中で止まり、再生を始めてから、残りの部分をロードする仕様になっているかと思います。

問題なのは、順番にロードを行って、途中で止まり、それ以降のファイルは一切ロードしてくれないので、
「canplaythrough」が発動しないファイルが出てくるのです。
私見ですが、これはサーバー側の状況が変わっただけではないでしょうか。
同時接続数が制限されていれば、一度にたくさんのファイルを要求してもオーバーした分は待たされます。こんな感じに


待たされすぎてタイムアウトになれば読み込みエラーとなることもあるでしょう。
待たされている間に再生ボタンをクリックすれば、再度要求が送られてそのデータが先に降ってくる、そういうことではないかと思います。
作成者:  ojaiman [ 2017年8月29日(火) 11:03 ]
記事の件名:  Re: audioのロードについて
ご確認ありがとうございました。
サーバ側の設定の可能性もあるとは思うのですが、、何も変えていないはずなので、、

firefoxの設定項目を色々とみていると、
network.buffer.cache.size;32768
という項目があり、この値を10倍ほどにしてみると、上記HTMLはもちろん、
他の「大量の音声データ入りのページ」が、全てDLをはじめました。

ただ、日本語、英語共に、この設定項目の説明がなく、数値を変えるのが少々不安です・・・。

質問させて頂いた現象は、この項目の数値を変更する事で解決したと考えて良いものでしょうか…。
また、大幅に数値を変えた事で考えられる不具合はないでしょうか・・・。
作成者:  ojaiman [ 2017年9月25日(月) 23:57 ]
記事の件名:  Re: audioのロードについて
問題の切り分けができました。

Firefoxの以前のバージョンを細かくインストールしました。
結論として、サーバやスクリプトの問題ではなく、Firefox40までは、表示した全てのaudioのロードを、100%行いますが、
Version 41からは、ロードを途中で中断します。
現在のバージョン（55.0.3）では、ほとんどの場合、再生中に残りの部分をロードして、再生に問題ありませんが、
100回に1回程度、ロードが途中で中断する現象に悩まされています。
ブラウザに残るキャッシュは全て削除した状態でテストしています。
ネットワークも同じ状態（イントラネット内ウェブサーバ）で行っています。

OSはWindows10 Homeで試しています。

バージョン履歴を見ても、41でaudio関連が変わった印象はないのですが、
40と41以降で明らかに挙動が変わります。

ロードを安定させて頂くか、
ロードの挙動を選択できるようになればありがたいのですが…。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/