亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

嘗試淡入/淡出 html5 音頻文件 vuejs / vanilla js

嘗試淡入/淡出 html5 音頻文件 vuejs / vanilla js

縹緲止盈 2022-11-11 15:03:04
目標:音頻在第一次播放/暫停切換時淡入淡出,需要讓它不斷切換聲音問題第二次切換音頻剪切和跳過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;      }    },  }
查看完整描述

1 回答

?
qq_花開花謝_0

TA貢獻1835條經驗 獲得超7個贊

我設法讓它工作:


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;

    }

  },

}


查看完整回答
反對 回復 2022-11-11
  • 1 回答
  • 0 關注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號