I'm trying to get a JSFiddle example of http://trackingjs.com/examples/face_tag_friends.html working but the hover effect is not working as the website shows. Here's my JSFiddle:
https://jsfiddle.net/lolptdr/25yqfyjo/6/
I had to use a proxy on raw.githubusercontent.com and changed it to raw.githack.com for the external scripts referenced in the HTML to bypass the MIME type complaint. No other console errors so what else is wrong?
What else can I check to get the same effect as shown on trackingjs.com's website?
window.onload = function() {
var img = document.getElementById('img');
var tracker = new tracking.ObjectTracker('face');
tracking.track(img, tracker);
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
plotRectangle(rect.x, rect.y, rect.width, rect.height);
});
});
var friends = ['Thomas Middleditch', 'Martin Starr', 'Zach Woods'];
var plotRectangle = function(x, y, w, h) {
var rect = document.createElement('div');
var arrow = document.createElement('div');
var input = document.createElement('input');
input.value = friends.pop();
rect.onclick = function name() {
input.select();
};
arrow.classList.add('arrow');
rect.classList.add('rect');
rect.appendChild(input);
rect.appendChild(arrow);
document.getElementById('photo').appendChild(rect);
rect.style.width = w + 'px';
rect.style.height = h + 'px';
rect.style.left = (img.offsetLeft + x) + 'px';
rect.style.top = (img.offsetTop + y) + 'px';
};
};
* {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
.demo-title {
position: absolute;
width: 100%;
background: #2e2f33;
z-index: 2;
padding: .7em 0;
}
.demo-title a {
color: #fff;
border-bottom: 1px dotted #a64ceb;
text-decoration: none;
}
.demo-title p {
color: #fff;
text-align: center;
text-transform: lowercase;
font-size: 15px;
}
.demo-frame {
background: url(frame.png) no-repeat;
width: 854px;
height: 658px;
position: fixed;
top: 50%;
left: 50%;
margin: -329px 0 0 -429px;
padding: 95px 20px 45px 34px;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.demo-container {
width: 100%;
height: 530px;
position: relative;
background: #eee;
overflow: hidden;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.dg.ac {
z-index: 100 !important;
top: 50px !important;
}
/* example's CSS */
#photo:hover .rect {
opacity: .75;
transition: opacity .75s ease-out;
}
.rect:hover * {
opacity: 1;
}
.rect {
border-radius: 2px;
border: 3px solid white;
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.3);
cursor: pointer;
left: -1000px;
opacity: 0;
position: absolute;
top: -1000px;
}
.arrow {
border-bottom: 10px solid white;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
width: 0;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: -12px;
opacity: 0;
}
input {
border: 0px;
bottom: -42px;
color: #a64ceb;
font-size: 15px;
height: 30px;
left: 50%;
margin-left: -90px;
opacity: 0;
outline: none;
position: absolute;
text-align: center;
width: 180px;
transition: opacity .35s ease-out;
}
#img {
position: absolute;
top: 50%;
left: 50%;
margin: -173px 0 0 -300px;
}
<script src="https://raw.githack.com/eduardolundgren/tracking.js/master/build/tracking.js"></script>
<script src="https://raw.githack.com/eduardolundgren/tracking.js/master/build/data/face.js"></script>
<div class="demo-title">
<p>tracking.js － hover image to see all faces detected</p>
</div>
<div class="demo-frame">
<div class="demo-container"> <span id="photo"><img id="img" src="https://raw.githubusercontent.com/eduardolundgren/tracking.js/master/examples/assets/faces.jpg" /></span>
</div>
</div>
All the above answers address why this is failing very well, but here's a working example of tracker.js in jsfiddle using a flickr image:
http://jsfiddle.net/rambutan2000/v5v49bax/
Flickr seems to have Access-Control-Allow-Origin set correctly in the header. I've had limited success using a proxy (crossorigin.me).
Thi is a simplified version of this example:
https://trackingjs.com/examples/face_hello_world.html
First I had to get valid URLs to the Tracker includes, I used this service:
http://rawgit.com. Look in the "External Resources" in jsfiddle.
I based this off an example which uses a XMLHttpRequest to retrieve the image data as a buffer, then load this into an img element. This negates SOME CORS issues on the img element as it was sourced from code not a URL. The rest is ripped straight from the Tracker example referenced above.
JS:
// use http://rawgit.com/ to get js urls from github
// use https://crossorigin.me/ to get around CORS for image reference
function _arrayBufferToBase64(buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return window.btoa(binary);
}
window.plot = function(x, y, w, h) {
var $rect = $("<div></div>");
$rect.addClass("rect");
$rect.offset({ top: y, left: x });
$rect.width(w).height(h);
$("#demo-container").append($rect);
};
var imgURL = 'https://c1.staticflickr.com/4/3943/15715482121_d7120a6e0b_z.jpg'; // Works!
//var imgURL = 'https://placeimg.com/640/480/people'; // Does not work
//var imgURL = 'https://crossorigin.me/https://placeimg.com/640/480/people'; // Works!
var oReq = new XMLHttpRequest();
oReq.open("GET", imgURL, true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response; // Note: not oReq.responseText
if (arrayBuffer) {
var x = imgURL.split('.');
var ext = x[x.length - 1];
var b64img = _arrayBufferToBase64(arrayBuffer);
$("#img").attr('src', 'data:image/' + ext + ';base64,' + b64img).appendTo($('body'));
var img = document.getElementById('img');
var tracker = new tracking.ObjectTracker(['face']);
tracker.setStepSize(1.7);
tracking.track('#img', tracker);
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
console.log(rect);
window.plot(rect.x, rect.y, rect.width, rect.height);
});
});
}
};
oReq.send(null);
HTML:
<div id="demo-container">
<img id="img" src="" />
</div>
CSS:
.rect {
position:absolute;
border-style: solid;
border-width: 2px;
border-color: blue;
}
#demo-container {
position:absolute;
}
This is a quick answer, but hopefully it'll help you understand what's going on. It's failing because the code is trying to load this resource: http://trackingjs.com/bower/tracking.js/examples/assets/frame.png
You can see that it's loaded on the original page: http://trackingjs.com/examples/face_tag_friends.html and you can see that your JSFiddle attempts to load it as well (although with a different host, the same relative path). When the browser attempts to GET https://fiddle.jshell.net/25yqfyjo/7/show/frame.png, a 404 happens because the file doesn't exist and this halts execution.
Look at your Developer Tools while running the JSFiddle. My guess is, that this other script you load (https://raw.githack.com/eduardolundgren/tracking.js/master/build/data/face.js), which appears to be binary data (rendering the picture) shouldn't be included. Instead, walk through the base documentation for http://trackingjs.com/ and understand how to use face detection on your own photo. Presumably, it'll be easier and work.
Cross Origin:
i have updated your code to use DOMContentLoaded and manually firing the event so you can see the problem: https://jsfiddle.net/25yqfyjo/11/
So i'm forcing the event with
// Create the event
var event = new CustomEvent("DOMContentLoaded", { "detail": "Content Loaded trigger" });
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
And you can see in the console the error:
Uncaught SecurityError: Failed to execute 'getImageData' on
'CanvasRenderingContext2D': The canvas has been tainted by
cross-origin
data.tracking.trackCanvasInternal_ #
tracking.js:196(anonymous function) #
tracking.js:221img.onload #
tracking.js:472
This is caused by the fact your loading an image from another URL into the canvas that is being used by your code (even though you can't see it the var tracker = new tracking.ObjectTracker('face'); will be using a canvas) i think for purposes of JS Fiddle you could change the Image to Base64 encoded and that would correct the problem.
You will need more actions :
First open developer tool F12 (chrome) goto tab console switch frame to :
Now you can track your code . I found your js code looks like your use of
window.onload is little critical in any way .(tag breaks) . You have more times in code onload event.
Every time when you call window.onload = SOMETHING you are override this function . window.onload is function with just one time execution . Simply on load document . This is not JQ .
Also you have :
GET https://fiddle.jshell.net/lolptdr/25yqfyjo/6/show/frame.png 404 (Not Found)
This is namespace { } for js ,
if you have error like this .
{
exeOK()
IamError() ; BREAKS HERE
IneverLoaded()
}
This can be also your solution :
Check in debugger did you load js code to the end.
Related
I'm forking Louis Hoebregts's brilliant Flowing Image on code pen, & attempting to get to modify it for my own art.
UPDATE: as suggested by commentators, I looked at the Chrome Dev console, it complains:
Fetch API cannot load file:///C:/Users/Sam/Downloads/flowing-imagehow-to/flowing-imagehow-to/dist/rowling-dark-bg.jpg. URL scheme "file" is not supported.
I tried removing dashes from the image file name but to no avail.
If I use a web URL that complains
Access to fetch at 'https://pottertour.co.uk/blog/images/rowling/rowling-dark-bg.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
but I want a relative file path anyway, I want to load an image locally. Any help pointing me to what I need to do appreciated.
JAVASCRIPT:
let img;
const detail = 6;
let particles = [];
let grid = [];
let particleImage;
let ctx;
function preload() {
img = loadImage('**https://pottertour.co.uk/blog/images/rowling/rowling-dark-bg.jpg**');
}
class Particle {
constructor (x, y) {
this.x = x || random(width);
this.y = y || random(height);
this.prevX = this.x;
this.speed = 0;
this.v = random(0, 0.7);
}
update (speed) {
if (grid.length) {
this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;
}
this.x += (1 - this.speed) * 3 + this.v;
if (this.x > width) {
this.x = 0;
}
}
draw () {
image(particleImage, this.x, this.y);
}
}
/* ====== STEP 1 ====== */
function step1 () {
clear();
noLoop();
image(img, 0, 0, width, height);
noFill();
stroke(120);
strokeWeight(1);
strokeCap(SQUARE);
ctx.globalAlpha = 1;
for (let y = 0; y < height; y+=detail) {
for (let x = 0; x < width; x+=detail) {
rect(x + 0.5, y + 0.5, detail, detail);
}
}
}
...
function setup () {
const canvas = createCanvas(100,100);
ctx = canvas.drawingContext;
pixelDensity(1);
particleImage = createGraphics(8, 8);
particleImage.fill(255);
particleImage.noStroke();
particleImage.circle(4, 4, 4);
windowResized();
document.querySelector('#step').addEventListener('input', () => {
if (window['goToStep' + step.value]) {
window['goToStep' + step.value]();
}
draw();
});
}
function windowResized () {
const imgRatio = img.width/img.height;
if (windowWidth/windowHeight > imgRatio) {
resizeCanvas(floor(windowHeight * imgRatio), floor(windowHeight));
} else {
resizeCanvas(floor(windowWidth), floor(windowWidth / imgRatio));
}
noiseSeed(random(100));
if (window['goToStep' + step.value]) {
window['goToStep' + step.value]();
}
draw();
}
const texts = document.querySelectorAll('section p');
function draw () {
window['step' + step.value]();
texts.forEach(text => text.style.display = 'none');
texts[step.value - 1].style.display = 'block';
}
I tried downloading my fork and running it on my computer, under the assumption maybe Codepen doesn't like externally hosted image files, but it didn't work.
I think the problem is in the Javascript above. Probably in the setup function? Is there something there which is fussy about the dimensions of images that the thing loads? How would I fix that?
I do apologise, my Javascript is knowledge is presently cow headed, I just hack, Javascript is a holiday from App development for me.
HTML:
<input type="range" min="1" max="6" step="1" id="step" value="1">
<section>
<p>Draw an image and divide it into a grid</p>
<p>Get the brightness of every cell</p>
<p>Draw particles moving from left to right</p>
<p>Update each particle's speed based on the brightness of its position</p>
<p>Fade each particle based on its speed</p>
<p>Do not clear your scene on each frame, to let the particles fade out</p>
</section>
CSS
body {
margin: 0;
overflow: hidden;
display: flex;
height: 100vh;
background: black;
}
canvas {
margin: auto;
touch-action: none;
}
#mixin track {
box-sizing: border-box;
height: 6px;
background: #fff;
-webkit-appearance: none;
appearance: none;
}
#mixin thumb {
box-sizing: border-box;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
border: 2px solid black;
-webkit-appearance: none;
appearance: none;
cursor: grab;
}
input {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
width: 80%;
height: 34px;
max-width: 400px;
background: transparent;
-webkit-appearance: none;
appearance: none;
&:active {
cursor: grabbing;
}
&::-webkit-slider-runnable-track {#include track }
&::-moz-range-track { #include track }
&::-ms-track { #include track }
&::-webkit-slider-thumb {margin-top: -12px;#include thumb}
&::-moz-range-thumb { #include thumb }
&::-ms-thumb {margin-top:0px;#include thumb}
}
section {
box-sizing: border-box;
font-size: 30px;
color: white;
position: fixed;
left: 0;
top: 20px;
width: 100%;
text-align: center;
padding: 10px 10%;
z-index: 10;
pointer-events: none;
text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
background: rgba(0, 0, 0, 0.7);
p {
margin: 0;
}
#media (max-width: 500px) {
font-size: 24px;
}
}
You could use the developer mode of Chrome to confirm whether there are exceptions, and debug the js.
In the following code, when I put the div with class thumb-bar, the JavaScript I have written works but if place use it after full-img div tag, it doesn't work also the CSS attribute cursor: pointer for the thumb-bar div is not applied.
Edit - I mean the click listeners I apply using JavaScript are not working
CSS:
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
HTML:
<div class="thumb-bar"></div>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<button class="dark">Darken</button>
</div>
JavaScript:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
for (var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', function(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'))
});
}
Because you're floating .thumb-bar img, those images are taken out of the page flow which results in the .thumb-bar element to have a height of 0, which in turn causes subsequent content to not be pushed down. That means that the .full-img element is rendered on top of the images and obscures them from the mouse pointer.
You need to clear the floats in order to get the .full-img element to render below them. This can be done by either making sure the .thumb-bar clear it's own content:
.thumb-bar {
overflow: hidden;
}
... or make the .full-img element itself clear them:
.full-img {
clear: both;
}
I'm new to javascript/css and would like to make a version of a mouseover popup similar to the one that displays over the underlined words here: http://st.japantimes.co.jp/essay/?p=ey20141219
I can see the code that is used, but I'm not sure where/how to add in my own speech bubble image when I edit the code for my own project.
Here is an example of the code used on the referenced page:
HTML:
<a style="cursor:pointer;" onclick="showChuPopup(event,'<b>’Twas</b><br />It was の省略');return false;" onmouseover="showChuPopup(event,'<b>’Twas</b><br />It was の省略');" onmouseout="endChuPopup();">’Twas</a>
Javascript:
function showChuPopup(e,text){
if(document.all)e = event;
var obj = document.getElementById('chu_popup');
var obj2 = document.getElementById('chu_popup_text');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);/*
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;*/
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';} function endChuPopup() {
document.getElementById('chu_popup').style.display = 'none';} function touchHandler(e){
document.getElementById('chu_popup').style.display = 'none';}
Thanks for any help or ideas.
There are a few ways to go about this, but I'll recommend two options and provide links to both!
First, check out the answer on this question to see if this is what you want:
jQuery Popup Bubble/Tooltip
Second, have you thought about just using a tooltip with CSS? They're not hard to implement at all, and you can absolutely bind data to them.
(Shamelessly stolen from: https://www.w3schools.com/css/css_tooltip.asp, I would recommend poking around here and also looking into Bootstrap if you're a beginner!)
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
I am making this simple tooltip where I want to position the tooltip bottom at the top of the parent element. I want to do this by getting the height of the tooltip element and set this number negative to the top positioning.
The problem is that at the time that I hover the element, the tooltip height is 0, according to console.log();
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
var height = html.height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
} else {
element.remove();
}
});
.element {
height: 50px;
width: 50px;
margin: 50px auto;
background: #000;
}
.tooltip {
position: relative;
}
.tooltip .tip-content {
width: 180px;
margin-left: -98px;
padding: 10px 5px;
position: absolute;
left: 50%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #294a72;
font-size: 0.75em;
color: #fff;
text-align: center;
}
.tooltip .tip-content:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #294a72;
border-width: 5px;
margin-left: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element tooltip" data-tip-content="This is a test content">
</div>
At the time you're checking the height, the element has not yet been added to the DOM, and therefore can have no height. You simply need to switch the order of your statements. jQuery can and will change the CSS of the element even after it has been added.
var html = $('<p class="tip-content">' + content + '</p>');
$(this).prepend(html); //This line must go before the next
var height = html.height();
console.log(height);
However, you're still missing some pieces. height() does not include either margin or padding. To get padding, you can use outerHeight(), but margin you'll have to either read from the CSS or use a hard-coded value. Even worse, your arrow is using a pseudo-element, which *cannot* be read by DOM traversal, so your best bet there is to just hardcode it, sadly.
A better height calculation might look like:
var ARROW_HEIGHT = 5;
html.outerHeight() + parseInt(html.css('marginBottom'), 10) + ARROW_HEIGHT;
I think you have to prepend the HTML, and then get the height and reposition the element. Right now, you are getting the height of a variable, not an HTML element.
You just need to get height of 'tooltip' instead of 'tip-content'.
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
// Get height of parent element
var height = $(this).height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
} else {
element.remove();
}
});
.element {
height: 50px;
width: 50px;
margin: 50px auto;
background: #000;
}
.tooltip {
position: relative;
}
.tooltip .tip-content {
width: 180px;
margin-left: -98px;
padding: 10px 5px;
position: absolute;
left: 50%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #294a72;
font-size: 0.75em;
color: #fff;
text-align: center;
}
.tooltip .tip-content:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #294a72;
border-width: 5px;
margin-left: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element tooltip" data-tip-content="This is a test content">
</div>
For html object gets a height automatically, you need first put in DOM. That the reason for you get height = 0. You need first append your object and then get the height.
See my example: https://jsfiddle.net/bwun82q4/
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
var height = html.height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
$(this).find("p").css("top",- $(this).find("p").height());
} else {
element.remove();
}});
Is there any way to detect whether a certain page is making noise using jscript? Some sort of environmental variable or something that tracks the status of the speakers? I'm attempting to write a script that puts an icon on the Tab Title if that Tab is making sound.
No, this isn't possible.
Lots of plugins can make sound, and they all do it in their own way. There is no catch-all here.
Perhaps on Vista/7 where applications sound usage is actually kept track of, and when using a browser like Chrome that makes a separate process for each page, you might have more luck. It would involve figuring out which processes are playing sound, then figuring out what page each process had loaded. Through JavaScript though? No way.
Scraped from Quora
The majority of sound on the web is
done through Flash. Flash doesn't
inform the browser when it is making
sound. That is to say, if two
different tabs are running Flash, the
browser can't know which is the one
making sound.
The introduction of the HTML5 media
tags could help in this area, but I
suspect an audio indicator that only
worked some of the time (for non-Flash
pages) would be more frustrating than
no audio indicator.
(Pay no attention to the comment below (in the linked Quora question) saying Chrome displays a 'play' icon when sound is played. That's Soundcloud changing the title of its own page, not Google Chrome)
I don't think you can detect whether or not the speakers are making noise in JavaScript, however you may not have to.
Perhaps you could keep track of this yourself, implicitly. So for example, if there is a play button, on click you could start playing the audio and show the icon. Once the user clicks the stop button, you stop the audio and hide the icon.
This can help you, fbc_array is de array noise use fbc_array[value] for get this noise.
example:
window.onload = function() {
var file = document.querySelector('input');
file.onchange = function(e) {
var boton = e.target.files;
var archivo = boton[0];
if (!archivo.type.match(/audio/)) {
alert("Seleciona un audio, por favor.");
} else {
var lector = new FileReader();
lector.readAsDataURL(archivo);
lector.addEventListener("load", initMp3Player, false);
}
}
function initMp3Player(e) {
var result = e.target.result;
var audio = document.querySelector('audio');
audio.src = result;
context = new AudioContext();
analyser = context.createAnalyser();
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
function frameLooper() {
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
document.querySelector('#o1').style.transform = 'scale(' + fbc_array[1] / 75 + ')';
document.querySelector('#o2').style.transform = 'scale(' + fbc_array[50] / 100 + ')';
document.querySelector('#o3').style.transform = 'scale(' + fbc_array[100] / 200 + ')';
}
}
* {
margin: 0;
padding: 0;
cursor: default;
}
body {
background: #222;
}
input {
position: fixed;
left: 0;
right: 0;
margin: auto;
background: rgb(76, 142, 250);
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: .875em;
padding: 10px 24px;
}
#o1 {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
background: #333;
margin: auto;
border-radius: 50%;
}
#o2 {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
margin: auto;
background: #0074d9;
border-radius: 50%;
}
#o3 {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
margin: auto;
background: #fff;
border-radius: 50%;
}
<input type="file"></input>
<audio autoplay></audio>
<div id="o1"></div>
<div id="o2"></div>
<div id="o3"></div>