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