Yazılım Panteri
Need help for component library with vue 3
Hello guys! I need some advices and help about my Project. I'm currently working on a aceternity ui and shadcn ui like component library for vue and nuxt 3. I have prepared some examples and skeleton about it but i feel something is missing but i don't know how to fix it. I'm not a 10 year experienced guy worked on a Google or apple so i need some guidance.
Here is a demo version of the Project
https://nuxt3-component-library.pages.dev/docs/components/3d-card
And of course github repo
https://github.com/safakdinc/nuxt3-component-library
If you are interested, feel free to contact via dm.
Important reminder! Since this is an independent project, I cannot give you earnings references or promises of success. we'll wait and see what happens
4 replies
Nuxt 3 CORS error
i send a get request to the server. payload is a youtube link. it can be any youtube video. ytdl-core recieve this link and find it's id. after that it's return a link like the first picture. you can use it in <audio src> element and play it freely. but when this code runs, source.value = ctx.createMediaElementSource(audio.value); i get error message. i don't know cors and nuxt 3 server very well and i need help
6 replies
Nuxt 3 CORS error
/server/api/audio_link.js
import ytdl from 'ytdl-core';
export default defineEventHandler(async event => {
const query = getQuery(event);
const videoUrl = query.url;
const videoId = ytdl.getURLVideoID(videoUrl);
const audioInfo = await ytdl.getInfo(videoId);
const audioFormat = ytdl.chooseFormat(audioInfo.formats, { quality: 'highestaudio' });
return {
data: audioFormat.url
};
});
6 replies
Nuxt 3 CORS error
AudioVisualizer.vue
<template>
<div class="w-full h-[50vh] flex justify-center items-center box">
<div class="w-full h-full relative transition-all duration-500 flex gap-1 items-end" ref="visualizer"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import '@/assets/visualizer.css';
const visualizer = ref(null);
const audio = ref(null);
const ctx = new window.AudioContext();
const analyser = ctx.createAnalyser();
const source = ref(null);
analyser.fftSize = 64;
const bufferLength = analyser.frequencyBinCount;
let dataArray = new Uint8Array(bufferLength);
const elements = ref([]);
onMounted(async () => {
audio.value = document.querySelector('audio');
audio.value.crossOrigin = 'anonymous';
source.value = ctx.createMediaElementSource(audio.value);
source.value.connect(analyser);
source.value.connect(ctx.destination);
});
onMounted(async () => {
for (let i = 0; i < bufferLength; i++) {
let element = document.createElement('div');
element.classList.add('element');
elements.value.push(element);
visualizer.value.appendChild(element);
}
update();
});
const clamp = (num, min, max) => {
if (num >= max) {
return max;
} else if (num <= min) {
return min;
} else {
return num;
}
};
const update = () => {
requestAnimationFrame(update);
analyser.getByteFrequencyData(dataArray);
for (let i = 0; i < bufferLength; i++) {
let item = dataArray[i];
item = item > 150 ? item : item * 1.5;
elements.value[i].style.height =
${item}px;
}
};
</script>6 replies