vuejs之构建简易音乐播放器

前端开发 作者: 2024-08-23 09:25:01
一步步来,先看下目前的样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=
<!DOCTYPE html>
<html lang="en">

head>
  meta charset="UTF-8" />
  name="viewport" content="width=device-width,initial-scale=1.0" http-equiv="X-UA-Compatible"="ie=edge" title>悦听player</<!-- 样式 -->
  link rel="stylesheet" href="./css/index.css"bodydiv class="wrap">
     播放器主体区域 -->
    ="play_wrap" id="player">
      ="search_bar">
        img src="images/player_title.png" alt="" />
         搜索歌曲 -->
        input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
      div="center_con" 搜索歌曲列表 ='song_wrapper'>
          ul ="song_list">
           li><a href="javascript:;"></a> b>你好<!---->spaniul="images/line.png" class="switch_btn"="" 歌曲信息容器 ="player_con"="playing"="images/player_bar.png"="play_bar" />
           黑胶碟片 -->
          ="images/disc.png"="disc autoRotate" ="images/cover.png"="cover autoRotate"  评论容器 ="comment_wrapper"h5 ='title'>热门留言h5='comment_list'>
            dl >
              dt="./images/person.png"dd ="name">盐焗西兰花dd="detail">
                绝对值得一听,吹爆
              dl="right_line"="audio_con"audio ref='audio'  src="" controls autoplay loop class="myaudio"audio="video_con"  style="display: none;"video  controls="controls"video="mask"  开发环境版本,包含了有帮助的命令行警告 script ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"script 官网提供的 axios 在线地址 ="https://unpkg.com/axios/dist/axios.min.js"html>
  <script>
    var vue = new Vue({
      el: "#player",data: {
        musicList: [],query: ''function () {
          var that = this;
          axios.get("https://autumnfish.cn/search?keywords=" + .query).then(
             (response) {
              // console.log(response);
              that.musicList = response.data.result.songs;
            }, (err) { }
          );
        },});
  </script>
            li v-for="item in musicList">{{item.name}}<!---->
            >
        playMusic:  (musicId) {
          ;
           获取歌曲地址
          axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
             (response) {
              console.log(response);
               console.log(response.data.data[0].url);
              that.musicUrl = response.data.data[0].url;
            },
            ="javascript:;" @click="playMusic(item.id)">
='audio' :src="musicUrl">
           歌曲详情获取
          axios.get("https://autumnfish.cn/song/detail?ids=" + console.log(response.data.songs[0].al.picUrl);
              that.musicCover = response.data.songs[0].al.picUrl;
            },1)"> (err) { }
          );
        :src="musicCover">
           歌曲评论获取
          axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + console.log(response);
               console.log(response.data.hotComments);
              that.hotComments = response.data.hotComments;
            },1)"> (err) { }
          );
          dl ="item in hotComments">
                :src="item.user.avatarUrl">{{item.nickname}}
                {{item.content}}
              >
         歌曲播放
        play: function () {
           console.log("play");
          this.isPlaying = true;
        },1)"> 歌曲暂停
        pause: function () {
           console.log("pause");
          false
       @play="play" @pause="pause"="musicUrl">
 ="playing" :class="{playing:isPlaying}">
         播放mv
        playMv:  (mvid) {
          ;
          axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
            console.log(response.data.data.url);
              that.isShow = ;
              that.mvUrl = response.data.data.url;
            },1)"> 隐藏
        hide: this.isShow = ;
        }
       v-show="isShow" stylevideo ="mvUrl" controls="mask"="hide">
="javascript:;"="playMusic(item.id)"span v-if="item.mvid!=0"="playMv(item.mvid)"="musicCover"
    var vue = new Vue({
      el: "#player",query: '',musicUrl: '',musicCover: '',// 歌曲评论
        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.musicList = response.data.result.songs;
              console.log(response);
            },function (err) { }
          );
        },playMusic: function (musicId) {
          var that = this;
          // 获取歌曲地址
          axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
            function (response) {
              console.log(response);
              // console.log(response.data.data[0].url);
              that.musicUrl = response.data.data[0].url;
            },function (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.musicCover = response.data.songs[0].al.picUrl;
            },function (err) { }
          );
          // 歌曲评论获取
          axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
            function (response) {
              // console.log(response);
              // console.log(response.data.hotComments);
              that.hotComments = response.data.hotComments;
            },// 歌曲播放
        play: function () {
          // console.log("play");
          this.isPlaying = true;
        },// 歌曲暂停
        pause: function () {
          // console.log("pause");
          this.isPlaying = false;
        },// 播放mv
        playMv: function (mvid) {
          var that = this;
          axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
            function (response) {
              // console.log(response);
              //console.log(response.data.data.url);
              that.isShow = true;
              that.mvUrl = response.data.data.url;
            },// 隐藏
        hide: function () {
          this.isShow = false;
        }
      },});
  >
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_67167.html