Попытка затухания / затухания html5 аудиофайл vuejs / vanilla js - PullRequest
Новая
       19

Попытка затухания / затухания html5 аудиофайл vuejs / vanilla js

1 голос
/ 11 июля 2020

Цель:

  • Звук появляется и исчезает при первом переключении воспроизведения / паузы, необходимо, чтобы он постоянно переключал звук

Проблема

  • Повторное переключение звуковых прерываний и пропусков

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

Ответы [ 2 ]

1 голос
/ 12 июля 2020

Мне удалось заставить его работать:

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;
    }
  },
}
0 голосов
/ 12 июля 2020

Затухание и нарастание являются звуковыми эффектами и должны быть реализованы с помощью звукового инструмента непосредственно в аудиофайле. ffmpeg очень базовый c (и бесплатный). Клиентская часть уровней громкости сценариев полна проблем, особенно с мобильных устройств. Есть проблемы с пользовательским интерфейсом. Автоматизация громкости (и даже автоматизация c запуска) не будет работать единообразно для разных типов устройств и браузеров.

...