简易音乐播放器

自制一个简单的音乐播放器,该播放器实现的功能有歌曲搜索,音乐播放两个功能;

该音乐器的页面如下,(有一点难看);

 

这个播放器是通过axios来获取所需要的数据的(比如:歌名,播放地址),因为我是用vue-cli脚手架做的,所有该axios是通过cnpm下载的,下载方法是

打开终端

cd  (项目名称)

cnpm i axios

然后通过import请求引入axios即可使用;

请求的语法是:

axios({
        url: "https://autumnfish.cn/search",
        method: "get",
        params: {
          keywords: this.inputValue,
        },

 请求的接口是

https://autumnfish.cn/search

 关键字:keywords

该接口可以通过歌名搜索出歌曲Id,歌手等内容;

https://autumnfish.cn/song/url?id

关键字:id

通过搜索歌曲Id,可以得到该歌曲的播放地址;

至此实现一个简易播放器的所有数据都以请求完毕通过v-for将数据渲染置标签元素上即可；

这是我的代码;

import axios from "axios";
export default {
  name: "app",
  data() {
     
    return {
      inputValue: "",
      result: [],
      resurl:[],
      murl:"",
    };
  },
  methods: {
    play(id){
      console.log(id);
      axios({url:`https://autumnfish.cn/song/url?id=${id}`,
      method:"get",
      parseInt:{
          id:id
      }
      }).then((res)=>{
      this.resurl=res.data.data
      this.murl=this.resurl[0].url
      console.log(this.resurl[0].url);
      })

    },
    search() {
      axios({
        url: "https://autumnfish.cn/search",
        method: "get",
        params: {
         
          keywords: this.inputValue,
        },
      }).then((res) => {
        this.result = res.data.result.songs
         console.log(this.result);
         
      });
    },
  },
};

在这个播放器中我使用了svg标签做歌名后的那个三角形;

SVG意为可缩放矢量图形;svg使用xml格式定义图像;

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 16 31"
              >
                <path
                  d="M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z"
                ></path>
              </svg>