little-black-player
/
music.html

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>小黑播放器</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./assets/css/player.css" />
</head>

<body>
  <!-- 主体区域 -->
  <section id="player">
    <header class="header">
      <h1>
        <a href="http://www.itheima.com/">
          <img src="./assets/img/black.png" alt="" />
        </a>
        小黑播放器
      </h1>
      <!-- 输入框 -->
      <input v-model="inputValue" @keyup.enter="search" placeholder="请输入歌名" class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="music-list">
        <li class="music" v-for="(item,index) in results" :key="index">
          <div class="view">
            <span class="index">{{ index+1 }}</span>
            <label>{{ item.name }}</label>
            <button @click="play(item.id)" class="play"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 音频标签 -->
    <footer class="footer">
      <!-- autoplay:自动播放 -->
      <audio :src="url" autoplay controls></audio>
    </footer>
  </section>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      需求：
      1. 回车搜歌
          接口1:歌曲搜索
          地址:https://autumnfish.cn/search
          方法:get
          参数:keywords  搜索关键字
      2. 列表渲染
      3. 点击播放
          接口2:获取歌曲播放地址
          地址:https://autumnfish.cn/song/url
          方法:get
          参数:id  歌曲id
    */
    let app = new Vue({
      el: '#player',
      data: {
        //数据绑定
        inputValue: "",
        //搜索结果
        results: [],
        //歌曲播放
        url: ''
      },
      methods: {
        //搜索歌曲
        search() {
          axios({
            //请求地址
            url: "https://autumnfish.cn/search",
            //请求方法
            method: "get",
            params: {
              keywords: this.inputValue
            }
          }).then(res => {
            //console.log(res);
            this.results = res.data.result.songs
          })
        },
        //播放歌曲
        play(id) {
          axios({
            url: "https://autumnfish.cn/song/url",
            method: "get",
            params: {
              id
            }
          }).then(res => {
            console.log(res);
            this.url = res.data.data[0].url
          })
        }
      },
    })
  </script>
</body>

</html>