indrajith/retrowave-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove Codef

Browse Source 
Adds Hydra Vis
Expose Howler
This commit is contained in:
Indrajith K L
2024-04-06 04:31:08 +05:30
parent bd01be7001
commit 1f931bfb1f
2 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retrowave Player</title> <title>Retrowave Player</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script> <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="stylesheet" href="hg.css">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
@@ -48,9 +49,9 @@
</div> </div>
<div id="codef-canvas"></div> <div id="codef-canvas"></div>
<input id="file-upload" type="file" accept="application/json" /> <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_starfield.js"></script>
<script src="libs/codef_3d.js"></script> <script src="libs/codef_3d.js"></script> -->
<script src="player.js"></script> <script src="player.js"></script>
</body> </body>

60
player.js
View File

@@ -52,9 +52,11 @@
} }
document.getElementById("initButton")?.addEventListener("click", () => { document.getElementById("initButton")?.addEventListener("click", () => {
var hydra = new Hydra({ detectAudio: false })
modalEl.classList.remove("open"); modalEl.classList.remove("open");
playMusic(); playMusic();
initCodef(); initHydra();
// initCodef();
}); });
document.getElementById("history").addEventListener("click", () => { document.getElementById("history").addEventListener("click", () => {
@@ -149,6 +151,7 @@
}); });
setVolume(); setVolume();
isPlaying = true; isPlaying = true;
window.hw = howlerInstance
updateInfo(currentTrack); updateInfo(currentTrack);
@@ -158,14 +161,14 @@
function volumeDown() { function volumeDown() {
console.log(volume); console.log(volume);
if(volume>0.1) { if (volume > 0.1) {
volume -= 0.1; volume -= 0.1;
} }
setVolume(); setVolume();
} }
function volumeUp() { function volumeUp() {
if(volume<1) { if (volume < 1) {
volume += 0.1; volume += 0.1;
} }
setVolume(); setVolume();
@@ -210,7 +213,7 @@
historyArray.forEach((musicData) => { historyArray.forEach((musicData) => {
playListData = `${playListData} playListData = `${playListData}
#EXTINF:${Math.ceil(musicData.duration/1000)}, ${musicData.title} #EXTINF:${Math.ceil(musicData.duration / 1000)}, ${musicData.title}
https://retrowave.ru/${musicData.streamUrl} https://retrowave.ru/${musicData.streamUrl}
`; `;
}); });
@@ -230,24 +233,37 @@ https://retrowave.ru/${musicData.streamUrl}
document.body.removeChild(element); document.body.removeChild(element);
} }
function initCodef() { // function initCodef() {
const width = window.innerWidth; // const width = window.innerWidth;
const height = window.innerHeight; // const height = window.innerHeight;
effectCanvas = new canvas(width, height, 'codef-canvas'); // effectCanvas = new canvas(width, height, 'codef-canvas');
starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0); // 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 = 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:-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})); // line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
renderCodeFx(); // renderCodeFx();
} // }
function renderCodeFx() { // function renderCodeFx() {
effectCanvas.fill('#000000'); // effectCanvas.fill('#000000');
line3D.group.rotation.x+=0.01; // line3D.group.rotation.x+=0.01;
line3D.group.rotation.y+=0.02; // line3D.group.rotation.y+=0.02;
line3D.group.rotation.z+=0.04; // line3D.group.rotation.z+=0.04;
starField.draw(); // starField.draw();
line3D.draw(); // line3D.draw();
requestAnimationFrame(renderCodeFx); // 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()
} }
})(); })();