Compare commits
2 Commits
| Author | SHA1 | Date |
|---|---|---|
santic-zombie
|
0afbb5f439 | 5 years ago |
|
santic-zombie
|
1c4c1b7a45 | 5 years ago |
@ -0,0 +1,39 @@ |
|||||||
|
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); |
||||||
|
.social a { |
||||||
|
text-align: center; |
||||||
|
width: 2.3em; |
||||||
|
height: 2.3em; |
||||||
|
float: left; |
||||||
|
background: #000; |
||||||
|
border: 0.1em solid #ccc; |
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1); |
||||||
|
border-radius: 2em; |
||||||
|
margin: 0 1em 1em 0; |
||||||
|
padding: 0.6em; |
||||||
|
padding-top: 0.6em; |
||||||
|
padding-right: 0.6em; |
||||||
|
padding-bottom: 0.6em; |
||||||
|
padding-left: 0.6em; |
||||||
|
color: #fff; |
||||||
|
font-size: 0.8vw; |
||||||
|
} |
||||||
|
/* .github a:hover {background: #191919; color: #fff;} |
||||||
|
.youtube a:hover {background: #c4302b; color: #fff;} |
||||||
|
.google-pluse a:hover {background: #DD4B39; color: #fff;} |
||||||
|
.twitter a:hover {background: #00acee; color: #fff;} |
||||||
|
.instagram a:hover {background: #3f729b; color: #fff;} |
||||||
|
.facebook a:hover {background: #3b5998; color: #fff;} |
||||||
|
.skype a:hover {background: #00aff0; color: #fff;} |
||||||
|
.vk a:hover {background: #5d84ae; color: #fff;} |
||||||
|
.odnoklassniki a:hover {background: #f93; color: #fff;} |
||||||
|
.pinterest a:hover {background: #c8232c; color: #fff;} |
||||||
|
.linkedin a:hover {background: #0e76a8; color: #fff;} |
||||||
|
.telegram a:hover {background: #249bd7; color: #fff;} |
||||||
|
.tumblr a:hover {background: #34526f; color: #fff;} |
||||||
|
.windows a:hover {background: #125acd; color: #fff;} |
||||||
|
.whatsapp a:hover {background: #50b154; color: #fff;} |
||||||
|
.weibo a:hover {background: #d52b2b; color: #fff;} |
||||||
|
.dropbox a:hover {background: #1087dd; color: #fff;} */ |
||||||
|
|
||||||
|
.telegram a:hover {background: #fff; color: #000;} |
||||||
|
.lastfm a:hover {background: #fff; color: #000;} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
window.onload = function() { |
||||||
|
|
||||||
|
audio.src = 'http://stream.santic-zombie.ru'; |
||||||
|
audio.crossOrigin = "anonymous"; |
||||||
|
audio.load(); |
||||||
|
|
||||||
|
var context = new AudioContext(); |
||||||
|
var src = context.createMediaElementSource(audio); |
||||||
|
var analyser = context.createAnalyser(); |
||||||
|
|
||||||
|
var canvas = document.getElementById("canvas"); |
||||||
|
canvas.width = window.innerWidth; |
||||||
|
canvas.height = window.innerHeight; |
||||||
|
var ctx = canvas.getContext("2d"); |
||||||
|
|
||||||
|
src.connect(analyser); |
||||||
|
analyser.connect(context.destination); |
||||||
|
|
||||||
|
analyser.fftSize = 256; |
||||||
|
|
||||||
|
var bufferLength = analyser.frequencyBinCount; |
||||||
|
console.log(bufferLength); |
||||||
|
|
||||||
|
var dataArray = new Uint8Array(bufferLength); |
||||||
|
|
||||||
|
var WIDTH = canvas.width; |
||||||
|
var HEIGHT = canvas.height; |
||||||
|
|
||||||
|
var barWidth = (WIDTH / bufferLength) * 2.5; |
||||||
|
var barHeight; |
||||||
|
var x = 0; |
||||||
|
|
||||||
|
function renderFrame() { |
||||||
|
requestAnimationFrame(renderFrame); |
||||||
|
|
||||||
|
x = 0; |
||||||
|
|
||||||
|
analyser.getByteFrequencyData(dataArray); |
||||||
|
|
||||||
|
// ctx.fillStyle = "rgba(60, 60, 60, 0)";
|
||||||
|
ctx.clearRect(0, 0, WIDTH, HEIGHT); |
||||||
|
|
||||||
|
for (var i = 0; i < bufferLength; i++) { |
||||||
|
barHeight = dataArray[i]; |
||||||
|
|
||||||
|
var r = barHeight + (25 * (i/bufferLength)); |
||||||
|
var g = 250 * (i/bufferLength); |
||||||
|
var b = 50; |
||||||
|
|
||||||
|
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; |
||||||
|
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight); |
||||||
|
|
||||||
|
x += barWidth + 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
renderFrame(); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 246 KiB |
Loading…
Reference in new issue