Compare commits
No commits in common. 'new_ver' and 'master' have entirely different histories.
@ -1,39 +0,0 @@ |
|||||||
@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;} |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
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(); |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 246 KiB |
Loading…
Reference in new issue