-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-one-image-radial.html
114 lines (99 loc) · 4.05 KB
/
index-one-image-radial.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>2000</title>
<meta name="author" content="Luca Murgia">
<meta name="keywords" content="2000, Two Thousand, Music, Future">
<meta name="description" content="Two Thousand is a faded idea of the future.">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><b>Two Thousand</b></h1>
<p>Two Thousand is a faded idea of the future. </p>
<canvas id="future-pro" width="800" height="400"></canvas>
<audio id="player"></audio>
</body>
<script type="text/javascript">
var SoundCloudAudioSource = function(audioElement) {
var player = document.getElementById(audioElement);
var self = this;
var analyser;
var fftNSamples = 1024;
var audioCtx = new (window.AudioContext || window.webkitAudioContext); // this is because it's not been standardised accross browsers yet.
analyser = audioCtx.createAnalyser();
analyser.fftSize = fftNSamples; // see - there is that 'fft' thing.
var source = audioCtx.createMediaElementSource(player); // this is where we hook up the <audio> element
source.connect(analyser);
analyser.connect(audioCtx.destination);
var sampleAudioStream = function() {
// This closure is where the magic happens. Because it gets called with setInterval below, it continuously samples the audio data
// and updates the streamData and volume properties. This the SoundCouldAudioSource function can be passed to a visualization routine and
// continue to give real-time data on the audio stream.
// console.log(self.streamData.length);
analyser.getByteFrequencyData(self.streamData);
// calculate an overall volume value
var total = 0;
for (var i = 0; i < 20; i++) { // get the volume from the first 80 bins, else it gets too loud with treble
total += self.streamData[i];
}
self.volume = total;
};
setInterval(sampleAudioStream, 20);
// public properties and methods
this.volume = 0;
this.streamData = new Uint8Array(fftNSamples / 2); // This just means we will have 128 "bins" (always half the analyzer.fftsize value), each containing a number between 0 and 255.
this.playStream = function(streamUrl) {
// get the input stream from the audio element
player.setAttribute('src', streamUrl);
player.play();
}
};
var audioSource = new SoundCloudAudioSource('player');
var canvasElement = document.getElementById('future-pro');
var context = canvasElement.getContext("2d");
var flag = 0;
var prevStreamData;
var draw = function() {
// you can then access all the frequency and volume data
// and use it to draw whatever you like on your canvas
var audioSum = 0;
// Load image from url
var audioImage = new Image();
var audioImageData;
// When image loads...
audioImage.onload = function() {
context.drawImage(this, 0, 0);
if (this.naturalWidth > 0){
var width = this.naturalWidth;
var height = this.naturalHeight;
var alpha = 0.45;
for (x = 0; x < width/2; x++) { // for each column...
if (x < audioSource.streamData.length) {
val = audioSource.streamData[x];
// val = audioSource.streamData[width/2 - x + 1];
}
else {
val = 1;
}
// Draw circle
red = val / 2;
green = val / 2;
blue = val / 8;
context.beginPath();
context.arc(width/2, height/2, x, 0, 2 * Math.PI, false);
context.strokeStyle = 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
context.lineWidth = 1;
context.stroke();
}//for
}//if
};
audioImage.src = "media/future-pro.png";
// Repeat
requestAnimationFrame(draw);
};
mp3FilePath = 'media/bge.mp3';
// mp3FilePath = 'media/elnico-short.mp3';
audioSource.playStream(mp3FilePath);
draw();
</script>