audio的播放没有声音的问题

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

语音描述

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 = `

})

}

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

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

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

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

playAudio() {

this.$refs.audio.load()

this.$refs.audio.play()

document.querySelector(".voice-icon").style.animationPlayState = "running"

}

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

浏览器自动播放问题记录

在data中定义播放路径：

audioSrc: "/audio/9779.mp3",

getMp3() {

this.$refs.audio.src = this.audioSrc

this.$refs.audio.play()

},