动态html5音频文件未加载一致

Question

背景： 我有一个网站，根据搜索条件一次加载音频文件（1 - 50）。用户可以随时调整搜索以查看包含数千个音频文件的库。页面不刷新，但通过AJAX提供结果。我无法将音频标签设置为preload =“auto”，因为如果同时加载了50个音轨，并且搜索不断变化且搜索的人不止一个，则浏览器将崩溃。这不是什么大问题，因为有一个解决方案。虽然解决方案不是100％防弹，如果完成，正确的方法可能导致音频文件的加载完全没有发生。

CODE： 要开始在mouseenter上加载音频文件，请执行以下操作：

$("#mainSelector").on('mouseenter', '.classOfAudioFiles', function() {
            var audio,
                strippedId,
                $last_played = $('#last_played').val();
            strippedId = this.id.substring(15);
            audio = $('#audio_'+strippedId).get(0);
            if($last_played != 'audio_'+strippedId){
                console.log('over');
                audio.play();
                audio.pause();
                audio.addEventListener("canplaythrough", function(){
                    console.log('ready');
                    }
                );
            }
        });

要点击按钮播放音频文件，而不是播放按钮，我会这样做：

$("#mainSelector").on('click', '.classOfAudioFiles, .classOfAudioFiles2', function(event) {
            //stop all playing audio
            $.each($('audio'), function () {
                this.pause();
            });
            //variables
            var audio,
                $last_played = $('#last_played'),
                alreadyPlaying = $('#' + $last_played.val()).get(0),
                $hideLastOpened = $last_played.val().substring(6),
                stopAllActions,
                clickingTrackId;
            if(this.id.substring(0,15) == 'classOfAudioFiles2'){
                clickingTrackId = this.id.substring(16);
                console.log('title');
            }else{
                clickingTrackId = this.id
                console.log('button');
            }


            if($('#last_played').val() != 'audio_'+clickingTrackId){
                //alert($last_played+' --- audio_'+clickingTrackId);
                //hide the last opened
                $('#playTrack'+$hideLastOpened).hide();
                //show the plus sign
                $('#closePlus'+$hideLastOpened).show();
                //alreadyPlaying = 0;
            }
            //set last played
            $last_played.val('audio_'+clickingTrackId);
            //create audio
            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;
            }else{
                stopAllActions = 0;
            }


            if (alreadyPlaying != undefined && stopAllActions == 1){
                alreadyPlaying.pause();

            }else{
                //delay play
                setTimeout(function(){
                    audio.play();

                }, 250);
            }
        });

问题： 在上述任何一个代码中是否有一些东西可以确保音频文件在100％的时间内播放（延迟有所帮助，但不是100％）？这更像服务器问题，比如ram？或者它是客户端依赖的，所以服务器调整什么都不做？