음악 재생 기능을 만들기 위해서는 YouTube API를 사용해야한다. 음악 재생의 매커니즘은 이렇다.
과정을 하나씩 자세히 살펴보기로 하자.
처음에 데이터를 가져오는 코드이다.
const trackInfo = await getSpotifyTrackInfo(id);
const searchQuery = `${trackInfo.name} ${trackInfo.artist}`;
const fetchedVideoId = await searchYouTubeVideo(searchQuery);
이렇게 youtube API로 데이터를 보냈다.
import axios from "axios";
export const searchYouTubeVideo = async (query: string) => {
const apiKey = import.meta.env.VITE_YOUTUBE_API_KEY;
const response = await axios.get(
`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${encodeURIComponent(
query
)}&key=${apiKey}&type=video&maxResults=1`
);
if (response.data.items.length) {
return response.data.items[0].id.videoId;
} else {
throw new Error("No video found on YouTube");
}
};
youtube API는 apiKey가 필요하다. 이렇게 코드를 실행했을 경우, response 값으로 videoId를 얻을 수 있다.
<YouTube videoId={videoId} opts={opts} onReady={onReady} />
videoId를 위의 코드에 넣었다. YouTube 컴포넌트는 ‘react-youtube’ 라이브러리를 설치해서 사용할 수 있다. 이렇게해서 Spotify API와 YouTube API 연동을 성공하였다.
YouTube 컴포넌트의 속성을 잘 이용한다면 동영상 플레이어도 커스텀으로 만들 수 있다. 예를들어 기본 속성을 적용했을 때는 기본 youtube 동영상 플레이어가 나오지만 커스텀을 통해 동영상 플레이어를 음악 플레이어 형태로 바꾼다던가 다양하게 바꿀 수 있다.
tailwind의 group속성은 상위 요소와 하위 요소를 묶어서 동작하게 하는 기능이다. 상위 요소에 group을 적용하고 하위 요소에 group-hover속성을 넣어 하위 요소를 hover했을때 원하는 동작을 할 수 있도록 구현할 수 있다.
<div
key={item.id}
className="py-1 hover:bg-orange-200 hover:rounded-md grid grid-cols-[1fr_20fr_1fr] group mr-5"
>
<div className="group-hover:hidden flex justify-center items-center">
{item.track_number}
</div>
<div className="hidden justify-center items-center group-hover:flex">
<FontAwesomeIcon
className="hover:cursor-pointer"
data-id={item.id}
data-name={item.name}
data-artists={artists}
data-imgurl={item.images}
onClick={onPlayClick}
icon={faPlay}
/>
</div>
</div>