前言:在vue中使用HTML中的<audio>标签去实现音乐播放的过程中,出现找不到文件源的问题。详情如下:
在浏览器控制台中出现如下报错:
NotSupportedError: The element has no supported sources.
代码如下:
<template>
<audio :src="currentSrc" controls="" @ended="nextSong"></audio>
<ul v-for="(song,index) in songs" :key="song.id">
<li @click="playMusic(index)" :class="[song.id == currentIndex ? activeClass : '']">
<a-icon type="customer-service" />{
{song.name}}</li>
</ul>
</template>
<script>
import Aplayer from 'vue-aplayer'
export default{
name:'',
data(){
return{
songs:[
{id:'',name:'',src:'../../kkk'}
]
}
},
components:{
Aplayer
}
}
</script>
像上面这样写,src会找不到路径,虽然你的音乐文件已经存在在你的本地文件夹中。
解决方法:
在src的后面加上一个require即可。
src:require('../../kkk')