scorpioeternal-vue_music-player
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>musciPlayer</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.min.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="js/axios.min.js"></script>
</head>

<body>
  <div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" placeholder="要先搜索的呀！" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper'>
          <ul class="song_list">
           <li v-for="music in musicList">
			   <a @click="playMusic(music.id)" href="javascript:;"></a>
			   <!-- 显示歌曲名字 -->
			   <b>{{music.name}}</b>
			   <!-- 设置mv图标是否显示 -->
			   <span v-if="music.mvid!=0" @click="playMV(music.mvid)"><i></i></span>
		   </li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlaying}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="musicCover" class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>热门留言</h5>
		  <!-- 个人信息及评论 -->
          <div class='comment_list'>
            <dl v-for="comments in hotComments">
              <dt>
				  <img :src="comments.user.avatarUrl" alt="">
			  </dt>
              <dd class="name">{{comments.user.nickname}}</dd>
              <dd class="detail">
                {{comments.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>

	 <!-- music播放器 -->
      <div class="audio_con">
        <audio @play="play" @pause="pause" ref='audio'  :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>
	  <!-- mv播放器 -->
      <div class="video_con" v-show="isShow">
        <video ref='video' :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="hide" ></div>
      </div>
    </div>
  </div>
</body>

<script type="text/javascript">
	var app = new Vue({
	  el: "#player",
	  data: {
	    // 查询关键字
	    query: "",
	    // 歌曲数组
	    musicList: [],
	    // 歌曲地址
	    musicUrl: "",
	    // 歌曲封面
	    musicCover: "",
	    // 歌曲评论
	    hotComments: [],
	    // 动画播放状态
	    isPlaying: false,
	    // 遮罩层的显示状态
	    isShow: false,
	    // mv地址
	    mvUrl:"",
	  },
	  methods: {
	    // 歌曲搜索
	    searchMusic: function() {
	      var that = this;
	      axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
	        function(response) {
	          that.musicList = response.data.result.songs;
	        },
	        function(err) {}
	      );
	    },
	    // 歌曲播放
	    playMusic: function(musicId) {
	      var that = this;
	      // 获取歌曲地址
	      axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
	        function(response) {
	          that.musicUrl = response.data.data[0].url;
	        },
	        function(err) {}
	      );

	      // 歌曲详情获取
	      axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
	        function(response) {
	          that.musicCover = response.data.songs[0].al.picUrl;
	        },
	        function(err) {}
	      );

	      // 歌曲评论获取
	      axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
	        function(response) {
	          that.hotComments = response.data.hotComments;
	        },
	        function(err) {}
	      );
	    },
	    // 歌曲播放
	    play: function() {
	      this.isPlaying = true;
	    },
	    // 歌曲暂停
	    pause: function() {
	      // console.log("pause");
	      this.isPlaying = false;
	    },
	    // 播放mv
	    playMV: function(mvid) {
			console.log(mvid)
	      var that = this;
	      axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
	        function(response) {
	          that.isShow = true;
	          that.mvUrl = response.data.data.url;
	        },
	        function(err) {}
	      );
	    },
	    // 隐藏
	    hide: function() {
	      this.isShow = false;
	    }
	  }
	});
</script>
</html>