ホームページ > 記事 > ウェブフロントエンド > QQ Music を Vue プロジェクトに共有する方法
インターネットの発展とソーシャルメディアの普及により、音楽の共有と普及はますます便利になってきています。中国最大のオンライン音楽プラットフォームの 1 つとして、QQ Music はユーザーに広く歓迎されています。ただし、一部のユーザーは QQ Music の使用時に、QQ Music を Vue などの Web サイトに転送する方法などの問題に遭遇しました。それでは、QQ Music を Vue に共有する方法を紹介しましょう。
まず、前提を理解する必要があります。Vue は JavaScript ベースの Web 開発フレームワークです。そのため、JavaScript を使用して QQ 音楽を Vue に転送する機能を実装する必要があります。具体的な手順は次のとおりです。
JavaScript では、 QQ Music API、歌手などへのリクエスト以下はサンプル コードです:
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); } });
ここでは、jQuery の $.ajax メソッドを使用して、jsonp を通じて QQ Music API をリクエストし、成功コールバック関数を通じてリクエスト結果を出力します。このうち、URLには歌手番号を表すsingermid、新たなリクエストコードが必要かどうかを表すneedNewCodeなどのパラメータが含まれており、これらのパラメータは実際の状況に応じて変更する必要があります。
曲情報を取得した後、関連する曲情報を Vue コンポーネントに表示するために、その情報を Vue コンポーネントに渡す必要があります。ウェブページ 。以下はサンプル コードです:
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'; }) } })
ここでは、曲情報を保存するために music という名前のデータ属性を定義します。実装されたフック関数では、楽曲のタイトル、歌手、url属性にそれぞれ曲名、歌手、再生リンク情報を割り当てます。
最後のステップは、Web ページに曲情報を表示することです。Vue のテンプレートを使用して、Vue コンポーネントに曲情報を表示できます。構文。以下はサンプル コードです:
<div id="app"> <h1>{{music.title}}</h1> <h2>{{music.singer}}</h2> <audio controls src="{{music.url}}"></audio> </div>
ここでは、二重中括弧構文を使用して h1 タグと h2 タグに曲名とアーティストを表示し、HTML5 audio タグを使用して曲を再生します。このうち、src 属性は、再生リンクを表す music の url 属性にバインドされます。
要約すると、QQ Music を Vue に転送するには、JavaScript、Vue、QQ Music API、およびその他の関連知識が必要です。以上の手順により、Vue コンポーネントに QQ Music の楽曲を表示する機能が実現できます。
以上がQQ Music を Vue プロジェクトに共有する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。