前端提示音在Vue里怎么播放才不被浏览器拦截？

这个问题是因为浏览器的安全策略，只有用户与页面有交互后才能自动播放音频。解决办法是在用户交互的时候先播放一个无声的音频，这样之后就能自动播放有声音频了。代码如下：

import { onMounted } from 'vue';



const playSilentSound = () => {

  const silentAudio = new Audio('/silent.mp3'); // 确保这个文件存在并且很小

  silentAudio.play().catch(error => {

    console.error('Failed to play silent sound:', error);

  });

};



const playSound = () => {

  const audio = new Audio('/notice.mp3');

  audio.play().catch(error => {

    console.error('Failed to play sound:', error);

  });

};



onMounted(() => {

  playSilentSound(); // 在页面加载时先播放无声音频

});



// 当接收到 WebSocket 消息时直接调用 playSound

记得 silent.mp3 这个文件得是真的无声，否则可能也会被拦截。

我之前踩过这个坑，这事儿挺烦的。浏览器为了防止滥用自动播放功能，会限制非用户交互触发的音频播放。你手动点击按钮能播放是因为有用户交互，但 WebSocket 消息触发的播放就不行了。

解决这个问题的一个常见方法是先让用户交互一下页面，比如点击一个按钮，然后在那个交互事件里初始化音频上下文。之后再通过 WebSocket 消息播放声音就不会被阻止了。

你可以试试下面这个方法：

<template>

  <button @click="initAudioContext">初始化音频</button>

  <button @click="playSound">测试播放</button>

</template>



<script setup>

import { ref } from 'vue';



let audioContextInitialized = ref(false);



const initAudioContext = () => {

  const audio = new Audio('/notice.mp3');

  audio.play().then(() => {

    audioContextInitialized.value = true;

  }).catch(error => {

    console.error('音频初始化失败', error);

  });

};



const playSound = () => {

  if (audioContextInitialized.value) {

    const audio = new Audio('/notice.mp3');

    audio.play().catch(error => {

      console.error('播放失败', error);

    });

  } else {

    console.warn('音频上下文未初始化');

  }

};



// 假设这是你处理 WebSocket 消息的地方

const handleWebSocketMessage = () => {

  if (audioContextInitialized.value) {

    playSound();

  }

};

</script>

这个例子加了一个初始化音频的按钮。用户点了之后会尝试播放一次音频，成功后设置一个标志表示音频上下文已经初始化。之后无论是手动点击播放还是通过 WebSocket 消息触发，都能正常播放了。

记得在实际项目中，用户体验要考虑到，不能频繁要求用户去点击初始化按钮。有时候可能需要结合具体的业务场景来设计更好的解决方案。希望这个能帮到你。