var player = document.getElementById('player'); player.onplaying = function() { var audioCtx = new AudioContext(); var source = audioCtx.createMediaElementSource(player); var analyser = audioCtx.createAnalyser(); source.connect(analyser); // Подключаем анализатор к элементу audio analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает. var frequencyData = new Uint8Array(analyser.frequencyBinCount); var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); setInterval(function() { analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот ctx.fillStyle = "blue"; // Задаём цвет фона ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос ctx.fillRect(0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран ctx.fillStyle = "gold"; // Задаём цвет полос ctx.globalAlpha = 1; for (i = 0; i < 1024; i++) { ctx.fillRect(i, 255 - frequencyData[i], 1, frequencyData[i]); // рисуем полосу } }, 20); }
var audio = $("#sound")[0]; $("#container").mouseenter(function() { audio.play(); }).mouseleave(function() { audio.pause(); }); body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #F0EEED; } audio { display: none; } #container { height: 180px; width: 180px; background: rgba(255,255,255,.8); border-radius: 24px; position: relative; box-shadow: 0 0 20px 0 rgba(0,0,0,.15); transition: .5s linear; } #container:before { content: "\f001"; font-family: FontAwesome; font-size: 70px; background: -webkit-linear-gradient(50deg, #FD9F85 50%, #E837C2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #FF7E24; position: absolute; line-height: 180px; left: 60px; } #container:hover #disc { margin-left: 110px; transform: rotate(360deg); } #disc { position: absolute; height: 140px; width: 140px; z-index: -1; border-radius: 50%; background: transparent; margin: 20px; transition: .9s linear; box-shadow: 0 8px 6px -8px rgba(0,0,0,0.5), 0 0 1px 1px rgba(0,0,0,0.5), 0 0 0 1px #666 inset, 0 0 0 2px #222 inset, 0 30px 0px -29px #444 inset, 0 -30px 0px -29px #444 inset, 0 0 0 3px #333 inset, 0 0 0 4px #222 inset, 0 0 0 5px #333 inset, 0 33px 0px -27px #444 inset, 0 -33px 0px -27px #444 inset, 0 0 0 6px #222 inset, 0 0 0 7px #333 inset, 0 0 0 8px #222 inset, 0 34px 0px -25px #444 inset, 0 -34px 0px -25px #444 inset, 0 0 0 9px #333 inset, 0 0 0 10px #222 inset, 0 0 0 11px #333 inset, 0 35px 0px -23px #444 inset, 0 -35px 0px -23px #444 inset, 0 0 0 12px #222 inset, 0 0 0 13px #333 inset, 0 0 0 14px #222 inset, 0 36px 0px -21px #444 inset, 0 -36px 0px -21px #444 inset, 0 0 0 15px #333 inset, 0 0 0 16px #222 inset, 0 0 0 17px #333 inset, 0 37px 0px -19px #444 inset, 0 -37px 0px -19px #444 inset, 0 0 0 18px #222 inset, 0 0 0 19px #333 inset, 0 0 0 20px #222 inset, 0 38px 0px -17px #444 inset, 0 -38px 0px -17px #444 inset, 0 0 0 21px #333 inset, 0 0 0 22px #222 inset, 0 0 0 23px #333 inset, 0 39px 0px -15px #444 inset, 0 -39px 0px -15px #444 inset, 0 0 0 24px #222 inset, 0 0 0 25px #333 inset, 0 0 0 26px #222 inset, 0 40px 0px -13px #444 inset, 0 -40px 0px -13px #444 inset, 0 0 0 27px #333 inset, 0 0 0 28px #222 inset, 0 0 0 29px #333 inset, 0 41px 0px -11px #444 inset, 0 -41px 0px -11px #444 inset, 0 0 0 30px #222 inset, 0 0 0 43px #333 inset, 0 0 0 45px #AF2A10 inset, 0 0 0 47px #333 inset, 0 0 0 62px #AF2A10 inset, 0 0 10px 78px rgba(0,0,0,0.5) inset; }