尝试使用fadein/fadeout 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>

更新的

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
  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>

JS

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

Answer 2

渐变是音频效果，应该直接在音频文件上使用音频工具实现。ffmpeg是非常基本的(免费的)。考虑到移动设备，脚本卷级别客户端充满了挑战。存在用户界面问题。自动化卷(甚至自动启动)不会在设备类型或浏览器类型之间一致工作。