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()），这会在旧浏览器中引起一些内存泄漏问题。有一些解决方法，但我认为这不是这个答案的范围。

Answer 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
});

基本上我只是链接我想用音频运行的功能，以便它只在加载后运行。希望这有助于任何人遇到同样的问题。它不像在页面加载时预加载那么方便，但我至少能够让我的其他函数等待声音在开始之前加载。

在移动设备上预加载音频

2 个答案: