数据改变音频开启与关闭

最新推荐文章于 2025-04-03 11:20:18 发布

原创最新推荐文章于 2025-04-03 11:20:18 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #javascript #vue.js

vue 同时被 2 个专栏收录

30 篇文章

订阅专栏

27 篇文章

订阅专栏

这个博客展示了在 Vue.js 中如何实现音频播放的自动化控制。代码中定义了一个 `autoPlay` 方法用于播放音频，并在 `wsAdding` 和 `isAudio` 的变化时触发播放。同时，`closePlay` 方法用于暂停并清除音频。音频文件路径为 `click.mp3`，并且在组件挂载后尝试播放。博客还涉及到Vuex状态管理，监听 `wsAdding` 和 `isAudio` 状态来决定何时播放音频。

//audio

<template>
  <div style="position:absolute;z-index:1">
    <!-- {{ wsAdding }} -->
    <audio
      src="../../../public/static/click.mp3"
      id="myaudio"
      ref="fhshj"
      controls="controls"
      loop="false"
      hidden="true"
    ></audio>
      <!-- hidden="true" -->
    <!-- <input type="button" ref="fhshj" @click="autoPlay" value="播放" />
    <input type="button" @click="closePlay" value="关闭" /> -->
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } =
  createNamespacedHelpers("homedetail");
export default {
  data() {
    return{
      rootDom: null
    }
  },

  mounted(){
    // this.autoPlay()
    // this.$refs.fhshj.click()
  },

  methods: {
    autoPlay() {
      if(this.rootDom){
        this.rootDom.play();
        setTimeout(() => {
          this.closePlay();
        }, 300);
      }else{
          this.rootDom = document.getElementById("myaudio");
          console.log(this.rootDom,'this.rootDom99999999999999')
          this.rootDom.play();
          setTimeout(() => {
            this.closePlay();
          }, 300);
      }

    },
    closePlay() {
      this.rootDom = document.getElementById("myaudio");
      this.rootDom.pause();
      this.rootDom.load();
    },
  },

    computed: {
      ...mapState({
          wsAdding: (state) => state.wsAdding,
          isAudio: (state) => state.isAudio,
      })
    },
    watch:{
      wsAdding:{
        handler(newVal){
          console.log(newVal)
        //  this.$nextTick(() => {this.autoPlay()})
          this.autoPlay()
        },
        // immediate:true,
        // deep:true
      },
      isAudio:{
        handler(newVal){
          console.log(newVal,'newVal')
          this.autoPlay()
        }
      }
    }
};
</script>

<style>
</style>

//vuex


        isAudio:false

        set_isAudio(state,info){
            state.isAudio = !state.isAudio
        }

监听isaudio使音频播放

数据改变 音频开启与关闭

数据改变音频开启与关闭