我在脚本设置中有这个函数和观察者,isRepeatOn 变量最初设置为 false。
const loopCurrentTrack = () => {
isRepeatOn.value = !isRepeatOn.value;
if (isRepeatOn.value) {
audio.value.addEventListener("ended", function () {
audio.value.currentTime = 0;
audio.value.play();
});
} else {
audio.value.removeEventListener("ended", null);
}
}
watch(
() => isTrackTimeCurrent.value,
(time) => {
if (time === isTrackTimeTotal.value && !isRepeatOn.value) {
useSong.nextSong(currentTrack.value);
}
}
);
这是重复按钮:
<div class="p-2 ml-2 hover:bg-[#5a5a5a] text-white hover:text-[#2b9ceb] hover:bg-opacity-50
rounded-full cursor-pointer" @click="loopCurrentTrack">
<Repeat class="block" :fillColor="isRepeatOn ? '#2b9ceb' : undefined" :size="17"/>
</div>
该功能的工作原理是打开和关闭循环,当为真时将重复曲目,如果为假则让曲目播放下一首曲目。但是,如果我单击播放数组中的另一首歌曲,isRepeatOn 仍设置为 true,然后 currentTrack,因为它不同,不会重复,而且在完成后也不会继续播放下一首曲目。我怎样才能解决这个问题?我想我需要设置观察者或函数来在轨道与 currentTrack 不匹配时将 isRepeatOn 更改为 false?但我不确定这是否正确,甚至不确定该怎么做。
更新:
这里是没有导入的完整脚本设置。该代码用于音乐播放器,它在触发包含播放功能的 songRow 组件时从数组接收音频。
const useSong = useSongStore()
const { isPlaying, audio, currentTrack, trackTime, isTrackTimeTotal, currentVolume} = storeToRefs(useSong)
let isHover = ref(false)
let isVolumeHover = ref(false)
let isVersionsHover = ref(false)
let isTrackTimeCurrent = ref('0:00')
let seeker = ref(null)
let seekerContainer = ref(null)
let range = ref(0)
let isRepeatOn = ref(false)
onMounted(() => {
if (audio.value) {
setTimeout(() => {
const duration = audio.value.duration;
const minutes = Math.floor(duration / 60);
const seconds = Math.floor(duration % 60);
isTrackTimeTotal.value = minutes+':'+seconds.toString().padStart(2, '0')
timeupdate()
loadmetadata()
}, 300)
}
if (currentTrack.value) {
seeker.value.addEventListener("change", function () {
const time = audio.value.duration * (seeker.value.value / 100);
audio.value.currentTime = time;
});
seeker.value.addEventListener("mousedown", function () {
audio.value.pause();
isPlaying.value = false
});
seeker.value.addEventListener("mouseup", function () {
audio.value.play();
isPlaying.value = true
});
seekerContainer.value.addEventListener("click", function (e) {
const clickPosition = (e.pageX - seekerContainer.value.offsetLeft) / seekerContainer.value.offsetWidth;
const time = audio.value.duration * clickPosition;
audio.value.currentTime = time;
seeker.value.value = (100 / audio.value.duration) * audio.value.currentTime;
});
}
})
const timeupdate = () => {
audio.value.addEventListener("timeupdate", function () {
var minutes = Math.floor(audio.value.currentTime / 60);
var seconds = Math.floor(audio.value.currentTime - minutes * 60);
isTrackTimeCurrent.value = minutes+':'+seconds.toString().padStart(2, '0')
trackTime.value = isTrackTimeCurrent.value
const value = (100 / audio.value.duration) * audio.value.currentTime;
range.value = value
seeker.value.value = value;
});
}
const loadmetadata = () => {
audio.value.addEventListener('loadedmetadata', function() {
const duration = audio.value.duration;
const minutes = Math.floor(duration / 60);
const seconds = Math.floor(duration % 60);
isTrackTimeTotal.value = minutes+':'+seconds.toString().padStart(2, '0')
});
}
const loopCurrentTrack = () => {
isRepeatOn.value = !isRepeatOn.value;
if (isRepeatOn.value) {
audio.value.addEventListener("ended", function () {
audio.value.currentTime = 0;
audio.value.play();
});
} else {
audio.value.removeEventListener("ended", null);
}
}
watch(() => audio.value, () => {
timeupdate()
loadmetadata()
})
watch(
() => isTrackTimeCurrent.value,
(time) => {
if (time === isTrackTimeTotal.value && !isRepeatOn.value) {
useSong.nextSong(currentTrack.value);
}
}
);