流程：

1.修改全局变量（index.js）：

import { createStore } from 'vuex'export default createStore({state: {playlist:[{name:"卡农(音乐盒版)",id:29802386,al:{id:104700,name:"卡农(音乐盒版)",picUrl:'https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg',},}],playCurrentIndex:0,isPlay:"N",isShowBackgrounPicture:false,},getters: {},mutations: {// 用来修改state中的playlistsetPlaylist:function (state,value) {state.playlist = value},setPlayIndex:function (state,index) {state.playCurrentIndex = index},setIsPlay:function (state,isPlay) {state.isPlay = isPlay},setIsShowBackgrounPicture:function (state) {state.isShowBackgrounPicture = !state.isShowBackgrounPicture}},actions: {},modules: {}
})

2.修改playController.vue组件：

<template><div class="playController"><div class="left" @click="setShowBackgrounPicture()"><img class="songPhoto" :src="playlist[playCurrentIndex].al.picUrl"><div class="singName">{{playlist[playCurrentIndex].name}}</div><div class="tips">橫划可以且换上下首</div></div><div class="right"><svg v-if="isPlay=='Y'" class="icon bofang" aria-hidden="true" @click="play"><use xlink:href="#icon-zanting"></use></svg><svg v-else class="icon bofang" aria-hidden="true" @click="play"><use xlink:href="#icon-bofang1"></use></svg><svg class="icon liebiao" aria-hidden="true"><use xlink:href="#icon-liebiaomoshi"></use></svg></div><!-- 将音乐的详情传给playMusic --><playMusic v-show="isShowBackgrounPicture" :playDetail="playlist[playCurrentIndex]"></playMusic><audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`"></audio></div>
</template><script>import {mapState,mapMutations} from 'vuex'import playMusic from "./playMusic.vue";export default {name: "playController",computed:{...mapState(['playlist','playCurrentIndex','isPlay','isShowBackgrounPicture'])},mounted() {console.log(this.$refs.audio)},// updated() {//     console.log(this.playCurrentIndex)// },methods:{play:function () {if (this.$refs.audio.paused){this.$refs.audio.play();this.$store.commit('setIsPlay','Y');}else {this.$refs.audio.pause();this.$store.commit('setIsPlay','N');}// console.log(this.$refs.audio)},setShowBackgrounPicture:function () {this.$store.commit('setIsShowBackgrounPicture',true);console.log("点击")}},components:{playMusic,},}
</script><style scoped>.playController{position: fixed;width: 7.5rem;height: 1rem;background-color: cadetblue;border-radius: 0 0.5rem 0.5rem 0;bottom: 0.3rem;left: 0;}.left{width: 5.5rem;height: 1rem;}.right{display: flex;}.right>.icon{width: 0.6rem;height: 0.6rem;fill: #cccccc;}.bofang{position: absolute;right: 1.1rem;top: 0.2rem;}.liebiao{position: absolute;right: 0.25rem;top: 0.2rem;}.songPhoto{position: absolute;top: -0.2rem;left: 0;width: 1.4rem;height: 1.4rem;/*z-index: 10;*/border-radius: 0.7rem;}.singName{position: absolute;left: 1.5rem;font-size: 18px;color: whitesmoke;width: 4rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}.tips{position: absolute;bottom: 0.1rem;color: #cccccc;left: 1.5rem;font-size: 12px;}
</style>

实现音乐播放（音乐app项目-第11步）相关推荐

全局播放控件（音乐app项目-第10步）
在上一节播放控件 (音乐app项目-第9步)的基础上,希望播放控件能够在所有页面显示,效果如下: 流程: 1.修改index.html 加上如下代码,防止postion:fixed失效: <me ...
Android项目实践(四)——音乐播放器APP
关于Android制作音乐播放器APP的几点建议 1.权限获得 1.在AndroidManifest.xml文件中,做如下声明: <uses-permission android:name=&q ...
歌单详情内容-播放列表（音乐app项目-第8步）
在上一节歌单详情内容-图标列表 (音乐app项目第7步)的基础上,继续实现歌单详情内容-播放列表,效果如下图标注区域所示: 流程: 1.新建组件playList.vue playList.vue: & ...
安卓音乐播放器app开发（一）---功能分析及启动页的制作
音乐播放器app-功能分析及启动页的制作现如今的音乐播放器的app种类繁多,让有选择困难症的同胞们难以抉择.现在,让Ryan带你打造一款属于自己的音乐播放器app. 功能介绍实现本地音乐及在线音乐 ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
设计灵感|音乐播放器App界面如何设计？
音乐播放器 App 界面要怎么设计?来看看集设网精选的 12 款移动端音乐播放器,学习一下如何设计出一个易用性和交互性良好.设计感受舒适.展示层级清晰的界面. 音乐播放器App界面如何设计? - 集设 ...
音乐播放器App界面优秀案例，通过案例看大咖如何设计？
音乐播放器 App 界面要怎么设计?集设网 www.ijishe.ccom精选的 12 款移动端音乐播放器,学习一下如何设计出一个易用性和交互性良好.设计感受舒适.展示层级清晰的界面. 看这里
歌单详情内容-图标列表（音乐app项目-第7步）
在上一节歌单详情内容-顶部 (音乐app项目-第6步)_Zhichao_97的博客-CSDN博客的基础上,继续实现详情页的图标列表,效果如下图标注区域所示: 流程: 1.在iconfont官网添加所需 ...
【Android】音乐播放器APP的设计与实现
[Android]音乐播放器APP的设计与实现一.界面设计二.核心代码一.界面设计 (1)注册登录 (2)主界面 (3)音乐播放器可以实现开始,暂停,下一首,上一首功能:滑动进度条可以改变音乐 ...

实现音乐播放（音乐app项目-第11步）

在上一节（全局播放控件（音乐app项目-第10步））基础上，继续实现音乐播放的效果如下：

流程：

实现音乐播放（音乐app项目-第11步）相关推荐

最新文章

热门文章

实现音乐播放 （音乐app项目-第11步）

在上一节（全局播放控件 （音乐app项目-第10步））基础上，继续实现音乐播放的效果如下：

流程：

实现音乐播放 （音乐app项目-第11步）相关推荐

最新文章

热门文章

实现音乐播放（音乐app项目-第11步）

在上一节（全局播放控件（音乐app项目-第10步））基础上，继续实现音乐播放的效果如下：

实现音乐播放（音乐app项目-第11步）相关推荐