如何在Vue.js中实现类TikTok视频流的带声音自动播放？

核心思路 #

利用浏览器的交互权限规则：只要用户在页面完成一次主动交互（比如点击按钮），后续同域内的媒体元素就能突破静音限制自动播放音频。我们只需要做一个全局的「声音开关」，用户点击一次后，所有视频的音频状态就能统一控制，不用逐个操作每个视频。

Vue 具体实现步骤 #

• 全局音频状态管理：用Vue的响应式变量（组件内ref或是全局状态管理如Pinia/Vuex）记录当前音频是否开启：

  // 示例：在Pinia store中定义全局状态
  import { defineStore } from 'pinia';
  
  export const useAudioStore = defineStore('audio', () => {
    const isAudioEnabled = ref(false);
  
    const toggleAudio = () => {
      isAudioEnabled.value = !isAudioEnabled.value;
    };
  
    return { isAudioEnabled, toggleAudio };
  });
  

• 全局声音控制按钮：在页面固定位置（比如顶部导航）放置一个按钮，用户点击时触发交互并切换全局音频状态：

  <template>
    <div class="audio-control">
      <button @click="handleToggleAudio">
        {{ audioStore.isAudioEnabled ? '🔊 关闭声音' : '🔇 开启声音' }}
      </button>
    </div>
  </template>
  
  <script setup>
  import { useAudioStore } from '@/stores/audio';
  
  const audioStore = useAudioStore();
  
  const handleToggleAudio = () => {
    audioStore.toggleAudio();
    // 立即同步所有已加载视频的静音状态
    document.querySelectorAll('video').forEach(video => {
      video.muted = !audioStore.isAudioEnabled;
      // 如果视频正在播放，重新触发播放确保音频生效
      if (!video.paused) {
        video.play().catch(err => console.error(err));
      }
    });
  };
  </script>
  

• 单个视频组件适配：每个视频组件挂载或进入视口时，自动同步全局音频状态，同时处理自动播放逻辑：

  <template>
    <video
      ref="videoRef"
      :src="videoSrc"
      :muted="!audioStore.isAudioEnabled"
      playsinline
      preload="auto"
    />
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue';
  import { useAudioStore } from '@/stores/audio';
  
  const audioStore = useAudioStore();
  const videoRef = ref(null);
  const videoSrc = defineProps(['videoSrc']);
  
  onMounted(() => {
    // 用IntersectionObserver控制仅播放视口内的视频
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          videoRef.value.play().catch(err => console.error(err));
        } else {
          videoRef.value.pause();
        }
      });
    });
    observer.observe(videoRef.value);
  });
  
  // 监听全局音频状态变化，实时更新当前视频的静音设置
  watch(() => audioStore.isAudioEnabled, (newStatus) => {
    if (videoRef.value) {
      videoRef.value.muted = !newStatus;
    }
  });
  </script>
  

• 额外优化点：

  • 用localStorage保存用户的音频偏好，页面刷新后自动恢复之前的设置：

    // 在Pinia store初始化时读取
    const isAudioEnabled = ref(localStorage.getItem('audioEnabled') === 'true');
    
    // 状态变化时保存
    watch(isAudioEnabled, (newVal) => {
      localStorage.setItem('audioEnabled', newVal.toString());
    });
    

  • 限制同一时间只有一个视频播放，避免音频混乱：在IntersectionObserver触发播放时，暂停其他所有视频。

内容的提问来源于stack exchange，提问作者yoloy