How to share QQ Music to Vue project

With the development of the Internet and the popularity of social media, music sharing and dissemination are becoming more and more convenient. As one of the largest online music platforms in China, QQ Music is widely welcomed by users. However, some users have encountered problems when using QQ Music, such as: how to forward QQ Music to websites such as Vue. So, let’s introduce how to share QQ Music to Vue.

First of all, you need to understand a premise: Vue is a JavaScript-based web development framework. Therefore, we need to use JavaScript to implement the function of forwarding QQ music to Vue. The specific steps are as follows:

1. Get the song information of QQ Music

In JavaScript, we can get the song information, including the song name, by sending a request to the QQ Music API , singers, etc. The following is a sample code:

var url = "http://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg?g_tk=5381&uin=0&format=jsonp&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=yqq&hostUin=0&needNewCode=0&singermid=001J5f0S2hxw8d&order=listen&begin=0&num=30&songstatus=1";
$.ajax({
    url: url,
    dataType: "jsonp",
    jsonp: "callback",
    success: function (data) {
        console.log(data);
    },
    error: function (error) {
        console.log(error);
    }
});

Here we use jQuery's $.ajax method to request the QQ Music API through jsonp, and then output the request result through the success callback function. Among them, the URL contains parameters, such as singermid representing the singer number, needNewCode representing whether a new request code is needed, etc. These parameters need to be modified according to the actual situation.

2. Transfer information to the Vue component

After obtaining the song information, we need to pass the information to the Vue component in order to display the relevant song information on the web page . The following is a sample code:

new Vue({
  el: '#app',
  data: {
    music: {
      title: '',
      singer: '',
      url: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.music.title = 'My heart will go on';
      this.music.singer = 'Celine Dion';
      this.music.url = 'http://stream.qqmusic.qq.com/32164791.mp3';
    })
  }
})

Here we define a data attribute named music to store song information. In the mounted hook function, we assign the song name, singer and playback link information to the title, singer and url attributes of music respectively.

3. Display song information in the Vue component

The last step is to present the song information on the web page. We can display it in the Vue component through Vue's template syntax. The following is a sample code:

<div id="app">
  <h1>{{music.title}}</h1>
  <h2>{{music.singer}}</h2>
  <audio controls src="{{music.url}}"></audio>
</div>

Here we use double curly brace syntax to display the song name and artist in the h1 and h2 tags, and use the HTML5 audio tag to play the song. Among them, the src attribute is bound to the url attribute of music, which represents the playback link.

To sum up, forwarding QQ Music to Vue requires knowledge of JavaScript, Vue, QQ Music API and other related knowledge. Through the above steps, the function of displaying QQ Music songs in the Vue component can be realized.

The above is the detailed content of How to share QQ Music to Vue project. For more information, please follow other related articles on the PHP Chinese website!