実現したいこと
SpotifyのAPIを使って、おすすめの曲をHTMLの画面に表示させたいです。
詳細
HTMLにSpotifyAPIからデータを持ってきて、ロック、J-POPなどジャンルごとのおすすめの曲を表示させるということを実現したいです。HTML外部でjavascriptを読み込み、作成しています。
＃＃＃わからないこと
Spotifyから画像のサンプルを取得し表示することはできたのですが、APIから持ってくる画像のジャンルとおすすめの曲を字javascript内で指定する方法が分かりません
ソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>チェックリスト</title> 8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 9 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 10 11 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 12 <link rel="stylesheet" type="text/css" 13 href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-7/css/6-1-7.css"> 14 15 <link rel="stylesheet" type="text/css" href="check.css"> 16</head> 17 18<body class="box"> 19 20 <div class ="API"> 21 22 <ul class="slider"> 23 24 <li><img src=https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228 id="Genre"></img></li> 25 <li><img src=https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228></img></li> 26 <li><img src=https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228></img></li> 27 <li><img src=https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228></img></li> 28 <li><img src=https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228></img></li> 29 </ul> 30 </div> 31 32 </div> 33 34 <script src="https://code.jquery.com/jquery-3.4.1.min.js" 35 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 36 <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 37 <script src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-7/js/6-1-7.js"></script> 38 <script src="check.js"></script> 39 40 41</body> 42 43</html>
javascript
1const API = (function() {2 3 const clientId = '0e7da566531a4f218fc28c8daec2495b';4 const clientSecret = '8962bd04aa2847e285623391f195c49b';5 6 const image=document.getElementById(image);7 8 9 const _getToken = async () => {10 11 const result = await fetch('https://accounts.spotify.com/api/token', {12 method: 'POST',13 headers: {14 'Content-Type' : 'application/x-www-form-urlencoded', 15 'Authorization' : 'Basic ' + btoa(clientId + ':' + clientSecret)16 },17 body: 'grant_type=client_credentials'18 });19 20 const data = await result.json();21 return data.access_token;22 }23 24 const _getGenres = async (token) => {25 26 const result = await fetch(`https://api.spotify.com/v1/browse/categories?locale=sv_US`, {27 method: 'GET',28 headers: { 'Authorization' : 'Bearer ' + token}29 });30 31 const data = await result.json();32 return data.categories.items;33 }34 35 36 const _getPlaylistByGenre = async (token, genreId) => {37 38 const limit = 10;39 40 41 const result = await fetch(`https://api.spotify.com/v1/browse/categories/${genreId}/playlists?limit=${limit}`, {42 method: 'GET',43 headers: { 'Authorization' : 'Bearer ' + token}44 });45 46 const data = await result.json();47 return data.playlists.items;48 }49 50 51 const _getTracks = async (token, tracksEndPoint) => {52 53 const limit = 10;54 55 const result = await fetch(`${tracksEndPoint}?limit=${limit}`, {56 method: 'GET',57 headers: { 'Authorization' : 'Bearer ' + token}58 });59 60 const data = await result.json();61 return data.items;62 }63 64 const _getTrack = async (token, trackEndPoint) => {65 66 const result = await fetch(`${trackEndPoint}`, {67 method: 'GET',68 headers: { 'Authorization' : 'Bearer ' + token}69 });70 71 const data = await result.json();72 return data;73 }74 75 return {76 getToken() {77 return _getToken();78 },79 getGenres(token) {80 return _getGenres(token);81 },82 getPlaylistByGenre(token, genreId) {83 return _getPlaylistByGenre(token, genreId);84 },85 getTracks(token, tracksEndPoint) {86 return _getTracks(token, tracksEndPoint);87 },88 getTrack(token, trackEndPoint) {89 return _getTrack(token, trackEndPoint);90 }91 }92})();93
0 コメント