Vue 및 NetEase Cloud API를 사용하여 음악 플레이어를 만드는 방법

Vue 및 NetEase Cloud API를 사용하여 음악 플레이어를 만드는 방법

오늘날 디지털 시대에 음악은 사람들의 삶에 없어서는 안 될 부분이 되었습니다. 인터넷이 성장하면서 음악 스트리밍 서비스가 점점 더 대중화되었습니다. NetEase Cloud Music은 중국에서 가장 인기 있는 스트리밍 음악 플랫폼 중 하나입니다. 풍부한 음악 리소스를 제공하며 개발자가 사용할 수 있는 개방형 API를 갖추고 있습니다. 이 기사에서는 Vue 프레임워크와 NetEase Cloud API를 사용하여 간단한 음악 플레이어를 만드는 방법을 소개합니다.

먼저 Vue 프로젝트를 만들어야 합니다. 명령줄 도구를 열고 적절한 디렉터리에서 다음 명령을 실행합니다.

vue create music-player

기본 구성을 선택하고 프로젝트가 생성될 때까지 기다립니다. 프로젝트 디렉터리를 입력하고 HTTP 요청 전송을 위한 Axios 라이브러리를 설치합니다.

cd music-player
npm install axios --Save

다음으로 NetEase Cloud 개발자 계정을 신청하고 API 액세스 키를 받아야 합니다. NetEase Cloud Music Open Platform 공식 홈페이지에 접속하여 개발자 계정을 등록하고 애플리케이션을 생성해 보세요. 획득한 액세스 키는 이후 API 요청에 사용됩니다.

NetEase Cloud API와의 상호 작용을 캡슐화하기 위해 프로젝트에 api.js라는 파일을 만듭니다. api.js的文件，用于封装与网易云API的交互：

import axios from 'axios';

const API_BASE_URL = 'https://api.music.163.com';

export default {
  async searchSongs(keyword) {
    const response = await axios.get(
      `${API_BASE_URL}/search?keywords=${encodeURIComponent(keyword)}`
    );
    return response.data;
  },

  async getSongUrl(id) {
    const response = await axios.get(`${API_BASE_URL}/song/url?id=${id}`);
    return response.data;
  },
};

上述代码封装了两个API请求。searchSongs函数接收一个关键字参数，并发起搜索请求，返回包含搜索结果的数据。getSongUrl函数接收一个音乐ID参数，并返回该音乐的播放地址。

接下来，我们可以在Vue组件中使用这些封装好的API。创建一个名为Player.vue的组件文件，编写如下代码：

<template>
  <div class="player">
    <input type="text" v-model="searchKeyword" @keyup.enter="searchSongs" placeholder="搜索歌曲" />
    <ul>
      <li v-for="song in songs" :key="song.id" @click="playSong(song.id)">{{ song.name }}</li>
    </ul>
    <audio :src="currentSongUrl" controls autoplay></audio>
  </div>
</template>

<script>
import api from '@/api';

export default {
  data() {
    return {
      searchKeyword: '', // 搜索关键字
      songs: [], // 搜索结果
      currentSongUrl: '', // 当前播放音乐的URL
    };
  },

  methods: {
    async searchSongs() {
      const response = await api.searchSongs(this.searchKeyword);
      this.songs = response.result.songs;
    },

    async playSong(id) {
      const response = await api.getSongUrl(id);
      this.currentSongUrl = response.data[0].url;
    },
  },
};
</script>

<style scoped>
.player {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

input {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding: 0 10px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  cursor: pointer;
  margin-bottom: 10px;
}

audio {
  width: 100%;
  margin-top: 20px;
}
</style>

上述代码定义了一个简单的音乐播放器组件。组件中有一个搜索输入框和一个音乐列表，用户可以输入关键字搜索歌曲，并点击列表项进行播放。播放器使用HTML5的<audio>标签，通过绑定src属性为当前音乐的URL实现播放功能。

最后，在你的Vue主文件（通常是main.js）中注册这个组件：

import Vue from 'vue';
import App from './App.vue';
import Player from './Player.vue';

Vue.component('Player', Player);

new Vue({
  render: h => h(App),
}).$mount('#app');

现在，运行你的Vue项目：

npm run serve

在浏览器中打开http://localhost:8080，你将看到一个简单的音乐播放器界面。你可以在搜索框中输入歌曲关键字，搜索到的结果将会展示在列表中。点击列表中的歌曲，即可使用HTML5的<audio>rrreee

위 코드는 두 개의 API 요청을 캡슐화합니다. searchSongs 함수는 키워드 인수를 받고, 검색 요청을 시작하고, 검색 결과가 포함된 데이터를 반환합니다. getSongUrl 함수는 음악 ID 매개변수를 수신하고 음악의 재생 주소를 반환합니다.

다음으로 Vue 구성 요소에서 이러한 캡슐화된 API를 사용할 수 있습니다. Player.vue라는 구성 요소 파일을 만들고 다음 코드를 작성합니다.

rrreee

위 코드는 간단한 음악 플레이어 구성 요소를 정의합니다. 구성 요소에는 검색 입력 상자와 음악 목록이 있습니다. 사용자는 키워드를 입력하여 노래를 검색하고 목록 항목을 클릭하여 재생할 수 있습니다. 플레이어는 HTML5의 <audio> 태그를 사용하여 src 속성을 ​​현재 음악의 URL에 바인딩하여 재생 기능을 구현합니다. 🎜🎜마지막으로 이 구성 요소를 기본 Vue 파일(일반적으로 main.js)에 등록합니다. 🎜rrreee🎜이제 Vue 프로젝트를 실행합니다. 🎜rrreee🎜http://를 엽니다. localhost:8080, 간단한 음악 플레이어 인터페이스가 표시됩니다. 검색창에 노래 키워드를 입력하면 검색 결과가 목록에 표시됩니다. HTML5의 <audio> 태그를 사용하여 음악을 재생하려면 목록에서 노래를 클릭하세요. 🎜🎜이것은 단순한 예일 뿐이며 필요에 따라 이 음악 플레이어를 더욱 확장할 수 있습니다. 예를 들어 재생 목록 기능, 음악 커버 표시 등을 추가하여 더욱 완벽하게 만들 수 있습니다. 동시에 NetEase Cloud Music은 노래 세부 정보, 가사 및 기타 정보를 얻을 수 있는 더 많은 API 인터페이스를 제공하며 이를 직접 탐색하고 시도해 볼 수 있습니다. 🎜🎜요약하자면 이 글에서는 Vue 프레임워크와 NetEase Cloud API를 사용하여 간단한 음악 플레이어를 만드는 방법을 소개합니다. 간단한 코드 예제를 통해 노래 검색, 음악 재생 등의 기본 기능을 설명합니다. 이 기사가 Vue 및 NetEase Cloud API를 사용하여 자신만의 음악 플레이어 개발을 시작하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 Vue 및 NetEase Cloud API를 사용하여 음악 플레이어를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!