如何使用jQuery创建有效的预加载器，可以将mp3文件预加载到浏览器缓存中？
[英]How to create valid preloader with jQuery, which can preload mp3 file to browser cache?
问题描述
I have a simple drawing spectrum on a website http://alldev.eu/html/mp3/index.phtml , which loads to browser cache a song and plays it after it's fully downloaded. 
我在一个网站http://alldev.eu/html/mp3/index.phtml上有一个简单的绘图光谱，它加载到浏览器缓存一首歌并在完全下载后播放它。
I've made a pre-loader for my site which displays a message and an image for 7 seconds while the song is being loaded. 我为我的网站制作了一个预加载器，在加载歌曲时显示一条消息和一个图像7秒钟。 Unfortunately, it doesn't work in the way I'd like to since 7 seconds might not be enough time to load a song (for instance, a test song with 11 Megabytes) 不幸的是，它不能按照我想要的方式工作，因为7秒可能没有足够的时间来加载歌曲（例如，一首11兆字节的测试歌曲）
How can I rebuild my site to pre-load all data? 如何重建我的网站以预加载所有数据？ My current script is below: 我目前的脚本如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>Shiny Toy Guns - Major Tom</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.extend({
jqbar: function(options) {
var DefaultSpeedOfAnimation = 7000;
var settings = $.extend({
SpeedOfAnimation: DefaultSpeedOfAnimation,
LengthOfBar: 200,
barWidth: 10,
barColor: 'red',
label: ' ',
value: 100
}, options);
return this.each(function() {
var valueLabelHeight = 0;
var ContainerProgress = $(this);
ContainerProgress.addClass('jqbar horizontal').append('<div class="bar-label"></div><div class="bar-level-wrapper"><div class="bar-level"></div></div><div class="bar-percent"></div>');
var progressLabel = ContainerProgress.find('.bar-label').html(settings.label);
var progressBar = ContainerProgress.find('.bar-level').attr('data-value', settings.value);
var progressBarWrapper = ContainerProgress.find('.bar-level-wrapper');
progressBar.css({
height: settings.barWidth,
width: 0,
backgroundColor: settings.barColor
});
var valueLabel = ContainerProgress.find('.bar-percent');
valueLabel.html('0');
animateProgressBar(progressBar);
function animateProgressBar(progressBar) {
var level = parseInt(progressBar.attr('data-value'));
if (level > 100) {
level = 100;
alert('max value cannot exceed 100 percent');
}
var w = settings.LengthOfBar * level / 100;
progressBar.animate({
width: w
}, {
duration: DefaultSpeedOfAnimation,
step: function(currentWidth) {
var percent = parseInt(currentWidth / settings.LengthOfBar * 100);
if (isNaN(percent)) percent = 0;
ContainerProgress.find('.bar-percent').html(percent + '%');
}
});
}
});
}
});
})(jQuery);
</script>
<style>
body {
text-align: center;
background-color: black;
color: white;
}
footer {
float: center;
bottom: 0;
position: absolute;
color: #FFFFFF;
font: bold 1.2em/2.5 arial;
width: 99%;
}
.jqbar {
position: relative;
top: 100px;
}
.jqbar.horizontal div {
display: inline-block;
margin-left: 5px;
font-size: 11px;
font-weight: bold;
}
.jqbar.horizontal .bar-percent {
font-size: 11px;
font-weight: bold;
height: 20px;
margin-bottom: 5px;
}
#progressbar {
width: 400px;
height: 22px;
border: 1px solid #000;
background-color: #292929;
}
#progressbar div {
height: 100%;
color: #FFF;
text-align: center;
line-height: 22px;
width: 0;
background-color: #0099FF;
}
#preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #FFF;
z-index: 99;
height: 100%;
}
#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-color: #000;
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body onload="hide_preloader();">
<div id="preloader">
<div id="status">Wait for MP3 Load...
<br>
<br>
<br>
<img src="http://alldev.eu/html/images/Loader.gif" />
</div>
</div>
<footer>
<center>
<div id="bar-1"></div>
<canvas id="music" width="1024" height="250" style="display: block;"></canvas>
</center>
</footer>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery("#status").delay(5000).fadeOut(2500);
jQuery("#preloader").delay(5000).fadeOut(2500);
jQuery("#bar-1").delay(5000).fadeOut(2500);
});
$(document).ready(function() {
$('#bar-1').jqbar({
SpeedOfAnimation: 7000,
label: 'Loading...',
value: 100,
barColor: '#FFF',
barWidth: 20
});
});
if (!window.AudioContext) {
if (!window.webkitAudioContext) {
alert('AudioContext not found!');
}
window.AudioContext = window.webkitAudioContext;
}
var context = new AudioContext();
var audioBuffer;
var sourceNode;
var analyser;
var javascriptNode;
var ctx = $("#music").get()[0].getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 325);
gradient.addColorStop(1, '#FFFFFF');
gradient.addColorStop(0.75, '#00FFFF');
gradient.addColorStop(0.25, '#0000FF');
gradient.addColorStop(0, '#000000');
setupAudioNodes();
loadSound("http://alldev.eu/html/mp3/Shiny%20Toy%20Guns%20-%20Major%20Tom%20(Official%20Live).mp3");
function setupAudioNodes() {
javascriptNode = context.createScriptProcessor(2048, 1, 1);
javascriptNode.connect(context.destination);
analyser = context.createAnalyser();
analyser.smoothingTimeConstant = 0.75; //0.5;
analyser.fftSize = 512;
sourceNode = context.createBufferSource();
sourceNode.connect(analyser);
analyser.connect(javascriptNode);
sourceNode.connect(context.destination);
}
$(document).ready(function() {
$.ajax({
url: "soundfile.mp3",
success: function() {
$("#play_button").show();
}
});
});
function loadSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
playSound(buffer);
}, onError);
}
request.send();
}
function playSound(buffer) {
sourceNode.buffer = buffer;
sourceNode.start(0);
}
function onError(e) {
console.log(e);
}
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
ctx.clearRect(0, 0, 1024, 325);
ctx.fillStyle = gradient;
drawSpectrum(array);
}
function drawSpectrum(array) {
for (var i = 0; i < (array.length); i++) {
var value = array[i];
ctx.fillRect(i * 5, 325 - value, 3, 325);
}
};
</script>
</body>
</html>
2 个解决方案
解决方案1
2 2014-02-19 17:59:38
you can give preloadJS a try. 你可以尝试preloadJS。 http://www.createjs.com/#!/PreloadJS http://www.createjs.com/#!/PreloadJS
here's some code from their documentation to get you started: 这里是他们的文档中的一些代码，可以帮助您入门：
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.on("complete", handleComplete, this);
queue.loadFile({id:"sound", src:"http://path/to/sound.mp3"});
queue.loadManifest([
{id: "myImage", src:"path/to/myImage.jpg"}
]);
function handleComplete() {
createjs.Sound.play("sound");
var image = queue.getResult("myImage");
document.body.appendChild(image);
}
解决方案2
1 2014-02-19 18:23:14
Check for JWPlayer API, you can have access to a method getBuffer() , which returns the current buffered state for your audio file : http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference/ 检查JWPlayer API，您可以访问getBuffer()方法，该方法返回音频文件的当前缓冲状态： http ： //www.longtailvideo.com/support/jw-player/28851/javascript-api-reference /
But this requires to use JWplayer to play / handle your audio file, as it's not included in the audio object : http://www.w3schools.com/tags/av_prop_buffered.asp 但这需要使用JWplayer播放/处理您的音频文件，因为它不包含在音频对象中： http ： //www.w3schools.com/tags/av_prop_buffered.asp
EDIT : 编辑：
I took some time to make it work, see the fiddle :) : http://jsfiddle.net/uKZ8N/ 我花了一些时间让它工作，看到小提琴:)： http ： //jsfiddle.net/uKZ8N/
Basically, I set an interval of 0,5s which check the getBuffer() value. 基本上，我设置一个0.5s的间隔来检查getBuffer（）值。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.