diff options
| -rw-r--r-- | index.html | 5 | ||||
| -rw-r--r-- | player.js | 64 |
2 files changed, 43 insertions, 26 deletions
@@ -7,6 +7,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Retrowave Player</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script> + <script src="https://unpkg.com/hydra-synth"></script> <link rel="stylesheet" href="hg.css"> <link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> @@ -48,9 +49,9 @@ </div> <div id="codef-canvas"></div> <input id="file-upload" type="file" accept="application/json" /> - <script src="libs/codef_core.js"></script> + <!-- <script src="libs/codef_core.js"></script> <script src="libs/codef_starfield.js"></script> - <script src="libs/codef_3d.js"></script> + <script src="libs/codef_3d.js"></script> --> <script src="player.js"></script> </body> @@ -52,9 +52,11 @@ } document.getElementById("initButton")?.addEventListener("click", () => { + var hydra = new Hydra({ detectAudio: false }) modalEl.classList.remove("open"); playMusic(); - initCodef(); + initHydra(); + // initCodef(); }); document.getElementById("history").addEventListener("click", () => { @@ -149,6 +151,7 @@ }); setVolume(); isPlaying = true; + window.hw = howlerInstance updateInfo(currentTrack); @@ -158,14 +161,14 @@ function volumeDown() { console.log(volume); - if(volume>0.1) { + if (volume > 0.1) { volume -= 0.1; } setVolume(); } function volumeUp() { - if(volume<1) { + if (volume < 1) { volume += 0.1; } setVolume(); @@ -206,11 +209,11 @@ function downloadHistory() { const historyArray = getHistory(); let element = document.createElement("a"); - let playListData = '#EXTM3U'; + let playListData = '#EXTM3U'; historyArray.forEach((musicData) => { playListData = `${playListData} -#EXTINF:${Math.ceil(musicData.duration/1000)}, ${musicData.title} +#EXTINF:${Math.ceil(musicData.duration / 1000)}, ${musicData.title} https://retrowave.ru/${musicData.streamUrl} `; }); @@ -230,24 +233,37 @@ https://retrowave.ru/${musicData.streamUrl} document.body.removeChild(element); } - function initCodef() { - const width = window.innerWidth; - const height = window.innerHeight; - effectCanvas = new canvas(width, height, 'codef-canvas'); - starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0); - line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 ); - line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2})); - line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2})); - renderCodeFx(); - } - - function renderCodeFx() { - effectCanvas.fill('#000000'); - line3D.group.rotation.x+=0.01; - line3D.group.rotation.y+=0.02; - line3D.group.rotation.z+=0.04; - starField.draw(); - line3D.draw(); - requestAnimationFrame(renderCodeFx); + // function initCodef() { + // const width = window.innerWidth; + // const height = window.innerHeight; + // effectCanvas = new canvas(width, height, 'codef-canvas'); + // starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0); + // line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 ); + // line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2})); + // line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2})); + // renderCodeFx(); + // } + + // function renderCodeFx() { + // effectCanvas.fill('#000000'); + // line3D.group.rotation.x+=0.01; + // line3D.group.rotation.y+=0.02; + // line3D.group.rotation.z+=0.04; + // starField.draw(); + // line3D.draw(); + // requestAnimationFrame(renderCodeFx); + // } + + function initHydra() { + // voronoi(350, 0.15) + // .modulateScale(osc(8).rotate(Math.sin(time)), .5) + // .thresh(.8) + // .modulateRotate(osc(7), .4) + // .thresh(.7) + // .diff(src(o0).scale(1.8)) + // .modulateScale(osc(2).modulateRotate(o0, .74)) + // .diff(src(o0).rotate([-.012, .01, -.002, 0]).scrollY(0, [-1 / 199800, 0].fast(0.7))) + // .brightness([-.02, -.17].smooth().fast(.5)).modulate(o0, () => a.fft[1] * .2) + // .out() } })(); |