用vue制作的一个简易的音乐播放器，无样式

最新推荐文章于 2023-06-09 10:56:30 发布

来旺

最新推荐文章于 2023-06-09 10:56:30 发布

阅读量469

点赞数 1

本文链接：https://blog.csdn.net/Young_Naive/article/details/105322345

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="player">
      <div id="search_bar">
        <input
          type="text"
          autocomplete="off"
          v-model="query"
          @keyup.enter="searchMusic"
        />
      </div>
      <div>
        <ul>
          <li v-for="item in music">
            <a href="javascript:;" @click="playMusic(item.id)">播放</a>
            {{item.name}}
            <span v-if="item.mvid>0" @click="playMv(item.mvid)"><i>mv</i></span>
          </li>
        </ul>
      </div>
      <div>
        <img :src="imgSrc" alt="" />
      </div>
      <div>
        <audio
          :src="musicUrl"
          ref="audio"
          controls
          autoplay
          loop
          @play="play"
          @pause="pause"
        ></audio>
      </div>
      <div v-show="isShow" style="display: none;">
        <video :src="mvUrl" controls></video>
      </div>
      <div :class="{playing:isPlaying}">
        <img src="" alt="" />
      </div>
      <div>
        <dl v-for="item in hotComments">
          <dt>
            <img :src="item.user.avatarUrl" alt="头像" />
          </dt>
          <dd>{{item.nickname}}</dd>
          <dd>{{item.content}}</dd>
        </dl>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="综合应用.js"></script>
  </body>
</html>

var vm = new Vue({
  el: "#player",
  data: {
    query: "",
    music: [],
    musicUrl: "",
    imgSrc: "",
    hotComments: [],
    isPlaying: false,
    isShow: false,
    mvUrl: "",
  },
  methods: {
    searchMusic: function () {
      var that = this;
      axios
        .get("https://autumnfish.cn/search?keywords=" + this.query)
        .then(function (response) {
          // console.log(response);
          that.music = response.data.result.songs;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    playMusic: function (musicId) {
      // console.log(musicId);
      var that = this;
      axios
        .get("https://autumnfish.cn/song/url?id=" + musicId)
        .then(function (response) {
          //   console.log(response.data.data[0].url);
          that.musicUrl = response.data.data[0].url;
        }),
        function (err) {
          alert(err);
        };
      axios
        .get("https://autumnfish.cn/song/detail?ids=" + musicId)
        .then(function (response) {
          //   console.log(response)
          // console.log(response.data.songs[0].al.picUrl);
          that.imgSrc = response.data.songs[0].al.picUrl;
        })
        .catch(function (error) {
          alert(error);
        });
      axios
        .get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
        .then(function (response) {
          console.log(response.data.hotComments);
          that.hotComments = response.data.hotComments;
        })
        .catch(function (error) {
          console.log(error)
        });
    },
    play: function () {
      // console.log("play");
      this.isPlaying = true;
    },
    pause: function () {
      // console.log("pause");
      this.isPlaying = false;
    },
    playMv: function (mvid) {
      var that = this;
      axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
        .then(function (response) {
          // console.log(response.data.data.url)
          that.isShow = true;
          that.mvUrl = response.data.data.url;
        })
        .catch(function (error) {
        })
    }
  },
});