An error occurred
+ + \ No newline at end of file diff --git a/public/home.html b/public/home.html new file mode 100644 index 00000000..3a059247 --- /dev/null +++ b/public/home.html @@ -0,0 +1,133 @@ + + + + + +badUsernameZQFMGB
+-1
+-1
+-1
+ + + + + + diff --git a/public/images/emptystar.png b/public/images/emptystar.png new file mode 100644 index 00000000..e736b1c5 Binary files /dev/null and b/public/images/emptystar.png differ diff --git a/public/images/favicon.ico b/public/images/favicon.ico new file mode 100644 index 00000000..ab06a32f Binary files /dev/null and b/public/images/favicon.ico differ diff --git a/public/images/music.png b/public/images/music.png new file mode 100644 index 00000000..81f9f748 Binary files /dev/null and b/public/images/music.png differ diff --git a/public/images/pause.png b/public/images/pause.png new file mode 100644 index 00000000..383ebbd3 Binary files /dev/null and b/public/images/pause.png differ diff --git a/public/images/play.png b/public/images/play.png new file mode 100644 index 00000000..8b94fbc3 Binary files /dev/null and b/public/images/play.png differ diff --git a/public/images/purplestar.png b/public/images/purplestar.png new file mode 100644 index 00000000..2d2176a4 Binary files /dev/null and b/public/images/purplestar.png differ diff --git a/public/images/songnotfound.png b/public/images/songnotfound.png new file mode 100644 index 00000000..b477b7eb Binary files /dev/null and b/public/images/songnotfound.png differ diff --git a/public/js/audioVisualizer.js b/public/js/audioVisualizer.js new file mode 100644 index 00000000..d2cb0264 --- /dev/null +++ b/public/js/audioVisualizer.js @@ -0,0 +1,109 @@ +let timeout; + +function trackInfo() { + let analysis + let scene, camera, renderer, mesh1, mesh2, mesh3, mesh4; + let numArray = []; + let confidence = 1; + (async () => { + const rawResponse = await fetch('/trackAnalysis', { + method: 'GET' + }) + const audioAnalysis = await rawResponse.json() + analysis = audioAnalysis.body + let track = audioAnalysis.body.track + let beats = audioAnalysis.body.beats + + function randomNumber(min, max) { + return Math.floor(Math.random() * (max - min) + min); + } + + const randomNum = function () { + for (let i = 0; i < beats.length; i++) { + numArray.push(randomNumber(65, 93)) + } + } + randomNum() + + const init = function () { + scene = new THREE.Scene() + camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000) + + renderer = new THREE.WebGLRenderer({antialias: true}) + renderer.setSize(window.innerWidth, window.innerHeight) + + $(".background").append(renderer.domElement) + + const light = new THREE.PointLight("white", 1.5, 100) + light.position.set(10, 1, 10); + + scene.add(light) + + const light2 = new THREE.PointLight("white", 1.5, 100) + light2.position.set(35, 20, 50) + scene.add(light2); + + const ambLight = new THREE.AmbientLight("white", 0.3, 100) + ambLight.position.set(5, 3, 100) + scene.add(ambLight); + + const geometry = new THREE.IcosahedronGeometry(7); + const material = new THREE.MeshLambertMaterial({color: "#FE3B53"}) + + mesh1 = new THREE.Mesh(geometry, material) + mesh2 = new THREE.Mesh(geometry, material) + mesh3 = new THREE.Mesh(geometry, material) + mesh4 = new THREE.Mesh(geometry, material) + + mesh1.scale.set(3, 3, 3) + mesh2.scale.set(3, 3, 3) + mesh3.scale.set(3, 3, 3) + mesh4.scale.set(3, 3, 3) + + + const randomPosPerSec = () => { + for (let i = 0; i < beats.length; i++) { + timeout = setTimeout(() => { //stores previous number to go to next number + + mesh1.position.x = (beats[i].confidence) * numArray[i] * 1.7 + mesh2.position.y = (beats[i].confidence) * numArray[i] * 1.2 + mesh3.position.z = (beats[i].confidence) * numArray[i] * 1.7 + mesh4.position.y = -1 * (beats[i].confidence) * numArray[i] * 1.2 + }, i * ((1 / (track.tempo / 60) * 1000))) //beats per ms + } + } + + randomPosPerSec() + + scene.add(mesh1, mesh2, mesh3, mesh4) + + } + const animate = function () { + requestAnimationFrame(animate); + + mesh1.rotation.z += track.tempo_confidence / 10 + mesh2.rotation.y += track.tempo_confidence / 10 + mesh3.rotation.x += track.tempo_confidence / 10 + mesh4.rotation.z += track.tempo_confidence / 10 + + camera.position.x = 150 + camera.position.z = 150 + + camera.lookAt(scene.position); + + renderer.render(scene, camera); + } + const windowResize = function () { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight) + } + + window.addEventListener('resize', windowResize, false); + + init(); + animate(); + })() +} + +trackInfo() diff --git a/public/js/createPlayer.js b/public/js/createPlayer.js new file mode 100644 index 00000000..12135f6a --- /dev/null +++ b/public/js/createPlayer.js @@ -0,0 +1,144 @@ +const clientId = 'f250b3f0ce604150b056707b8e25a328' +const redirectUri = 'http://localhost:3000' +const scopes = [ + 'streaming', + 'user-read-birthdate', + 'user-read-private', + 'user-modify-playback-state' +] +let _token +let player +let playerData +let currentTrackID = "3n3Ppam7vgaVa1iaRUc9Lp" +let currentlyPlaying = true +let interval + +window.onSpotifyPlayerAPIReady = () => { + createPlayerForSong(currentTrackID) +} + +function createPlayerForSong(track) { + fetch('/token', { + method: 'GET' + }).then(response => { + return response.json().then(response => { + console.log(response.token) + _token = response.token + player = new Spotify.Player({ + name: 'Web Playback SDK Template', + getOAuthToken: cb => { + cb(_token) + } + }) + // Error handling + player.on('initialization_error', e => console.error(e)) + player.on('authentication_error', e => console.error(e)) + player.on('account_error', e => console.error(e)) + player.on('playback_error', e => console.error(e)) + + // Playback status updates + player.on('player_state_changed', state => { + if (state != null) { + $('#current-track').attr('src', state.track_window.current_track.album.images[0].url) + $('#current-track-name').text(state.track_window.current_track.name) + $('#current-track-artist').text(state.track_window.current_track.artists[0].name) + } + + }) + + // Ready + player.on('ready', data => { + playerData = data + // Play a track using our new device ID + getAudio(data.device_id) + }) + + // Connect to the player! + player.connect() + + // Play a specified track on the Web Playback SDK's device ID + function getAudio(device_id) { + $.ajax({ + url: "https://api.spotify.com/v1/me/player/play?device_id=" + device_id, + type: "PUT", + data: '{"uris": ["spotify:track:' + track + '"]}', + beforeSend: function (xhr) { + xhr.setRequestHeader('Authorization', 'Bearer ' + _token) + }, + success: function (data) { + /*console.log(data)*/ + } + }) + } + }) + } + ) +} + +function turningRecord(turn) { + let counter = 0 + if (turn) { + interval = setInterval(function () { + counter -= 1 + $("#current-track").css({ + MozTransform: 'rotate(-' + -counter + 'deg)', + WebkitTransform: 'rotate(' + -counter + 'deg)', + transform: 'rotate(' + -counter + 'deg)' + }) + + }, 10) + } else { + clearInterval(interval) + } +} + +turningRecord(currentlyPlaying) + +function togglePlayPause() { + currentlyPlaying = !currentlyPlaying + if (!currentlyPlaying) { + $("canvas").remove() + } else { + trackInfo() + } + turningRecord(currentlyPlaying) + player.togglePlay() + let playPauseButton = document.getElementById("play-pause-button-player"); + let imageSrc = playPauseButton.getAttribute('src') + if (imageSrc === "images/play.png") { + playPauseButton.setAttribute('src', "images/pause.png"); + } else if (imageSrc === "images/pause.png") { + playPauseButton.setAttribute('src', "images/play.png"); + } +} + +function playSomeTrackID(track) { + if (currentlyPlaying) { + let playPauseButton = document.getElementById("play-pause-button"); + playPauseButton.setAttribute('src', "images/pause.png"); + } + + updateCurrentTrack(track) + player.disconnect() + createPlayerForSong(currentTrackID) + if (!currentlyPlaying) { + currentlyPlaying = true + turningRecord(currentlyPlaying) + } +} + +function updateCurrentTrack(track) { + $("canvas").remove() + currentTrackID = track + const json = {track: currentTrackID} + fetch('/currentTrack', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(json) + }) + clearTimeout(timeout) + trackInfo() +} diff --git a/public/js/home.js b/public/js/home.js new file mode 100644 index 00000000..364304b8 --- /dev/null +++ b/public/js/home.js @@ -0,0 +1,129 @@ +const MAXIMUM_ENTRIES_LOADED = 25 +const addRecBtn = document.getElementById("add-rec-btn") +const list = document.getElementById("recommendation-list") +const recText = document.getElementById("caption-text-area") +let username = "badUsernameZQFMGB" + +const addRecommendation = function () { + let rating = -1 + if (document.getElementById("star5").checked) rating = 5 + else if (document.getElementById("star4").checked) rating = 4 + else if (document.getElementById("star3").checked) rating = 3 + else if (document.getElementById("star2").checked) rating = 2 + else if (document.getElementById("star1").checked) rating = 1 + else return false + + if (rating === -1) return false + if (username === "badUsernameZQFMGB") return false + let songID = document.getElementById("secretSongID").innerHTML + if (songID === "-1") return + let songname = document.getElementById("secretSongName").innerHTML + if (songname === "-1") return + let artist = document.getElementById("secretArtist").innerHTML + if (artist === "-1") return + const newRecommendation = { + username: username, + songid: songID, + rating: rating, + caption: recText.value, + songname: songname, + artist: artist + } + + const body = JSON.stringify(newRecommendation) + fetch("/recommendation", { + method: "POST", + body, + headers: { + 'Content-Type': 'application/json' + } + }).then(() => { + document.getElementById("secretSongID").innerHTML = "-1" + document.getElementById("secretArtist").innerHTML = "-1" + document.getElementById("secretSongName").innerHTML = "-1" + getRecommendations() + }) + + document.getElementById("star5").checked = false; + document.getElementById("star4").checked = false; + document.getElementById("star3").checked = false; + document.getElementById("star2").checked = false; + document.getElementById("star1").checked = false; + document.getElementById("songName").value = ""; + recText.setAttribute('placeholder', "Write a note about the song here"); + recText.value = ""; + $("#songsTbody").empty(); +} + +const getUser = function () { + (async () => { + const rawResponse = await fetch('/user', { + method: 'GET' + }) + let usr = await rawResponse.json() + username = usr.user.username + document.getElementById("secretUsername").innerHTML = username + document.getElementById("logoutLink").innerHTML = "Log out " + username + })() +} + +const getRecommendations = function () { + (async () => { + const rawResponse = await fetch('/recommendation', { + method: 'GET' + }) + let res = await rawResponse.json() + + let numEntries = res.length + if (numEntries > MAXIMUM_ENTRIES_LOADED) numEntries = MAXIMUM_ENTRIES_LOADED + + if (numEntries === 0) { + list.innerHTML = + `No recommendations found
\n` + + ``
+
+ for (let j = 0; j < rating; j++)
+ newRecommendation += `
`
+ for (let j = rating; j < 5; j++)
+ newRecommendation += `
`
+
+ newRecommendation += `
` + "\"" + caption + "\"" + `
\n` + + `` + songid + `
\n` + + ` ` + `\n` + + `
+
+