尝试淡入/淡出 html5 音频文件 vuejs / vanilla js

Question

目标：

音频在第一次播放/暂停切换时淡入淡出，需要让它不断切换声音

问题

第二次切换音频剪切和跳过

HTML

<div class="music-player">

    <audio

      ref="audio"

      src="@/assets/audio/bg-music.ogg"

      preload

      loop

      id="audio"

      muted

    ></audio>

    <div @click="toggleSound()" class="toggle-sound"></div>

</div>

JS -更新

methods: {

  toggleSound() {

    let backgroundAudio = this.$refs.audio;

    //Fade In

    if (

      !document.querySelector(".toggle-sound").classList.contains("paused")

    ) {

      console.log("fading in");

      let actualVolumeFadeIn = 0;

      document.querySelector(".toggle-sound").classList.add("paused");

      clearInterval(fadeInInterval);

      let fadeInInterval = setInterval(function() {

        actualVolumeFadeIn = (parseFloat(actualVolumeFadeIn) + 0.1).toFixed(

        1

      );

        if (actualVolumeFadeIn <= 1) {

          backgroundAudio.volume = actualVolumeFadeIn;

        } else {

          backgroundAudio.play();

        }

      }, 100);

      return false;

    }

    //Fade Out

    if (

      document.querySelector(".toggle-sound").classList.contains("paused")

    ) {

      console.log("fading out");

      let actualVolumeFadeOut = backgroundAudio.volume;

      clearInterval(fadeOutInterval);

      let fadeOutInterval = setInterval(function() {

      actualVolumeFadeOut = (parseFloat(actualVolumeFadeOut) - 0.1).toFixed(

        1

      );

        if (actualVolumeFadeOut >= 0) {

          backgroundAudio.volume = actualVolumeFadeOut;

        } else {

          document.querySelector(".toggle-sound").classList.remove("paused");

          backgroundAudio.pause();

        }

        }, 100);

        return false;

      }

    },

  }

Answer 1

我设法让它工作：HTML<audio&nbsp; ref="audio"&nbsp; src="@/assets/audio/bg-music.ogg"&nbsp; preload&nbsp; loop&nbsp; id="audio"&nbsp; muted></audio><div&nbsp; @click="toggleSound()"&nbsp; class="toggle-sound"&nbsp; v-bind:class="this.state.backgroundAudioState"></div>JSdata: () => ({&nbsp; ...&nbsp; state: {&nbsp; &nbsp; backgroundAudioState: "paused",&nbsp; },}),methods: {&nbsp; toggleSound() {&nbsp; &nbsp; let backgroundAudio = this.$refs.audio;&nbsp; &nbsp; let actualVolumeFadeOut = backgroundAudio.volume;&nbsp; &nbsp; let actualVolumeFadeIn = 0;&nbsp; &nbsp; //Fade In&nbsp; &nbsp; if (this.state.backgroundAudioState === "paused") {&nbsp; &nbsp; &nbsp; console.log("fading in");&nbsp; &nbsp; &nbsp; this.state.backgroundAudioState = "playing";&nbsp; &nbsp; &nbsp; clearInterval(fadeInInterval);&nbsp; &nbsp; &nbsp; let fadeInInterval = setInterval(function() {&nbsp; &nbsp; &nbsp; &nbsp; actualVolumeFadeIn = (parseFloat(actualVolumeFadeIn) + 0.1).toFixed(1);&nbsp; &nbsp; &nbsp; &nbsp; if (actualVolumeFadeIn <= 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundAudio.volume = actualVolumeFadeIn;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundAudio.play();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }, 100);&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; //Fade Out&nbsp; &nbsp; if (this.state.backgroundAudioState === "playing") {&nbsp; &nbsp; &nbsp; console.log("fading out");&nbsp; &nbsp; &nbsp; this.state.backgroundAudioState = "paused";&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; let fadeOutInterval = setInterval(function() {&nbsp; &nbsp; &nbsp; &nbsp; actualVolumeFadeOut = (parseFloat(actualVolumeFadeOut) - 0.1).toFixed(1);&nbsp; &nbsp; &nbsp; &nbsp; if (actualVolumeFadeOut >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundAudio.volume = actualVolumeFadeOut;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundAudio.pause();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(fadeOutInterval);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }, 100);&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; },}