Kpop Music Site!
Group Project for tri3!
Links
Collaborators
- Charlie Zhu ID: #72889453
- Komay Sugiyama ID: #30739783
- Chris Rubin ID: #72892271
- Devam Shrivastava ID: #51984972
- Eshaan Parlikar ID: #32022538
How It's Made
Theme Section (5pt)
- Find Similar Songs Page (+0.5pt User interaction, +0.5pt Technical, +1pt Fun)
- This page demonstrates usage and display of online APIs that take parametrs
- User can input an Artist and the Track name as well as how they want the list sorted. The response displays song cards that the user can listen to. These cares provide info such as wear to listen and popularity info.
- As a music-focused site, this page helps users find new songs if they ever want new songs that are similar to the ones they are currently listening to
- Home page (+0.5pt*2 User interaction, +0.5pt Technical, +1pt Fun)
- Source Code Bootstrap use.
- Has TWO user interactions. One, users can submit links to their spotify playlist that they want to share with the world.
- Two, they can browse through other users' random submitted spotify playlists with the click of a button
- Using jquery GET requests to our own API endpoint, we avoid having to refresh the page for new playlists by dynamically editing the DOM
- This relates to the theme as it allows users to share music with the world
- Database (+0.5pt Technical)
- OUR API (+0.5 Technical)
- Serves data that drives our site, devs can access all user submitted data/playlists with a plethora of different endpoints.
- 5 different endpoints. backend code
- Serves as our API that other teams can use for crossover
Individual Section (4.5pt)
- Blueprints (+4pt 4 labs)
- Each folder is labled with the corresponding member to indicate their individual blueprint
- Technicals (+1pt 2 Technicals)
- Each minilab utilizes classes in order to pass in parameters that cause different functions to run
-
API Section (4pt)
- API Endpoints (+2 Receiving API, +2 Developing own endpoints)
-
- Source Code
- API serves data that drives our site to anyone in the form of JSON
- API for finding songs is used here and song data is stored as a class attribute in a jinja variable
- Jinja variables are then displayed on the front end here
- We used our own API a lot of the times when using jquery ajax
Deployment Section (5pt)
- How It's Made section (+2pt How Its Made, +1pt Visuals)
- Located in readme, section is labled How Its Made, is what you are currently looking at
- Commercial (+2pt)
- LINK TO VIDEO
Code Explanations
Home page: Displays random user submitted playlists on button click (Komay)
- Link to RUNTIME
- Link to html and js code
<div class="container justify-content-start" style="margin-right: -25%; padding-right:-35%; margin-top: 2%; margin-bottom: 1%;">
<button onclick="getPlaylist()" type="button" class="btn btn-info">Get random playlist</button>
</div>
<script>
const getPlaylist = () => {
$.getJSON('{{websiteurl}}' + '/api/playlists/random', (data) => {
document.getElementById("playlist_credits_text").innerHTML = data.username
document.getElementById("playlist_name").innerHTML = data.playlistname
//document.getElementById("playlist_text").href = data.url
document.getElementById("playlist_text").innerHTML = data.url
document.getElementById("playlist_id").innerHTML = "Playlist ID: " + data.id
console.log(data)
});
}
const ee = () => {
console.log('ee')
}
console.log('hi')
function Open() {
window.open(document.getElementById("playlist_text").innerHTML, "_blank");
}
</script>
Finding similar song recommendations [API USE!] (Komay)
API use Code
import requests
import json
import os
# http://ws.audioscrobbler.com/2.0/?method=track.getsimilar&artist=official+hige+dandism&track=pretender&api_key=630846faaf3ca8d5cf4d712e56bd4989&format=json
class Song:
"""Initializer of class takes song info parameters and returns Class Object"""
def __init__(self, artist, song, sorttype):
self._artist = artist
self._song = song
self._sorttype = sorttype
@property
def similar_songs_list(self):
artist_query_name = self._artist.replace(' ', '+')
song_query_name = self._song.replace(' ', '+')
response = requests.get('http://ws.audioscrobbler.com/2.0/?method=track.getsimilar&artist=' + artist_query_name + '&track=' + song_query_name + '&api_key=630846faaf3ca8d5cf4d712e56bd4989&format=json')
res = response.json()
res_array = []
if 'similartracks' in res:
for song in res['similartracks']['track']:
res_array.append(song)
if (self._sorttype == 'playcount'):
res_array.sort(key=lambda x: x['playcount'], reverse=True)
if (self._sorttype == 'alphabetical'):
res_array.sort(key=lambda x: x['name'])
if self._sorttype == 'similarity':
res_array = res_array
print(self._sorttype)
return res_array
else:
return [ {
"name": "Check your parameters again",
"playcount": 0,
"match": 0,
"url": "https://www.last.fm/music/Official+HIGE+DANdism/_/Shukumei",
"artist": {
"name": "Invalid Artist Link",
"url": "https://www.last.fm/music/Official+HIGE+DANdism"
},
}]
Home Page CSS(Chris)
- This code shows the backend of the form on the home page of the kpop website, which users can see results on anohter part of the index page
- runtime
- Link for homepage playlist submit form
@app.route('/', methods=["POST", 'GET'])
def index():
background = random.choice(backgrounds)
if request.method == "POST":
playlistname = request.form["playlistname"]
username = request.form["username"]
if username == "mort":
return render_template('aboutus.html')
url = request.form["url"]
submit = Playlist(playlistname=playlistname, username=username, url=url)
db.session.add(submit)
db.session.commit()
return render_template("index.html", background=background, websiteurl=config['websiteURL'])
About The Creators (Charlie)
Charlie Zhu
"I am a junior at Del Norte High School. I was born in San Diego
and am currently 16 years old. I have an older sister who is in college.
Some things I like to do in my free time are play video games and run."
Komay Sugiyama
"I am a 17 year old Junior at Del Norte High School. I also really like music. My favorite geners are R&B, Jazz, jpop, kpop, indie, rock, funk, soul and hiphop. My favorite band is Official HIGE DANdism, you should check them out too"
Devam Shrivastava
"I am a junior at Del Norte High School. I am 17 years old and I was born in Scripps Ranch. In my free time I like to watch anime and play video games with my friends. My favorite anime is Jujutsu Kaisen."
Chris Rubin
"I am a junior at Del Norte High School. I am 18 years old and I was born in Pomerado. I have 10 siblings, 6 sisters and 4 brothers. Four of them have graduated from college and two of them are in college currently. In my free time I like playing video games, hanging out with friends, skateboarding, watching anime, and my favorite anime is Black Clover."
Eshaan Parlikar
"I am a 17 year old junior at Del Norte High School who was born in San Diego. I have two older sisters, one who currently attends Abraxas and the other recently graduating from NYU with a politics major. Currently, I enjoy playing video games and drumming, and my favorite anime is Fullmetal Alchemist: Brotherhood."