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"

描述：

在 playAudio 中打印出来的链接也是可以正常访问的
把链接填到 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 的知识

在这里插入图片描述

audio的播放没有声音的问题

猜你喜欢