Add audio tag in Vue to realize the call of sound file.

ask a question.

problem description

how to access vue

the environmental background of the problems and what methods you have tried

call an audio file in vue. According to the online practice,
https://blog.csdn.net/woyidin.
is always unsuccessful. Attempted to modify transformToRequire: {

"audio": "src"

}, modified transformToRequire: {

audio: "src"

}, still not working. In addition, there is already transformToRequire: {

in vue-loader.conf.js.
video: ["src", "poster"],         
source: "src",
img: "src",
image: "xlink:href"

}
I changed it to transformToRequire: {

video: ["src", "poster"],      
audio:"src",
source: "src",
img: "src",
image: "xlink:href"
Not even

}. The tag audio is always not recognized. Why?

what result do you expect? What is the error message actually seen?

error message:

 (Emitted value instead of an instance of Error)
  • Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

there are two problems:

1.vue-loader.conf.jsmodule.exportstransformToRequire
2.audiovue.js

Please give me some advice, thank you.

Apr.05,2021

the easiest way to do this is to put the sound file under statics without modifying any configuration of webpack, such as

<audio src="statics/xxx.mp3" type="audio/mpeg"></audio>

if you want to control the playback later, you can add a ref, to control the playback in the js code.

<audio ref="myAudio" ...

https://juejin.im/post/5caaf4.

Menu