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

目标：

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

问题

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

HTML

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;
      }
    },
  }

方法：{
切换声音（）{
让backgroundAudio=这个。$refs.audio；
//淡入
如果(
！document.querySelector（“.toggle sound”）.classList.contains（“暂停”）
) {
控制台日志（“淡入”）；
设actualVolumeFadeIn=0；
document.querySelector（“.toggle sound”）.classList.add（“暂停”）；
净空间隔（fadeInInterval）；
设fadeInInterval=setInterval（函数（）{
actualVolumeFadeIn=（parseFloat（actualVolumeFadeIn）+0.1）。toFixed(
1.
);
如果（实际音量FADEIN=0）{
backgroundAudio.volume=实际音量衰减；
}否则{
document.querySelector（“.toggle sound”）.classList.remove（“暂停”）；
backgroundAudio.pause（）；
}
}, 100);
返回false；
}
},
}

淡入淡出是音频效果，应使用音频工具直接在音频文件上实现。非常基本（而且是免费的）。编写卷级别脚本客户端充满了挑战，尤其是考虑到移动设备。存在用户界面问题。自动卷（甚至自动启动）在不同的设备类型或浏览器类型中无法始终工作。

我设法使其工作：

HTML

JS

数据：（）=>({
...
声明：{
背景音频状态：“暂停”，
},
}),
方法：{
切换声音（）{
让backgroundAudio=这个。$refs.audio；
让actualVolumeFadeOut=backgroundAudio.volume；
设actualVolumeFadeIn=0；
//淡入
如果（this.state.backgroundAudioState==“暂停”）{
控制台日志（“淡入”）；
this.state.backgroundAudioState=“播放”；
净空间隔（fadeInInterval）；
设fadeInInterval=setInterval（函数（）{
actualVolumeFadeIn=（parseFloat（actualVolumeFadeIn）+0.1）；
如果（实际音量FADEIN=0）{
backgroundAudio.volume=实际音量衰减；
}否则{
backgroundAudio.pause（）；
清除间隔（衰减神经）；
}
}, 100);
返回false；
}
},
}

我认为您不能在匿名函数声明中引用clearInterval的间隔，所以当它“暂停”时，您将间隔从1到0，然后将其设置为未暂停，而当它未暂停时，您将间隔从0到1，并将其设置为暂停？不应该是另一种方式吗？您应该从音频元素获取当前音量，而不是在代码中使用范围外的actualVolume。这超出了您为间隔声明的匿名函数的范围。感谢mate指出这些事情-我已经用您的反馈更新了我的代码，并在第一次切换时淡入淡出。我的下一个问题是第二个按钮切换音频正在剪切/跳过

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;
      }
    },
  }

<audio
  ref="audio"
  src="@/assets/audio/bg-music.ogg"
  preload
  loop
  id="audio"
  muted
></audio>
<div
  @click="toggleSound()"
  class="toggle-sound"
  v-bind:class="this.state.backgroundAudioState"
></div>

data: () => ({
  ...
  state: {
    backgroundAudioState: "paused",
  },
}),
methods: {
  toggleSound() {
    let backgroundAudio = this.$refs.audio;
    let actualVolumeFadeOut = backgroundAudio.volume;
    let actualVolumeFadeIn = 0;

    //Fade In
    if (this.state.backgroundAudioState === "paused") {
      console.log("fading in");
      this.state.backgroundAudioState = "playing";
      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 (this.state.backgroundAudioState === "playing") {
      console.log("fading out");
      this.state.backgroundAudioState = "paused";
      
      let fadeOutInterval = setInterval(function() {
        actualVolumeFadeOut = (parseFloat(actualVolumeFadeOut) - 0.1).toFixed(1);
        if (actualVolumeFadeOut >= 0) {
          backgroundAudio.volume = actualVolumeFadeOut;
        } else {
          backgroundAudio.pause();
          clearInterval(fadeOutInterval);
        }
      }, 100);
      return false;
    }
  },
}