vue中音乐播放控件播放不了音乐

最新推荐文章于 2025-03-31 11:32:14 发布

Sandy_Star

最新推荐文章于 2025-03-31 11:32:14 发布

阅读量5.2k

点赞数 5

分类专栏：音乐播放器 audio vue.js 文章标签： vue javascript vue.js

本文链接：https://blog.csdn.net/weixin_48931875/article/details/109297307

版权

vue.js 同时被 3 个专栏收录

23 篇文章

订阅专栏

音乐播放器

1 篇文章

订阅专栏

audio

1 篇文章

订阅专栏

本文介绍在Vue项目中使用HTML的<audio>标签实现音乐播放时遇到的文件源路径问题及解决方案。通过在音乐文件路径前添加require函数，成功解决了浏览器无法找到音频文件的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在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会找不到路径，虽然你的音乐文件已经存在在你的本地文件夹中。