尝试 fadein/fadeout html5 音频文件 vuejs / vanilla js

Question

目标：

音频在第一个 play/pause 切换时淡入淡出，需要让它连续切换声音

问题

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

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

淡入淡出是音频效果，应使用音频工具直接在音频文件上实现。 ffmpeg 非常基础（而且免费）。脚本音量级别客户端充满挑战，尤其是考虑到移动设备。存在用户界面问题。自动音量（甚至自动启动）不会跨设备类型或浏览器类型一致地工作。

Answer 2

我设法让它工作了：

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

尝试 fadein/fadeout html5 音频文件 vuejs / vanilla js

Trying to fadein/fadeout html5 audio file vuejs / vanilla js

javascript

html5-audio

vue.js