Vue Axios Vuex书写一个最简单的音乐播放器 从而实现音乐的播放功能

1.定义一个组件，负责播放音乐

这里我们定义一个foot.vue的组件，做音乐播放器

<div class="footer"><audio ref="player" :src="this.$store.state.MusicUrl" controls autoplay="autoplay"> </audio></div><style lang='less' scoped>.footer {width: 100%;height: auto;z-index: 99;position: fixed;bottom: 0;left: 0;width: 100%;audio{width: 100%;}}</style>

2.在对应的页面发起axios请求拿到歌单(省略)，之后遍历，拿到对应每一首歌的ID发送请求，最后拿到播放音乐的URL地址，利用Vuex把URL地址存入

<div class="newDetails" v-for="item in $store.state.getNewList" :key="item.id" @click="getSongID(item.id)"> <img :src="item.picUrl" alt="" /> </div>

async getSongID(id) {const {data: res } = await openSongs({id });if (!res.data[0].url) {this.$message.error("歌曲不存在，请换一首");}this.$mit("receiveUrl", res.data[0].url);this.getLrcMus();},

3.将值传给foot.vue组件，就实现播放啦