Skip to content

Commit

Permalink
Hiding the API Key and functionability to use own API key
Browse files Browse the repository at this point in the history
  • Loading branch information
@kunalkcube
kunalkcube committed Nov 4, 2023
1 parent 789d5a0 commit cfb5009
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 74 deletions.
10 changes: 10 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,16 @@ <h1>Find a song</h1>
<!-- Display search or recognition results here -->
</div>
</section>
<div id="apiKeyModal" class="modal">
<div class="modal-content">
<span class="close"><i class="ri-close-line"></i></span>
<h2>Enter Your API Key</h2>
<input type="text" id="apiKeyInput" placeholder="Your API Key">
<button id="apiKeySubmit">Submit</button>
<p>Generate your own API Key from Rapid API Key <a href="https://rapidapi.com/apidojo/api/shazam"><i
class="ri-link"></i></a></p>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
Expand Down
185 changes: 111 additions & 74 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,39 @@ document.addEventListener('DOMContentLoaded', function () {
buttonIcon.classList.toggle('ri-menu-4-fill');
});

// Function to open the API key modal
function openApiKeyModal() {
const apiKeyModal = document.getElementById('apiKeyModal');
apiKeyModal.style.display = 'flex';

// Close the modal when the close button is clicked
const closeBtn = document.querySelector('.close');
closeBtn.addEventListener('click', function () {
apiKeyModal.style.display = 'none';
});

// Handle API key submission
const apiKeySubmitBtn = document.getElementById('apiKeySubmit');
apiKeySubmitBtn.addEventListener('click', function () {
const apiKeyInput = document.getElementById('apiKeyInput');
const apiKeyValue = apiKeyInput.value.trim();

if (apiKeyValue) {
// Save the API key in localStorage
localStorage.setItem('apiKey', apiKeyValue);

// Close the modal
apiKeyModal.style.display = 'none';
}
});
}

// Check if API key is already set in localStorage
const apiKey = localStorage.getItem('apiKey');
if (!apiKey) {
openApiKeyModal();
}

