async function processImage(originalImg, fallbackSearchQuery = "Blinding Lights The Weeknd") {
// 1. Dynamically load jsQR library for image scanning/identification
if (typeof window.jsQR === 'undefined') {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js';
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
// 2. Setup the main UI container to return
const container = document.createElement('div');
container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
container.style.padding = '20px';
container.style.border = '1px solid #e2e8f0';
container.style.borderRadius = '12px';
container.style.maxWidth = '500px';
container.style.background = 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)';
container.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
container.style.color = '#1e293b';
const title = document.createElement('h3');
title.textContent = '🎵 Audio Identifier & MP3 Downloader';
title.style.margin = '0 0 15px 0';
title.style.color = '#0f172a';
title.style.borderBottom = '2px solid #cbd5e1';
title.style.paddingBottom = '10px';
container.appendChild(title);
// 3. Scan the image for a QR Code containing a song name
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = originalImg.width;
canvas.height = originalImg.height;
ctx.drawImage(originalImg, 0, 0);
let searchQuery = fallbackSearchQuery;
let qrDetected = false;
try {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const code = window.jsQR(imageData.data, canvas.width, canvas.height);
if (code && code.data) {
searchQuery = code.data.trim();
qrDetected = true;
}
} catch (e) {
console.warn("Could not parse image data for QR scanning.", e);
}
const statusMsg = document.createElement('div');
statusMsg.style.marginBottom = '20px';
statusMsg.style.fontSize = '14px';
statusMsg.style.padding = '10px';
statusMsg.style.borderRadius = '6px';
statusMsg.style.backgroundColor = qrDetected ? '#dcfce7' : '#fef9c3';
statusMsg.style.color = qrDetected ? '#166534' : '#854d0e';
statusMsg.innerHTML = qrDetected
? `<strong>✅ Image Scanned!</strong> Identified Request: <em>"${searchQuery}"</em>`
: `<strong>⚠️ No Song QR Code Found in Image.</strong><br>Proceeding with fallback demo search: <em>"${searchQuery}"</em>`;
container.appendChild(statusMsg);
// 4. Fetch Song Metadata and MP3 via iTunes Search API
try {
const itunesRes = await fetch(`https://itunes.apple.com/search?term=${encodeURIComponent(searchQuery)}&entity=song&limit=1`);
const itunesData = await itunesRes.json();
if (!itunesData.results || itunesData.results.length === 0) {
const noResult = document.createElement('p');
noResult.textContent = "❌ No song found for this query.";
noResult.style.color = '#ef4444';
container.appendChild(noResult);
return container;
}
const track = itunesData.results[0];
const artistName = track.artistName;
const trackName = track.trackName;
const previewUrl = track.previewUrl;
const artworkUrl = track.artworkUrl100 ? track.artworkUrl100.replace('100x100', '200x200') : '';
// Track Info UI
const header = document.createElement('div');
header.style.display = 'flex';
header.style.alignItems = 'center';
header.style.gap = '15px';
header.style.marginBottom = '20px';
if (artworkUrl) {
const art = document.createElement('img');
art.src = artworkUrl;
art.style.width = '90px';
art.style.height = '90px';
art.style.borderRadius = '8px';
art.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
header.appendChild(art);
}
const info = document.createElement('div');
info.innerHTML = `
<h2 style="margin:0 0 5px 0; font-size: 1.25rem; color:#0f172a;">${trackName}</h2>
<h4 style="margin:0; font-size: 1rem; color:#64748b; font-weight: normal;">${artistName}</h4>
<p style="margin:5px 0 0 0; font-size: 12px; color:#94a3b8;">${track.collectionName || ''}</p>
`;
header.appendChild(info);
container.appendChild(header);
// Audio Player and Downloader
if (previewUrl) {
const audio = document.createElement('audio');
audio.controls = true;
audio.src = previewUrl;
audio.style.width = '100%';
audio.style.marginBottom = '15px';
audio.style.outline = 'none';
container.appendChild(audio);
const downloadBtn = document.createElement('a');
downloadBtn.href = previewUrl;
downloadBtn.download = `${artistName} - ${trackName}.mp3`;
downloadBtn.target = '_blank'; // Ensuring download/save-as fallback capability
downloadBtn.innerHTML = `
<svg style="width:16px; height:16px; fill:currentColor; margin-right:8px;" viewBox="0 0 24 24">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</svg>
Download MP3 File
`;
downloadBtn.style.display = 'inline-flex';
downloadBtn.style.alignItems = 'center';
downloadBtn.style.justifyContent = 'center';
downloadBtn.style.width = '100%';
downloadBtn.style.padding = '12px 15px';
downloadBtn.style.backgroundColor = '#3b82f6';
downloadBtn.style.color = '#fff';
downloadBtn.style.textDecoration = 'none';
downloadBtn.style.borderRadius = '8px';
downloadBtn.style.marginBottom = '25px';
downloadBtn.style.fontWeight = 'bold';
downloadBtn.style.boxSizing = 'border-box';
downloadBtn.style.transition = 'background-color 0.2s';
// Hover effect mock
downloadBtn.onmouseover = () => downloadBtn.style.backgroundColor = '#2563eb';
downloadBtn.onmouseout = () => downloadBtn.style.backgroundColor = '#3b82f6';
container.appendChild(downloadBtn);
}
// 5. Fetch and Display Song Lyrics via LRCLIB public API
const lyricsTitle = document.createElement('h4');
lyricsTitle.textContent = '📝 Lyrics';
lyricsTitle.style.margin = '0 0 10px 0';
container.appendChild(lyricsTitle);
const lyricsContainer = document.createElement('div');
lyricsContainer.style.background = '#ffffff';
lyricsContainer.style.padding = '15px';
lyricsContainer.style.borderRadius = '8px';
lyricsContainer.style.border = '1px solid #e2e8f0';
lyricsContainer.style.whiteSpace = 'pre-wrap';
lyricsContainer.style.fontFamily = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace';
lyricsContainer.style.fontSize = '13px';
lyricsContainer.style.color = '#334155';
lyricsContainer.style.maxHeight = '250px';
lyricsContainer.style.overflowY = 'auto';
lyricsContainer.style.lineHeight = '1.6';
lyricsContainer.textContent = "⏳ Fetching lyrics for this track...";
container.appendChild(lyricsContainer);
try {
const lrclibRes = await fetch(`https://lrclib.net/api/search?q=${encodeURIComponent(trackName + ' ' + artistName)}`);
if (lrclibRes.ok) {
const lyricsData = await lrclibRes.json();
if (lyricsData && lyricsData.length > 0 && lyricsData[0].plainLyrics) {
lyricsContainer.textContent = lyricsData[0].plainLyrics;
} else {
lyricsContainer.textContent = "❌ Lyrics not found in the public database for this song.";
lyricsContainer.style.color = '#64748b';
}
} else {
lyricsContainer.textContent = "❌ Lyrics service is currently unavailable.";
}
} catch (err) {
lyricsContainer.textContent = "❌ Network error occurred while fetching lyrics.";
}
} catch (error) {
const errEl = document.createElement('p');
errEl.textContent = `❌ Error analyzing audio data: ${error.message}`;
errEl.style.color = '#ef4444';
errEl.style.fontWeight = 'bold';
container.appendChild(errEl);
}
return container;
}This tool allows users to identify songs and retrieve musical information by scanning images for QR codes. When a QR code containing song details is detected, the tool automatically searches for the corresponding track, displaying its metadata, artwork, and lyrics. Additionally, users can listen to a song preview and download the MP3 file. This is useful for quickly finding music information from posters, digital media, or shared images and obtaining lyrics for sing-alongs.