javascript - 在移动设备上预加载音频

Question

我有一些JS设置可以在单击时播放声音。我的问题是，在移动设备上，单击后加载声音，而不是在预加载后播放。我试图使用html5preloader.js和jQuery AJAX调用来预加载声音，但移动设备似乎并不尊重这些功能。是否可以通过javascript预加载声音？这是一个具有此功能的网站:http://huracan.lamborghini.com/#!/en/listen

var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'audio/ding.mp3');

    audioElement.load()

    $.get();

    $('.animation, .navigation ul li, h4').click(function() {
        audioElement.play();
    });
var myLoader;
    myLoader = new html5Preloader();
    myLoader.loadFiles('audio/ding.mp3','audio/ding.ogg');

Answer 1

使用jQuery甚至使用纯JavaScript，您都可以预加载音频而无需任何插件。我在这里起草一个简单的例子，说明如何使用jQuery来完成:

$("<audio>")
    .error(function () { /* ... */ })
    .on("canplaythrough", function () {
        $(this).prependTo($("body"));
        this.play();
    })
   .attr("src", "/path/to/the/sound.mp3")
   .attr("type", "audio/mpeg");

您可能需要扩展上面的代码以包含一组 <source ...>元素，以支持多个文件类型，添加错误处理等。

片段中会发生什么:

动态创建一个新的<audio>元素

附加了

2事件侦听器(一个是在“错误”上触发的，另一个是在“canplaythrough”上触发的-这意味着浏览器已经预加载了足够的数据，相对安全，这样它就可以播放整个音频而不会受到干扰-您可以还使用“loadeddata”，当所有数据都被预加载时触发)，

和<audio>元素设置了两个属性，分别是声音的路径和音频的类型。设置属性后，浏览器就会开始下载音频。

注意:当我使用类似的技术预加载图像时(使用 $("<img>").load())，这在较旧的浏览器中引起了一些内存泄漏问题。有解决方法，但是我认为这超出了此答案的范围。