Svg: iframe cannot delete! What for?
I am trying to set up an animated icon in svg. I got the code on the tutorial site ... Everything works, except that when I try to remove an iframe in the HTML code (only one) the animation stops working. Why?
I put the codes in a zip file for you . If anyone can help me that would be great!
Edit:
HTML:
<!DOCTYPE html>
<html lang="en" style="">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/vendor/jquery.svginject.js"></script>
<script src="js/site.js"></script>
</head>
<body style="background-color:#ffffff">
<img src="img/audio-spectrum-analyzer.svg" data-audiofile="fondspacial.mp3" width="18" class="svg-inject">
</body>
</html>
<iframe style="display:none" frameborder="0" height="0" width="0" src="nothing.html"></iframe>
SVG (image):
<svg id="audio-spectrum-analyzer" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="320px" width="210px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 210 320" onclick="toggleAudio()">
<g id="eq-bars" height="320px" width="210px" fill="#010101" transform="">
<rect x="00" y="150" height="20" width="10" />
<rect x="20" y="140" height="40" width="10" />
<rect x="40" y="100" height="120" width="10" />
<rect x="60" y="120" height="80" width="10" />
<rect x="80" y="60" height="200" width="10" />
<rect x="100" y="20" height="280" width="10" />
<rect x="120" y="70" height="180" width="10" />
<rect x="140" y="120" height="80" width="10" />
<rect x="160" y="140" height="40" width="10" />
<rect x="180" y="150" height="20" width="10" />
<rect x="200" y="155" height="10" width="10" />
</g>
<defs>
<style type="text/css"><![CDATA[
svg#audio-spectrum-analyzer {
margin: 0 auto;
}
]]></style>
</defs>
<script type="application/javascript"><![CDATA[
var context;
if (typeof AudioContext !== "undefined") {
context = new AudioContext();
}
else if (typeof webkitAudioContext !== "undefined") {
context = new webkitAudioContext();
}
else {
throw new Error('AudioContext not supported. :(');
}
var eqHeight = document.querySelector('svg#audio-spectrum-analyzer > g#eq-bars').getAttribute('height').replace('px', '');
var bars = document.querySelectorAll('svg#audio-spectrum-analyzer rect');
var playing = false;
var audioFileUrl = document.querySelector('svg#audio-spectrum-analyzer').getAttribute('data-audiofile');
if (audioFileUrl === undefined) {
throw new Error('Audio File not defined');
}
var soundSource;
var fft;
var fftSmoothing = 0.6;
var fftMaxValue = 256;
var samples = 128;
var sampleIntervalID;
var ampFactor = 1.25;
var numBars = bars.length;
var soundBuffer;
var request = new XMLHttpRequest();
request.open("GET", audioFileUrl, true);
request.responseType = "arraybuffer";
// Our asynchronous callback
request.onload = function () {
var audioData = request.response;
// The Audio Context handles creating source
// buffers from raw binary data
soundBuffer = context.createBuffer(audioData, true /*make mono*/ );
};
request.send();
function sampleAudio() {
var data = new Uint8Array(fft.frequencyBinCount);
fft.getByteFrequencyData(data);
// Calc bin size to sum freqs into.
// Carve off some of the high-end, lower energy bars (+2)
var bin_size = Math.floor(data.length / (numBars + 2));
// Sum up and average the samples into their bins
for (var i = 0; i < numBars; ++i) {
// Sum this bin
var sum = 0;
for (var j = 0; j < bin_size; ++j) {
sum += data[(i * bin_size) + j];
}
// Duck some of the low-end power
if (i === 0) {
sum = sum * 0.75;
}
// Calculate the average frequency of the samples in the bin
var average = sum / bin_size;
var scaled_average = Math.max(10, ((average / fftMaxValue) * eqHeight) * ampFactor);
// Update eq bar height
bars[i].setAttribute('height', scaled_average);
// Center bar
bars[i].setAttribute('y', (eqHeight - scaled_average) / 2);
}
}
function playSound() {
// create a sound source
soundSource = context.createBufferSource();
// Add the buffered data to our object
soundSource.buffer = soundBuffer;
// Create the FFT
fft = context.createAnalyser();
fft.smoothingTimeConstant = fftSmoothing;
fft.fftSize = samples;
soundSource.connect(fft);
fft.connect(context.destination);
soundSource.noteOn(context.currentTime);
// Start the FFT sampler
sampleIntervalID = setInterval(sampleAudio, 30);
playing = true;
}
function stopSound() {
// Stop the FFT sampler
clearInterval(sampleIntervalID);
if (soundSource) {
soundSource.noteOff(context.currentTime);
}
playing = false;
}
var toggleAudio = function () {
if (!playing) {
playing = true;
playSound();
}
else {
stopSound();
playing = false;
}
}
window.addEventListener('load', function () {
window.toggleAudio = toggleAudio;
}, false);
]]></script>
</svg>
Javascript:
;(function ( $, window, document, undefined ) {
var pluginName = 'svgInject';
function Plugin(element, options) {
this.element = element;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
$(this.element).css('visibility', 'hidden');
this.swapSVG(this.element);
},
swapSVG: function (el) {
var imgURL = $(el).attr('src');
var imgID = $(el).attr('id');
var imgClass = $(el).attr('class');
var imgData = $(el).clone(true).data();
var dimensions = {
w: $(el).attr('width'),
h: $(el).attr('height')
};
$.get(imgURL, function (data) {
var svg = $(data).find('svg');
if (typeof imgID !== undefined) {
svg = svg.attr('id', imgID);
}
if (typeof imgClass !== undefined) {
var cls = (svg.attr('class') !== undefined) ? svg.attr('class') : '';
svg = svg.attr('class', imgClass + ' ' + cls + ' replaced-svg');
}
$.each(imgData, function (name, value) {
svg[0].setAttribute('data-' + name, value);
});
svg = svg.removeAttr('xmlns:a');
var ow = parseFloat(svg.attr('width'));
var oh = parseFloat(svg.attr('height'));
if (dimensions.w && dimensions.h) {
$(svg).attr('width', dimensions.w);
$(svg).attr('height', dimensions.h);
}
//Scale proportionally based on width
else if (dimensions.w) {
$(svg).attr('width', dimensions.w);
$(svg).attr('height', (oh / ow) * dimensions.w);
}
//Scale proportionally based on height
else if (dimensions.h) {
$(svg).attr('height', dimensions.h);
$(svg).attr('width', (ow / oh) * dimensions.h);
}
$(el).replaceWith(svg);
var js = new Function(svg.find('script').text());
js();
});
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);
+3
user4882035
source
to share
1 answer
Modify site.js
to add SVG to the DOM.
$(document).ready(function() {
$('.svg-inject').svgInject();
});
NOTE. The script in the SVG file uses the legacy Web Audio API.
createBuffer () is used to be able to accept compressed data and return decoded samples, but this ability was removed from the spec because all decoding was done on the main thread, so createBuffer () was blocking other code from executing.
Source: MDN
0
source to share