この記事でできる事

楽曲検索
アーティスト検索
楽曲情報表示、プレビュー再生
アルバムページ
- 収録曲の表示
アーティストページ
- 発売されているアルバムの表示

楽曲の公式情報がrailsアプリ内で取得できると言う認識で大丈夫です。
railsアプリ内にてプレイリスト追加等の方法は後日書こうと思います。

前提条件

gem dotenv-railsにてAPIキーを管理しています。
Spotify APIのクライアントIDとシークレットIDを取得している

APIを取得していない場合は以下の手順で登録してください。

Spotify APIの取得方法

1.ユーザーアカウントの登録

2.アカウント登録後ダッシュボードへ。

3.APIの発行

CREATE AN APPをクリック。

アプリケーション名と説明を英語で記載
Redirect URIsはlocalhost:3000（本番環境の場合はそれに準ずるURI）を記述し、Addを押す
アプリの種類はWeb APIをチェック

4. APIキーの確認

settingsをクリック

View client secretをクリックし、Client IDとClient secretをコピー（後ほど使います）

※APIキーは誰にも公開しないでください
（上記写真のAPIキーは例です。※削除済み）

実装

1. rspotifyのインストール

Spotify API のラッパーであるRSpotifyというgemを使って実装します。
Gemfileに以下を追加し、bundle installを実行します。

Gemfile

gem 'rspotify'

ターミナル

bundle install

2.環境変数の設定

先程コピーしたキーを.envに追記

.env

SPOTIFY_CLIENT_ID=Client IDの内容
SPOTIFY_SECRET_ID=Client secretの内容

3. コントローラの作成

ターミナル

rails g controller Songs search show artist album

app/controllers/songs_controller.rb

class SongsController < ApplicationController
  require 'rspotify'
  RSpotify.authenticate(ENV['SPOTIFY_CLIENT_ID'], ENV['SPOTIFY_SECRET_ID'])

  def search
    if params[:search_artist].present?
      @searchartists = RSpotify::Artist.search(params[:search_artist])
    end

    if params[:search_track].present?
      @searchtracks = RSpotify::Track.search(params[:search_track])
    end
  end

  def show
    @track = RSpotify::Track.find(params[:id])
  end

  def artist
    @artist = RSpotify::Artist.find(params[:id])
  end

  def album
    @album = RSpotify::Album.find(params[:id])
  end
end

4. ルーティングの設定

コントローラを作成した際に自動で記述されているものを削除して、以下を追記

config/routes.rb

resources :songs do
  collection do
    get "search"
  end
  member do
    get "artist"
    get "album"
  end
end

collectionやmemberについて詳しく知りたい人はこちら

5. ビューの作成

検索フォームと結果表示

app/views/songs/search.html.erb

<h3>アーティスト名で検索</h3>
<%= form_with url: search_songs_path, method: :get, local: true do |form| %>
  <%= form.text_field :search_artist %>
  <%= form.submit 'アーティスト名検索', name: nil %>
<% end %>

<h3>楽曲名で検索</h3>
<%= form_with url: search_songs_path, method: :get, local: true do |form| %>
  <%= form.text_field :search_track %>
  <%= form.submit '楽曲名検索', name: nil %>
<% end %>

<h1>検索結果</h1>
<div>
  <% if @searchartists.present? %>
    <% @searchartists.each do |artist| %>
      <div>
        <h3><%= link_to artist.name, artist_song_path(artist.id) %></h3>
        <% if artist.images.any? %>
          <%= image_tag(artist.images[0]["url"]) %>
        <% end %>
      </div>
    <% end %>
  <% end %>

  <% if @searchtracks.present? %>
    <% @searchtracks.each do |track| %>
      <div>
        <h3><%= link_to track.name, song_path(track.id) %></h3>
        <p>アーティスト: <%= track.artists.map { |artist| link_to artist.name, artist_song_path(artist.id) }.join(", ") %></p>
        <p>アルバム: <%= link_to track.album.name, album_song_path(track.album.id) %></p>
        <% if track.album.images.any? %>
          <%= image_tag(track.album.images[0]["url"]) %>
        <% end %>
      </div>
    <% end %>
  <% end %>
</div>

楽曲詳細ページ

app/views/songs/show.html.erb

<h1><%= @track.name %></h1>
<p>アーティスト: <%= link_to @track.artists.first.name, artist_song_path(@track.artists.first.id) %></p>
<p>アルバム: <%= link_to @track.album.name, album_song_path(@track.album.id) %></p>
<p>リリース日: <%= @track.album.release_date %></p>
<p>トラック番号: <%= @track.track_number %></p>
<p>長さ: <%= @track.duration_ms / 1000 %> 秒</p>

<% if @track.preview_url.present? %>
  <audio controls>
    <source src="<%= @track.preview_url %>" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
<% else %>
  <p>プレビューは利用できません。</p>
<% end %>

アルバム詳細ページ

app/views/songs/album.html.erb

<h1><%= @album.name %></h1>
<p>リリース日: <%= @album.release_date %></p>

<% if @album.images.any? %>
  <%= image_tag(@album.images[0]["url"]) %>
<% end %>

<h2>トラックリスト</h2>
<% @album.tracks.each do |track| %>
  <div>
    <h3><%= link_to track.name, song_path(track.id) %></h3>
    <p>トラックナンバー: <%= track.track_number %></p>
    <% if track.preview_url.present? %>
      <audio controls>
        <source src="<%= track.preview_url %>" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
    <% else %>
      <p>プレビューは利用できません。</p>
    <% end %>
  </div>
<% end %>

アーティスト詳細ページ

app/views/songs/artist.html.erb

<h1><%= @artist.name %></h1>
<p>人気度: <%= @artist.popularity %></p>
<p>ジャンル: <%= @artist.genres.join(", ") %></p>

<h2>アルバム</h2>
<% @artist.albums.each do |album| %>
  <div>
    <h3><%= link_to album.name, album_song_path(album.id) %></h3>
    <% if album.images.any? %>
      <%= image_tag(album.images[0]["url"]) %>
    <% end %>
  </div>
<% end %>

実装は以上です。

参考記事