Vue框架下点击按钮onClick切换audio音频源运行无效果求助

问题原因 #

• 拼写错误：crossOrigin的属性值拼写错误，正确应为anonymous，你写的anonymus少了一个字母o，会导致跨域配置不生效，跨域音频无法正常加载播放
• 操作逻辑冲突：你同时给audio标签绑定了响应式属性:src="audioSrc"，又直接通过$refs操作DOM修改src，Vue的响应式更新逻辑会覆盖你手动修改的DOM属性，导致配置不生效
• 路径解析问题：Vue项目中assets目录下的资源属于编译时处理的资源，直接写相对路径../assets/voice.mp3打包后路径会失效，需要用require引入资源
• 自动播放异常未处理：现代浏览器默认禁止非用户交互触发的音频自动播放，即使是点击事件触发的play()也可能因为音频加载慢、资源无效等问题抛出异常，需要做异常捕获

修正后代码 #

JS部分

data() {
    return {
      audioSrc: ''
    }
  },
  methods: {
    setActiveAudio(item) {
      // 修改响应式变量，由Vue统一更新audio的src属性
      this.audioSrc = item;
      // 等待DOM更新完成后再操作音频
      this.$nextTick(() => {
        const audio = this.$refs.audioElm;
        audio.crossOrigin = 'anonymous';
        audio.currentTime = 0;
        // 捕获播放异常
        audio.play().catch(err => {
          console.log('音频播放失败：', err);
        });
      })
    },
  },

模板部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- assets下的音频资源用require包裹，确保打包后路径正确 -->
<span class="voice-btn" @click="setActiveAudio(require('../assets/voice.mp3'))"> Click Sound</span>
<audio ref="audioElm" :src="audioSrc"></audio>

内容的提问来源于stack exchange，提问作者Mustafa Özgün