html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>St. Patrick's Day Code I</title>
<style>
body {
background: green;
margin: 0;
padding: 0;
overflow: hidden;
outline: none;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
-webkit-tap-highlight-color: transparent;
flex-direction: column;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
.mesmerizing {
position: absolute;
css
css
1
2
3
body {
}
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var url = 'https://dl.dropbox.com/scl/fi/jltaitgwth9npx4czywds/St.-Patrick-s-Day.mp3?rlkey=ovshqhxat7z1z9zbnxtknr5ay&st=sd8jg2cx&dl=1';
window.AudioContext = window.AudioContext||window.webkitAudioContext; //fix up prefixing
var context = new AudioContext(); //context
var source = context.createBufferSource(); //source node
source.connect(context.destination); //connect source to speakers so we can hear it
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer'; //the response is an array of bits
request.onload = function() {
context.decodeAudioData(request.response, function(response) {
source.buffer = response;
source.start(0); //play audio immediately
source.loop = true;
}, function () { console.error('The request failed.'); } );
}
request.send();
/*
Image source: http://vignette3.wikia.nocookie.net/simpsonstappedout/images/7/7f/Leprechaun_the_simpsons.png/revision/latest?cb=20131201122712
*/
BROWSER
Console
Ejecutar