基于Vue现实网页音乐播放器

该音乐播放器是由父组件和子组件相结合通过axios获取音乐的相关属性，将其显示在界面，通过点击实现相应的操作。链接为https://download.csdn.net/download/hahayixiao1/12380128

这是搜索页面

这是关于音乐界面

这是推荐歌单界面

这是最新音乐界面

这是最新MV界面

这是MV界面

这是音乐列表界面

代码代码较多，给出部分代码，如果需要下载，我已经上传。
App.vue
父组件：

<template>
  <div id="app">
    <top />
    <index />
  </div>
</template>
<script>
import top from './components/01.top.vue';
import index from './components/02.index.vue';
export default {
  name: 'app',
  components: {
    top,
    index
  }
};
</script>
<style >
</style>

01.top.vue
子组件

<template>
  <div class="top-container">
    <div class="left-box">
      <div class="icon-wrapper" style="padding-top:20px">
        <span class="iconfont icon-home" @click="toHomeClick()"></span>
        <!-- <span class="iconfont icon-sami-select"></span> -->
        <span class="iconfont icon-full-screen" @click="getFullCreeen(btnStatus)"></span>
      </div>
      <!-- <div class="history-wrapper">
        <span class="iconfont icon-arrow-lift"></span>
        <span class="iconfont icon-arrow-right"></span>
      </div> -->
    </div>
    <div class="right-box" style="padding-right:700px">
      <div class="el-input el-input--small el-input--prefix" >
        <input type="text"   style="width:500px;" autocomplete="off" placeholder="搜索" v-model="inputVal" @keyup.enter="toResult" class="el-input__inner" />
        <span class="el-input__prefix">
          <i class="el-input__icon el-icon-search"></i>
        </span>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'top',
  data() {
    return {
      query: '',
      inputVal: '',
      n: 0,
      btnStatus: 0
    }
  },
  methods: {
    toResult() {
      if (this.inputVal === '') {
        // 提示用户
        this.$message.warning('请输入内容!')
      } else {
        // 携带数据去搜索页面
        this.$router.push(`/result?q=${this.inputVal}`)
      }
    },
    toHomeClick() {
      if ('/discovery' === this.$route.path) {
        return
      }
      this.$router.push(`/discovery`)
    },
    //  点击实现全屏和退出全屏
    getFullCreeen(btnStatus) {
      this.btnStatus = this.btnStatus === 0 ? 1 : 0
      this.n++
      this.n % 2 == 0 ? this.outFullCreeen(document) : this.inFullCreeen(document.documentElement)
    },

    inFullCreeen(element) {
      let el = element
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
      if (typeof rfs != 'undefined' && rfs) {
        rfs.call(el)
      } else if (typeof window.ActiveXObject != 'undefined') {
        let wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    },

    outFullCreeen(element) {
      let el = element
      let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen
      if (typeof cfs != 'undefined' && cfs) {
        cfs.call(el)
      } else if (typeof window.ActiveXObject != 'undefined') {
        let wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    }
  }
}
</script>

<style scoped></style>

02.index.vue
子组件：

<template>

  <div class="index-container" >
  
    <!-- 导航区域 -->
    <div class="nav" style="padding-left:50px">
      <ul>
        <li>
          <router-link to="/discovery">
            <span class="iconfont icon-find-music"></span>
            发现音乐
          </router-link>
        </li>
        <li>
          <router-link to="/playlists">
            <span class="iconfont icon-music-list"></span>
            推荐歌单
          </router-link>
        </li>
        <li>
          <router-link to="/songs">
            <span class="iconfont icon-music"></span>
            最新音乐
          </router-link>
        </li>
        <li>
          <router-link to="/mvs">
            <span class="iconfont icon-mv"></span>
            最新MV
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 主体区域 -->
    <div class="main" >
      <router-view></router-view>
    </div>
    <!-- 播放标签 -->
  
    <div class="players" style="background-color:black" >
     <img :src="imgUrl+'?param=50y50'" alt="" style="padding-top:5px;padding-left:20px" />
    <h3 style="float:right;padding-right:310px;padding-top:16px;font-size:1em;color:white">{{namees}}</h3>
    </div>
    <div class="player"  >

      <audio :src="musicUrl" autoplay controls id="music"  > </audio>
    </div>
  </div>
</template>

<script>
import mains from '../main-dev.js'
export default {
  name: 'index',
  data() {
    return {
      musicUrl: '',
      namees:'',
      imgUrl:''
    }
  },
  mounted() {
    var _this=this;
    mains.$on("message",function(message){
       
        _this.namees=message
       
      })
   mains.$on("message1",function(message1){
       
        _this.imgUrl=message1
       
      })
    //订阅消息
    this.$pubSub.subscribe('pauseAudio', msg => {
      var audio = document.getElementById('music')
      audio.pause()


      
    })

  }
}
</script>

<style >
</style>

代码实在太多，如果各位需要可以去下载。。
vue启动方法 利用cmd 到文件目录下 之后npm run serve 如果有相应的组件没有下载上网查询下载。