- Scan ID:
- cc85d485-3c4b-42ce-ae71-c26c17149d03Finished
- Submitted URL:
- https://streamersmusic2.pages.dev/
- Report Finished:
Links · 0 found
The outgoing links identified from the page
JavaScript Variables · 18 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| Telegram | object |
| TelegramGameProxy_receiveEvent | function |
| TelegramGameProxy | object |
| goToMainPage | function |
| searchSongs | function |
| getMediaUrl | function |
| displayResults | function |
Console log messages · 4 found
Messages logged to the web console
| Type | Category | Log |
|---|---|---|
| log | javascript |
|
| log | javascript |
|
| log | other |
|
| log | other |
|
HTML
The raw HTML body of the page
<!DOCTYPE html><html lang="en" style="--tg-viewport-height: 100vh; --tg-viewport-stable-height: 100vh;"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StreamersMusic</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700&display=swap" rel="stylesheet">
<style>
/* Your existing styles here... */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #121212;
color: white;
}
header {
background-color: #1db954;
padding: 15px;
text-align: center;
cursor: pointer; /* Make header clickable */
}
header h1 {
margin: 0;
font-size: 2em;
font-weight: 500;
font-family: 'Oswald', sans-serif; /* Oswald font applied here */
}
#search-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
height: 60vh; /* Ensure it takes up most of the page */
text-align: center;
transition: margin-bottom 0.5s ease; /* Smooth transition */
}
#typewriter {
font-size: 2em;
margin-bottom: 20px;
font-family: 'Oswald', sans-serif;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid orange;
animation: typing 4s steps(14) infinite, blink-caret .75s step-end infinite;
}
@keyframes typing {
0%, 100% { width: 0; }
50% { width: 6.0em; } /* Width adjusted to fit the text without extra spaces */
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: orange; }
}
.search-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px; /* Adds some space between the input and button */
width: 100%;
max-width: 600px; /* Maximum width for larger screens */
transition: opacity 0.5s ease; /* Smooth transition */
}
#search-input {
flex: 1; /* Allows input to take full available width */
padding: 10px;
border-radius: 20px;
border: none;
font-size: 1em;
width: 100%; /* Full width for small screens */
}
button {
padding: 10px 20px;
border-radius: 20px;
border: none;
background-color: #1db954;
color: white;
font-size: 1em;
cursor: pointer;
flex-shrink: 0; /* Prevents button from shrinking */
}
#results {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.song-item {
width: 30%;
background-color: #282828;
padding: 10px;
border-radius: 10px;
cursor: pointer;
text-align: center;
transition: transform 0.2s;
}
.song-item:hover {
transform: scale(1.05);
}
.song-item img {
width: 100%;
border-radius: 10px;
}
.song-item p {
margin: 10px 0;
font-size: 1em;
}
#music-player {
position: fixed;
bottom: 0;
width: 100%;
background-color: #282828;
padding: 10px;
display: none;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
flex-direction: row;
flex-wrap: nowrap;
}
#song-info {
display: flex;
align-items: center;
max-width: 200px;
flex-grow: 1;
}
#song-image {
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 5px;
}
#song-title {
font-size: 1em;
font-weight: bold;
}
#song-artist {
font-size: 0.9em;
color: #b3b3b3;
}
#controls-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: calc(100% - 250px);
}
#controls {
display: flex;
align-items: center;
gap: 10px;
}
#controls button {
background-color: transparent;
border: none;
cursor: pointer;
color: white;
font-size: 1.5em;
}
#controls button img {
width: 24px; /* Adjust the width as necessary */
height: auto; /* This keeps the aspect ratio intact */
}
#progress-container {
display: flex;
align-items: center;
gap: 10px;
flex-grow: 1;
}
#progress {
flex-grow: 1;
height: 5px;
background-color: #535353;
border-radius: 2.5px;
position: relative;
}
#progress-bar {
height: 100%;
background-color: #1db954;
width: 0;
border-radius: 2.5px;
}
#time {
font-size: 0.8em;
width: 50px;
text-align: center;
}
audio {
display: none;
}
@media (max-width: 600px) {
#music-player {
flex-direction: column;
align-items: center;
padding-bottom: 20px;
}
#song-info {
margin-bottom: 10px;
}
#controls-container {
flex-direction: column;
width: 100%;
align-items: center;
padding-top: 10px;
}
#progress-container {
width: 100%;
max-width: none;
justify-content: center;
}
#download-btn {
padding: 10px;
background-color: #1db954;
border: none;
border-radius: 20px;
cursor: pointer;
color: white;
font-size: 16px;
}
}
/* Modal styles */
#modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
padding-top: 60px;
}
#modal-content {
background-color: #1db954;
margin: 5% auto;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 300px;
text-align: center;
color: white;
font-size: 1.2em;
}
</style>
</head>
<body>
<header onclick="goToMainPage()">
<h1>StreamersMusic</h1>
</header>
<div id="search-section">
<div id="typewriter">Feel The Music</div>
<div id="search-container" class="search-container">
<input type="text" id="search-input" placeholder="Search songs...">
<button onclick="searchSongs()">Search</button>
</div>
</div>
<div id="results"></div>
<div id="music-player">
<div id="song-info">
<img id="song-image" src="" alt="Song Image">
<div>
<div id="song-title"></div>
<div id="song-artist"></div>
</div>
</div>
<div id="controls-container">
<div id="controls">
<button onclick="rewind()"><img src="rewind.svg" alt="Rewind"></button>
<button id="play-pause-btn" onclick="togglePlay()"><img src="pause.svg" alt="Play" id="play-pause-icon"></button>
<button onclick="forward()"><img src="forward.svg" alt="Forward"></button>
<button id="download-btn" onclick="sendSongToUser()"><img src="download.svg" alt="Download"></button>
</div>
<div id="progress-container">
<span id="current-time">0:00</span>
<div id="progress">
<div id="progress-bar"></div>
</div>
<span id="duration">0:00</span>
</div>
</div>
<audio id="audio-player" controls=""></audio>
</div>
<!-- Modal -->
<div id="modal">
<div id="modal-content">
<p id="modal-message">Please Wait...</p>
</div>
</div>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>
function goToMainPage() {
window.location.href = 'index.html'; // Change this to your main page URL
}
// Extract user ID
const tg = window.Telegram.WebApp;
const userId = tg.initDataUnsafe?.user?.id;
const BOT_TOKEN = '7477418215:AAEHt6bDwDDKEe-rcxmJGYLYJDAPZVOzV7M'; // Replace with your Telegram bot token
const CORS_PROXY = 'https://cors-proxy.trendyfilms.workers.dev/?url=';
async function searchSongs() {
const query = document.getElementById('search-input').value;
console.log("Query submitted:", query);
const API_URL = "https://www.jiosaavn.com/api.php";
const params = {
p: 1,
q: query,
__call: 'search.getResults',
api_version: 4,
n: 10,
_format: 'json',
_marker: 0,
ctx: 'web6dot0'
};
const PROXY_URL = 'https://cors-proxy.trendyfilms.workers.dev/?url=';
const urlParams = new URLSearchParams(params);
try {
const response = await fetch(`${PROXY_URL}${encodeURIComponent(API_URL + '?' + urlParams.toString())}`, {
method: 'GET'
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log("API Response:", data);
displayResults(data.results || []);
} catch (error) {
console.error('There has been a problem with your fetch operation:', error);
}
}
async function getMediaUrl(songId, encryptedMediaUrl) {
const API_URL = "https://www.jiosaavn.com/api.php";
const params = {
__call: 'song.generateAuthToken',
url: encryptedMediaUrl,
token: songId,
api_version: 4,
_format: 'json',
ctx: 'web6dot0',
_marker: 0
};
const PROXY_URL = 'https://cors-proxy.trendyfilms.workers.dev/?url=';
const urlParams = new URLSearchParams(params);
try {
const response = await fetch(`${PROXY_URL}${encodeURIComponent(API_URL + '?' + urlParams.toString())}`, {
method: 'GET'
});
if (!response.ok) {
throw new Error('Failed to fetch media URL');
}
const data = await response.json();
return data.auth_url; // Assuming the response includes an 'auth_url' key
} catch (error) {
console.error('Error fetching media URL:', error);
return null;
}
}
async function displayResults(songs) {
const container = document.getElementById('results');
const typewriter = document.getElementById('typewriter');
// Hide the typewriter text when results are displayed
if (songs.length > 0) {
typewriter.style.display = 'none';
}
container.innerHTML = '';
songs.forEach(song => {
const songDiv = document.createElement('div');
const poster = song.image.replace('150x150', '500x500');
console.log(poster);
songDiv.className = 'song-item';
songDiv.innerHTML = `
<img src="${poster || 'path/to/default/image.jpg'}" alt="${song.title}">
<p>${song.title}</p>
<p>${song.subtitle}</p>`;
songDiv.onclick = () => openPlayer(song);
container.appendChild(songDiv);
});
}
async function openPlayer(song) {
const player = document.getElementById('music-player');
const audioPlayer = document.getElementById('audio-player');
const songImage = document.getElementById('song-image');
const songTitle = document.getElementById('song-title');
const songArtist = document.getElementById('song-artist');
songImage.src = song.image || 'path/to/default/image.jpg';
songTitle.textContent = song.title;
songArtist.textContent = song.subtitle;
console.log('Fetching media URL for song:', song.title);
if (!song.encrypted_media_url && song.more_info && song.more_info.encrypted_media_url) {
song.encrypted_media_url = song.more_info.encrypted_media_url;
}
if (song.encrypted_media_url) {
const mediaUrl = await getMediaUrl(song.id, song.encrypted_media_url);
console.log('Media URL received:', mediaUrl);
if (mediaUrl) {
const highQualityUrl = mediaUrl.replace('_160.mp4', '_320.mp4');
const highQualityUrl2 = highQualityUrl.replace('https://ac.cf.saavncdn.com', 'https://aac.saavncdn.com');
console.log('High-quality Media URL:', highQualityUrl2);
audioPlayer.src = highQualityUrl2;
audioPlayer.load();
audioPlayer.play().catch(e => {
console.error("Error playing the song:", e);
alert('Playback was prevented. Check browser permissions for autoplay.');
});
} else {
console.log("No media URL available for this song");
}
} else {
console.log('No encrypted_media_url available. Unable to fetch media URL.');
}
player.style.display = 'flex';
}
function togglePlay() {
const audioPlayer = document.getElementById('audio-player');
const playPauseIcon = document.getElementById('play-pause-icon');
if (audioPlayer.paused) {
audioPlayer.play();
playPauseIcon.src = 'pause.svg'; // Change to your pause icon when playing
} else {
audioPlayer.pause();
playPauseIcon.src = 'resume.svg'; // Change back to your play icon when paused
}
}
function rewind() {
const audioPlayer = document.getElementById('audio-player');
audioPlayer.currentTime -= 10;
}
function forward() {
const audioPlayer = document.getElementById('audio-player');
audioPlayer.currentTime += 10;
}
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' + secs : secs}`;
}
const audioPlayer = document.getElementById('audio-player');
const progressBar = document.getElementById('progress-bar');
const currentTimeDisplay = document.getElementById('current-time');
const durationDisplay = document.getElementById('duration');
audioPlayer.addEventListener('timeupdate', () => {
const currentTime = audioPlayer.currentTime;
const duration = audioPlayer.duration;
const progressPercent = (currentTime / duration) * 100;
progressBar.style.width = `${progressPercent}%`;
currentTimeDisplay.textContent = formatTime(currentTime);
durationDisplay.textContent = formatTime(duration);
});
audioPlayer.addEventListener('loadedmetadata', () => {
durationDisplay.textContent = formatTime(audioPlayer.duration);
});
document.getElementById('progress').addEventListener('click', (e) => {
const progress = document.getElementById('progress');
const width = progress.clientWidth;
const clickX = e.offsetX;
const duration = audioPlayer.duration;
audioPlayer.currentTime = (clickX / width) * duration;
});
function showModal(message) {
const modal = document.getElementById('modal');
const modalMessage = document.getElementById('modal-message');
modalMessage.textContent = message;
modal.style.display = 'block';
}
function hideModal() {
const modal = document.getElementById('modal');
modal.style.display = 'none';
}
async function sendSongToUser() {
if (!userId) {
alert('User information not available.');
return;
}
const audioPlayer = document.getElementById('audio-player');
const songTitle = document.getElementById('song-title').textContent;
const songSubtitle = document.getElementById('song-artist').textContent; // New line to get the subtitle
const fileUrl = audioPlayer.src;
const songImage = document.getElementById('song-image').src; // Get the song image URL
showModal('Please Wait...'); // Show the modal with "Please Wait"
try {
const formData = new FormData();
formData.append('userId', userId);
formData.append('songTitle', songTitle);
formData.append('songSubtitle', songSubtitle); // Include the song subtitle
formData.append('songUrl', fileUrl);
formData.append('songImageUrl', songImage); // Include the song image URL
const workerResponse = await fetch('https://streamersmusic-cdn.trendyfilms.workers.dev/send-song', {
method: 'POST',
body: formData,
});
const result = await workerResponse.text();
if (workerResponse.ok) {
showModal('The song was sent successfully! Check your DM.');
} else {
console.error(result);
showModal('Failed to send the song.');
}
} catch (error) {
console.error('Error sending the file:', error);
showModal('Failed to send the song.');
} finally {
setTimeout(hideModal, 3000); // Hide the modal after 3 seconds
}
}
</script>
</body></html>