在Vue中增加audio标签，实现声音文件的调用。

Question

请教一个问题.

问题描述

如何在vue

问题出现的环境背景及自己尝试过哪些方法

在vue里面调用一个音频文件。按照网上的做法.
https://blog.csdn.net/woyidin...
总是不成功。尝试修改了 transformToRequire: {

"audio": "src"

},修改了transformToRequire: {

audio: "src"

},仍然不行。另外在vue-loader.conf.js里面本来就有 transformToRequire: {

video: ['src', 'poster'],         
source: 'src',
img: 'src',
image: 'xlink:href'

}
我修改为 transformToRequire: {

video: ['src', 'poster'],      
audio:'src',
source: 'src',
img: 'src',
image: 'xlink:href'

} 也不行。总是无法识别标签audio。为什么呢？

你期待的结果是什么？实际看到的错误信息又是什么？

错误信息:

 (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.

有两个问题：

1.在vue-loader.conf.js的module.exports注册，可以有几个transformToRequire的声明？
2.audio标签在vue.js中究竟如何正确的使用？

请指点一下，谢谢。

Answer 1

最简单的做法就是把声音文件放在statics下即可，不需要修改webpack的任何配置，比如

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

如果后续要控制这个播放，可以增加一个ref，后面在js代码里控制播放。

<audio ref="myAudio" ...

Answer 2

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