audio的播放没有声音的问题

今天遇到一个audio 播放没有声音，让我们来看一下代码：

 <audio id="audio" ref="audio">
      <source :src="voice.url" />
</audio>

<p class="el-display">
	<span class="el-display__title">语音描述</span>
	 <span class="el-display__content">
	     <template v-if="detail.dangerDescVoiceUrl == null || detail.dangerDescVoiceUrl == ''">
	         <span> -- </span>
	     </template>
	     <template v-else>
	         <span class="voice" @click="playAudio">
	             <img src="~/assets/images/inspection/voice.png" class="voice-icon" />
	             <span>{{ voice.duration }}s</span>
	         </span>
	     </template>
	 </span>
	</p>
	
pageData() {    
    this.$axios.get(`${API_....}/${this.$route.query.id}`).then(res => {
	   ...
	   this.voice.url = res.data.detail.dangerDescVoiceUrl
}

playAudio() {
	  console.log(this.$refs.audio)
      this.$refs.audio.play()
      document.querySelector(".voice-icon").style.animationPlayState = "running"

描述：

1. 在 playAudio 中打印出来的链接也是可以正常访问的
2. 把链接填到 source src="....." 中可以正常播放

一热心小伙说，“呀，我之前也遇到过，你这样，在方法里面写…”
让我们来看一下他说的写法

pageData() {    
    this.$axios.get(`${API_....}/${this.$route.query.id}`).then(res => {
	   ...
	   this.voice.url = res.data.detail.dangerDescVoiceUrl
	    this.audioContent = `
	    <div>
            <audio id="audio" ref="audio" @οnlοad="loadAudio" controls>
                <source src="${this.voice.url}" />
            </audio>
        </div>`
       })
}

然后拼接到上面去，来有没有知道这样写的问题：

另一个大佬说：这样写会在audioContent 插入到html中去 也不是dom，在playAudio中的 ref 会无效。只会当dom去处理

然后一语点拨了我，它有onload的事件吗？能触发吗？

触发这个词立马给我当头一棒，简简单单一句能解决的，原谅我是个憨憨…

playAudio() {
	  this.$refs.audio.load()
      this.$refs.audio.play()
      document.querySelector(".voice-icon").style.animationPlayState = "running"
}

---

原谅我是个菜鸡小白，暂时记录一下，接下来补充关于 audio 的知识

浏览器自动播放问题记录

<template>
     <audio ref="audio" loop />
 </template>       

在data中定义播放路径：

   audioSrc: "/audio/9779.mp3",

getMp3() {
    this.$refs.audio.src = this.audioSrc
    this.$refs.audio.play()
},