// Music search functionality
const searchInput = document.getElementById('search_input');
const searchButton = document.getElementById('search_button');
Expand All @@ -19,85 +52,89 @@ document.addEventListener('DOMContentLoaded', function () {
if (query !== '') {
// Construct the Shazam API URL with the user's query
const apiUrl = `https://shazam.p.rapidapi.com/search?term=${encodeURIComponent(query)}`;
const apiKey = '6f458f333amsh2bd68b4bc01ad26p1efff8jsn57139ab6c0bc'; // Replace with your RapidAPI key

const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': 'shazam.p.rapidapi.com',
},
};

fetch(apiUrl, options)
.then((response) => response.json())
.then((data) => {
const track = data.tracks.hits[0].track;
resultsSection.innerHTML = `
<h2>${track.title}</h2>
<span class="artist">${track.subtitle}</span>
<div class="image">
<img src="${track.images.coverart}" alt="${track.title} cover">
</div>
<div class="music_player">
<audio id="audio" src="${track.hub.actions[1].uri}"></audio>
<div class="progress_container">
<div id="progress_bar" class="progress_bar"></div>
</div>
<div class="song_time">
<span id="current_time">0:00</span>
<span id="total_time">0:00</span>
const apiKey = localStorage.getItem('apiKey'); // Retrieve the API key from localStorage

if (!apiKey) {
openApiKeyModal();
} else {
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': apiKey,
'X-RapidAPI-Host': 'shazam.p.rapidapi.com',
},
};

fetch(apiUrl, options)
.then((response) => response.json())
.then((data) => {
const track = data.tracks.hits[0].track;
resultsSection.innerHTML = `
<h2>${track.title}</h2>
<span class="artist">${track.subtitle}</span>
<div class="image">
<img src="${track.images.coverart}" alt="${track.title} cover">
</div>
<div class="player_controls">
<button id="play_pause_button" class="play"><i class="ri-play-line"></i></button>
<a href="${track.hub.actions[1].uri}" download><i class="ri-download-cloud-line"></i></a>
<div class="music_player">
<audio id="audio" src="${track.hub.actions[1].uri}"></audio>
<div class="progress_container">
<div id="progress_bar" class="progress_bar"></div>
</div>
<div class="song_time">
<span id="current_time">0:00</span>
<span id="total_time">0:00</span>
</div>
<div class="player_controls">
<button id="play_pause_button" class="play"><i class="ri-play-line"></i></button>
<a href="${track.hub.actions[1].uri}" download><i class="ri-download-cloud-line"></i></a>
</div>
</div>
</div>
`;
resultsSection.style.display = 'flex';

// Audio player control logic
const audio = document.getElementById("audio");
const playPauseButton = document.getElementById("play_pause_button");
const playPauseButtonIcon = document.querySelector("#play_pause_button i");
const progressBar = document.getElementById("progress_bar");
const currentTimeDisplay = document.getElementById("current_time");
const totalTimeDisplay = document.getElementById("total_time");

playPauseButton.addEventListener("click", function () {
if (audio.paused) {
audio.play();
playPauseButtonIcon.classList.remove('ri-play-line');
playPauseButtonIcon.classList.add('ri-pause-line');
} else {
audio.pause();
playPauseButtonIcon.classList.remove('ri-pause-line');
playPauseButtonIcon.classList.add('ri-play-line');
}
});
`;
resultsSection.style.display = 'flex';

audio.addEventListener("timeupdate", function () {
const currentTime = audio.currentTime;
const duration = audio.duration;
const progress = (currentTime / duration) * 100;
progressBar.style.width = progress + "%";
// Audio player control logic
const audio = document.getElementById("audio");
const playPauseButton = document.getElementById("play_pause_button");
const playPauseButtonIcon = document.querySelector("#play_pause_button i");
const progressBar = document.getElementById("progress_bar");
const currentTimeDisplay = document.getElementById("current_time");
const totalTimeDisplay = document.getElementById("total_time");

// Update current time and total time display
currentTimeDisplay.textContent = formatTime(currentTime);
totalTimeDisplay.textContent = formatTime(duration);
});
playPauseButton.addEventListener("click", function () {
if (audio.paused) {
audio.play();
playPauseButtonIcon.classList.remove('ri-play-line');
playPauseButtonIcon.classList.add('ri-pause-line');
} else {
audio.pause();
playPauseButtonIcon.classList.remove('ri-pause-line');
playPauseButtonIcon.classList.add('ri-play-line');
}
});

// Format time in minutes and seconds
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${(seconds < 10 ? "0" : "")}${seconds}`;
}
})
.catch((error) => {
console.error(error);
resultsSection.innerHTML = 'Error occurred while searching for music.';
});
audio.addEventListener("timeupdate", function () {
const currentTime = audio.currentTime;
const duration = audio.duration;
const progress = (currentTime / duration) * 100;
progressBar.style.width = progress + "%";

// Update current time and total time display
currentTimeDisplay.textContent = formatTime(currentTime);
totalTimeDisplay.textContent = formatTime(duration);
});

// Format time in minutes and seconds
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${(seconds < 10 ? "0" : "")}${seconds}`;
}
})
.catch((error) => {
console.error(error);
resultsSection.innerHTML = 'Error occurred while searching for music.';
});
}
}
});

Expand Down
76 changes: 76 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -367,4 +367,80 @@ body {
font-size: 14px;
font-weight: 600;
color: #333333;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
z-index: 999;
justify-content: center;
align-items: center;
}

.modal-content {
background-color: #f8f8f8;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 95%;
max-width: 400px;
}

.close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
font-size: 18px;
font-weight: 600;
color: #ebebeb;
}

h2 {
font-size: 20px;
margin-bottom: 10px;
color: #333;
}

#apiKeyInput {
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}

#apiKeySubmit {
background: linear-gradient(320deg, #7C84F3, #FF4DD2, #FF993B, #FF4DD2, #7C84F3, #FF4DD2, #FF993B);
background-size: 600% 600%;
animation: gradientAnimation 20s linear infinite;
color: #f8f8f8;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
font-weight: 600;
}

#apiKeyModal p {
font-size: 14px;
color: #333333;
margin-top: 15px;
}

#apiKeyModal p a {
text-decoration: none;
color: #FF4DD2;
}

#apiKeyModal p a i {
font-size: 18px;
font-weight: 600;
}

0 comments on commit cfb5009

Please sign in to comment.