Vue 3 Audio Visualizer не работает | Нет ошибок в консоли, звук не играет, холста не обновляется ⇐ Javascript

[Anonymous]

Я строю аудио визуализатор в Vue 3 , используя API Web Audio . Моя настройка использует Pinia для государственного управления. Каждый трек представляет собой объект с свойством аудио (созданного через новый Audio (...) ). Визуализатор - это отдельный компонент (Visualizer.vue< /code>), который подключается к аудиоэлементу текущего трека и опирается на < /p> < /p>
Проблемы: < /p>

Аудио не играет, когда я нажимаю воспроизведение. Правильно. https://github.com/kubakorniluk/audio-v ... erобразное. Ожидается. NextTrack () и prevtrack () из кнопок в компоненте игрока.tracks.js):
const tracks = ref([])
const currentTrack = ref(null)

...

const setTracks = async () => {
const files = import.meta.glob('@/assets/audio/*.wav');

for (const path in files) {
const fileModule = await files[path]();

const audio = new Audio(fileModule.default)

const track = {
id: tracks.value.length,
name: path.split('/').pop(),
src: fileModule.default,
audio: audio,
isPlaying: false,
volume: 1.0,
currentTime: {
total: 0,
minutes: 0,
seconds: 0
},
duration: {
total: 0,
minutes: 0,
seconds: 0
},
}

tracks.value.push(track);

console.log(`Loaded: ${track.name}`, track);

}

currentTrack.value = tracks.value[0];

}

const setCurrentTrack = (id) => {
tracks.value.forEach(track => {
if (track.id === id) {
track.isPlaying = !track.isPlaying;
} else {
track.isPlaying = false;
}
})
currentTrack.value = tracks.value.find(track => track.id === id);
}

const togglePlay = (id) => {
const track = tracks.value.find(t => t.id === id);
if (!track) return;

// If the clicked track is already playing, pause it
if (track.isPlaying) {
track.audio.pause();
track.isPlaying = false;
} else {
// Pause all other tracks
tracks.value.forEach(t => {
if (t.id !== id) {
t.audio.pause();
t.isPlaying = false;
}
});
// Play the selected track
track.audio.play();
track.isPlaying = true;
currentTrack.value = track;
}
};
< /code>
Next & Prev -Functs: < /p>
const nextTrack = () => {
let id = currentTrack.value.id + 1;
if (id >= tracks.value.length) {
id = 0;
}
setCurrentTrack(id);
console.log(currentTrack.value.id)
togglePlay(id);
}
const prevTrack = () => {
let id = currentTrack.value.id - 1;
if (id < 0) {
id = tracks.value.length - 1;
}
setCurrentTrack(id);
console.log(currentTrack.value.id)
togglePlay(id);
}

Часть 2 - Visualizer & Progress Bar
The Progress Bar in player.vue не обновляется по мере воспроизведения звука, даже если текущее время магазина и обновления в консоли. Визуализатор в Visualizer.vue (с использованием API веб -аудио и ) не оживляет и не показывает каких -либо полос, даже когда звук воспроизводится.
Что я проверил:

hore's CurrentTime и Duration Обновление объектов. /> Вычисленное значение строительства строительства в консоли, но UI
не обновляет.

...

const progress = computed(() => {
const track = store.getCurrentTrack;
if (track && track.duration.total > 0) {
return (track.currentTime.total / track.duration.total) * 100;
}
return 0;
});











{{ time }}









{{ checkDuration() }}




< /code>
tracks.js:
const setTracks = async () => {
...

//update track duration
audio.addEventListener("loadedmetadata", (event) => {
let duration = audio.duration;
let minutes = Math.floor(duration / 60);
let seconds = Math.floor(duration % 60);
track.duration.total = duration;
track.duration.seconds = seconds;
track.duration.minutes = minutes;
});

// update track position
audio.addEventListener("timeupdate", (event) => {
let time = audio.currentTime;
let minutes = Math.floor(time / 60);
let seconds = Math.floor(time % 60);
track.currentTime.total = time;
track.currentTime.seconds = seconds;
track.currentTime.minutes = minutes;
});
audio.load();

// Check if metadata is already loaded
if (audio.readyState >= 1) {
let duration = audio.duration;
let minutes = Math.floor(duration / 60);
let seconds = Math.floor(duration % 60);
track.duration.seconds = seconds;
track.duration.minutes = minutes;
}

tracks.value.push(track);

console.log(`Loaded: ${track.name}`, track);

}

currentTrack.value = tracks.value[0];

}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ot-playing