前言:在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')
Logo

前往低代码交流专区

更多推荐