YouTube API 사용하기

음악 재생 기능을 만들기 위해서는 YouTube API를 사용해야한다. 음악 재생의 매커니즘은 이렇다.

1. Spotify API에서 track name과 track artist값을 가져온다(각각 음악 이름과 아티스트 이름이다.)
2. 이 값들을 YouTube API에 보낸다.
3. videoId를 출력한다
4. YouTube 컴포넌트의 videoId 속성에 출력된 videoId를 넣어서 음악을 재생한다.

과정을 하나씩 자세히 살펴보기로 하자.

처음에 데이터를 가져오는 코드이다.

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 동영상 플레이어가 나오지만 커스텀을 통해 동영상 플레이어를 음악 플레이어 형태로 바꾼다던가 다양하게 바꿀 수 있다.

음악을 hover했을때 음악의 번호가 재생 버튼으로 바뀌게 하려면?

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>