循环功能有效,但当我播放与数组不同的曲目时出现问题

问题描述 投票:0回答:0

我在脚本设置中有这个函数和观察者,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);
            }
        }
        );
arrays loops vuejs3 watch audio-player
© www.soinside.com 2019 - 2024. All rights reserved.