vuejs3 - howlerjs multiplies sound channel when pause starting sounds - Stack Overflow

I have a problem with howler.js. I integrated the library into a vue3 component, nothing crazy. You leaf through a book and sounds are played depending on the page. This works partially.

the problem is that I fade out the sounds, then stop at the end and start another sound, this also works, but the sound channels accumulate, suddenly the third sound is played twice, the fourth four times... No idea why this happens.

Maybe it's because of the onend event which is triggered multiple times. But I assumed that stop sounds don't reach the end

<script>
import { useStore } from 'vuex';
import { onMounted, onUnmounted, ref } from 'vue';

import ButtonChevronLinks from "../components/BtnChevronLinks.vue";
import ButtonChevronRechts from "../components/BtnChevronRechts.vue";
import ButtonBack from "../components/BtnBack.vue";

import { Howl } from 'howler';
import { setTimeout } from 'core-js';

export default {
  name: 'BookView',

  components: {
    ButtonChevronLinks,
    ButtonChevronRechts,
    ButtonBack,
  },

  setup() {
    const store = useStore();
    const currSeite = ref(1);
    let oldMp3 = 0;
    let currMp3 = 0;
    const playlistUrls = ["/sounds/001.mp3", "/sounds/002.mp3", "/sounds/003.mp3", "/sounds/004.mp3"];
    const howlerBank = [];
    const maxVolume = 0.2;
   
    const onEnd = (e) => {
      howlerBank[currMp3].play();
    };
   
    onMounted(() => {
     playlistUrls.forEach(function(current, i) {
        howlerBank.push(new Howl({ src: [playlistUrls[i]], html5: true, preload: true, loaded: loaded, volume: maxVolume, autoplay: false, onend: onEnd, buffer: true }));
      });
    });
    
    onUnmounted(() => {
      howlerBank[oldMp3].stop();
      howlerBank[currMp3].stop();
    });

    const doLeft = (seite) => {
        oldMp3 = currMp3;
        currSeite.value--;
        fadeOut();
    };

    const doRight = (seite) => {
      console.log("doRight doit");
      oldMp3 = currMp3;
      currSeite.value++;
      fadeOut();
    };

    const fadeOut = () => {
      howlerBank[oldMp3].fade(howlerBank[oldMp3].volume(), 0, 1000);
      howlerBank[oldMp3].once('fade', () => { playNext(); });
    };

    const playNext = () => {

      howlerBank[oldMp3].stop();
      
      currMp3 = currSeite.value - 1;
      
      setTimeout(() => {
        console.log("playNext", currMp3);
        howlerBank[currMp3].volume(maxVolume);
        howlerBank[currMp3].play();
      }, 1000);
    };

    const doBook = () => {
      console.log("doBook");
      setTimeout(() => {
        howlerBank[0].play();
      }, 1000);
    };

    const doBack = () => {
      console.log("doBack");
      store.state.page = 1;
    };

    const getSeite = (mode) => {
      if (mode === "links") {
        return "./ladydyer/" + store.state.content.lady.seitenbase + '-a-' + currSeite.value + store.state.content.lady.filetype;
      } else {
        return "./ladydyer/" + store.state.content.lady.seitenbase + '-b-' + currSeite.value + store.state.content.lady.filetype;
      }
    };
    

    return {
      store,
      currSeite,

      doLeft,
      doRight,
      doBook,
      doBack,
      getSeite,
    };
  }

};

</script>