我有一些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');
答案 0 :(得分:0)
使用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>
元素<audio>
元素设置了两个属性,即声音的路径和音频的类型。一旦设置了属性,浏览器就会开始下载音频。注意:当我使用类似技术预加载图像时(使用$("<img>").load()
),这会在旧浏览器中引起一些内存泄漏问题。有一些解决方法,但我认为这不是这个答案的范围。
答案 1 :(得分:0)
$("#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
});
基本上我只是链接我想用音频运行的功能,以便它只在加载后运行。希望这有助于任何人遇到同样的问题。它不像在页面加载时预加载那么方便,但我至少能够让我的其他函数等待声音在开始之前加载。