0

背景: 検索条件に基づいて、オーディオ ファイル (1 ～ 50) を一度にロードするサイトがあります。ユーザーはいつでも検索を調整して、何千ものオーディオ ファイルのライブラリを調べることができます。ページは更新されませんが、AJAX 経由で結果が提供されます。オーディオ タグを preload="auto" に設定することはできません。これは、同時に 50 のオーディオ トラックがロードされ、検索が変化し続け、複数の人が検索している場合、ブラウザがクラッシュするためです。解決策があるので、これは大したことではありません。ただし、解決策は 100% の防弾ではなく、正しい方法で実行すると、オーディオ ファイルの読み込みが完全に行われなくなる可能性があります。

コード: mouseenter でオーディオ ファイルの読み込みを開始するには、次のようにします。

$("#mainSelector").on('mouseenter', '.classOfAudioFiles', function() {
            varオーディオ、
                strippedId、
                $last_played = $('#last_played').val();
            strippedId = this.id.substring(15);
            audio = $('#audio_'+strippedId).get(0);
            if($last_played != 'audio_'+strippedId){
                console.log('オーバー');
                audio.play();
                audio.pause();
                audio.addEventListener("canplaythrough", function(){
                    console.log('準備完了');
                    }
                );
            }
        });

再生ボタンではなく、ボタンをクリックしてオーディオファイルを再生するには、次のようにします。

$("#mainSelector").on('クリック', '.classOfAudioFiles, .classOfAudioFiles2', function(event) {
            //再生中のすべてのオーディオを停止します
            $.each($('オーディオ'), 関数 () {
                this.pause();
            });
            //変数
            varオーディオ、
                $last_played = $('#last_played'),
                alreadyPlaying = $('#' + $last_played.val()).get(0),
                $hideLastOpened = $last_played.val().substring(6),
                stopAllActions、
                clickTrackId;
            if(this.id.substring(0,15) == 'classOfAudioFiles2'){
                clickTrackId = this.id.substring(16);
                console.log('タイトル');
            }そうしないと{
                clickTrackId = this.id
                console.log('ボタン');
            }


            if($('#last_played').val() != 'audio_'+clickingTrackId){
                //alert($last_played+' --- audio_'+clickingTrackId);
                //最後に開いたものを隠す
                $('#playTrack'+$hideLastOpened).hide();
                //プラス記号を表示
                $('#closePlus'+$hideLastOpened).show();
                //既に再生中 = 0;
            }
            //最後に再生したものを設定
            $last_played.val('audio_'+clickingTrackId);
            //オーディオを作成
            audio = $('#audio_'+clickingTrackId).get(0);
            audio.addEventListener("canplaythrough", function(){
                console.log('ready2');
                }
            );

            if($hideLastOpened == $('#last_played').val().substring(6)){
                $('#last_played').val('audio_1000');
                stopAllActions = 1;
            }そうしないと{
                stopAllActions = 0;
            }


            if (alreadyPlaying != 未定義 && stopAllActions == 1){
                alreadyPlaying.pause();

            }そうしないと{
                //遅延再生
                setTimeout(関数(){
                    audio.play();

                }、250);
            }
        });

質問: 上記のコードのいずれかで、音声ファイルを 100% の時間再生することを保証する何かが欠けていますか (遅延は 100% ではなくわずかに役立ちました)? これはRAMなどのサーバーの問題ですか？それともクライアント側に依存しているので、サーバーの調整は何もしませんか?

4

0 に答える 0