在移动设备上预加载音频

Posted 2023-02-25

技术标签:

【中文标题】在移动设备上预加载音频【英文标题】：Preloading audio on mobile devices 【发布时间】：2014-02-12 20:33:59 【问题描述】：

我已经设置了一些 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');

【问题讨论】：

【参考方案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 ...> 元素以支持多个文件类型，添加错误处理等...

sn-p 中发生了什么：

一个新的<audio>元素被动态创建，附加了 2 个事件侦听器（一个在“错误”上触发，另一个在“canplaythrough”上触发 - 这意味着浏览器已预加载足够的数据以相对安全地播放整个音频而不会中断 -你也可以使用“loadeddata”，它会在所有数据都被预加载时触发），和<audio>元素设置了两个属性，即声音的路径和音频的类型。设置好属性后，浏览器立即开始下载音频。

注意：当我使用类似的技术来预加载图像时（使用$("<img>").load()），这会在旧版浏览器中导致一些内存泄漏问题。有解决方法，但我认为这超出了这个答案的范围。

【讨论】：

我将我的问题介绍为移动问题，但当我问“是否可以通过 javascript 预加载声音？”时，我没有提及这一点。我的错误是不清楚。不过，感谢您的洞察力。公平竞争，@Noah。在移动设备上，您是对的，大多数实现都会犹豫在没有用户交互的情况下预加载任何内容（它甚至可能是官方规范的一部分）以节省带宽。如果您找到了预加载声音的方法，您可能会发现以下方法很有用。我在ibm.com/developerworks/library/wa-ioshtml5 阅读了 A. Gloege 的“音频精灵”（在文章的底部）。这是他的 jsfiddle jsfiddle.net/aarongloege/rQv5h/light/【参考方案2】：

汤姆的回答应该对某些人有所帮助，这是我在意识到它不适用于移动设备之前使用的方法。显然您不能在移动设备上预加载媒体，必须有用户交互才能加载媒体。解决方案比我预期的要简单：

$("#audio").attr('src', 'audio/ding.mp3').on("playing",function()
    loop();  //function to run simultaneously with sound
);

$(".animation, .navigation ul li, h4").on("click tap",function ()
    document.getElementById("audio").play(); //click to trigger sound
);

基本上，我只是将要运行的函数与音频链接起来，以便它仅在加载后运行。希望这可以帮助任何有同样问题的人。它不如在页面加载时预加载方便，但我至少能够让我的其他功能在触发之前等待声音加载。

【讨论】：