草庐IT

javascript - 在javascript html5音频预加载上取消了http请求

coder 2025-01-22 原文

我正在尝试使用 javascript 预加载音频文件。我正在使用 Chrome ， 当文件数量增加时，chrome 取消了我文件的 http 请求... 为什么？我能做什么？ 这是我的代码:

filesToLoad = 44;
filesLoaded = 0;

for ( var ni = 1; ni < filesToLoad; ni++) {

    console.log("start::: " + ServerPath + 'audio/' + ni + '.mp3');
    loadAudio(ServerPath + 'audio/' + ni + '.mp3');
}

function loadAudio(uri) {
    var audio = new Audio();
    audio.addEventListener('canplaythrough', isAppLoaded, true); // It
    audio.src = uri;
    return audio;
}

function isAppLoaded() {
    filesLoaded++;
    if (filesLoaded >= filesToLoad) {
        cb();
    }
    console.log("load::: " + ServerPath + 'audio/' + filesLoaded + '.mp3');
}

function cb() {
    alert("loaded");
}

最佳答案

我正在尝试做同样的事情。我预加载了 12 个音频和 12 个图像文件，为基于它们的交互事件做准备。我遇到了同样的问题(请求已取消)。

我整理了这个对我有用的例程(到目前为止已完成 Chrome 测试)。 

    cacheLessonFiles: function (lessonWords, cacheImg, cacheAudio) {
        var
        fileName = '',
        img = {},
        audio = {},
        wordIDs = Object.keys(lessonWords)
        ;
        wordIDs.forEach(function (wordID) {
            if (cacheImg) {
                fileName = lessonWords[wordID].img || wordID;
                img = new Image();
                img.onload = function () {
                    console.log('cache: finished caching ' + this.src);
                };
                img.src = "/img/" + fileName + imageSuffix;
            }
            if (cacheAudio) {
                fileName = lessonWords[wordID].saySpanish || wordID;
                audio = new Audio();
                audio.onloadeddata = function () {
                    console.log('cache: finished caching ' + this.src);
                };
                audioArray.push({a: audio, f:"/audio/" + fileName + audioSuffix});
            }
        });
        setTimeout(loadAudio, AUDIO_LOAD_WAIT);
    },

该例程仅加载图像文件而无需特殊处理。图像文件比较棘手。我没有为循环中的所有音频文件设置源，而是使用音频元素和关联的源文件名 (.mp3) 填充了一个数组。然后我在超时时启动了一个自启动回调来处理数组，在请求之间暂停 200 毫秒。

function loadAudio () {
    var
    aud = audioArray.pop()
    ;
    aud.a.src = aud.f;
    if (audioArray.length > 0) {
        setTimeout(loadAudio,  AUDIO_LOAD_WAIT);
    }
}

一个常量和一个变量在闭包内，但在 cacheLessonFiles() 方法之外。

AUDIO_LOAD_WAIT = 200,
audioArray = []

我试过等待时间少于 200 毫秒，但取消的请求开始重新出现。

我想客户端在连接速度较慢的一端(我在光纤上)可能会再次出现故障，但这对我的目的来说已经足够好了。

关于javascript - 在javascript html5音频预加载上取消了http请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9565979/

javascripthtml5audiofunctionsectionhttphtml5-audiopersistent-connection

有关javascript - 在javascript html5音频预加载上取消了http请求的更多相关文章

  1. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  2. ruby - 如何模拟 Net::HTTP::Post？ - 2

    是的，我知道最好使用webmock，但我想知道如何在RSpec中模拟此方法:defmethod_to_testurl=URI.parseurireq=Net::HTTP::Post.newurl.pathres=Net::HTTP.start(url.host,url.port)do|http|http.requestreq,foo:1endresend这是RSpec:let(:uri){'http://example.com'}specify'HTTPcall'dohttp=mock:httpNet::HTTP.stub!(:start).and_yieldhttphttp.shou

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  7. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  8. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  9. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  10. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

随机推荐