Skip to main content

​
Get Started with MYMUSICK

This guide will walk you through setting up MYMUSICK locally and making your first music search.
1

Clone or Download the Repository

Download the MYMUSICK source code to your local machine:
# Clone the repository (if using git)
git clone <repository-url>
cd mymusick

# Or download and extract the ZIP file
MYMUSICK is a client-side web application - no build process or installation required!
2

Understand the File Structure

The MYMUSICK project has a simple, organized structure:
mymusick/
├── index.html              # Main application file
├── estilooriginal.css      # Core styling and theme
├── img/
│   └── Logo.png           # Application logo
└── fonts/
    └── gyanko-regular.otf # Custom Gyanko font
Key Files:
  • index.html - Contains all the HTML structure, JavaScript logic, and player functionality
  • estilooriginal.css - Defines the color system, layout, and responsive design
  • img/Logo.png - The MYMUSICK logo displayed in the header
3

Open in Your Browser

Simply open the index.html file in your web browser:
open index.html
For the best experience, use a modern browser like Chrome, Firefox, or Edge with JavaScript enabled.
4

Make Your First Search

Now you’re ready to search for music!
  1. Enter a search query in the search bar (e.g., “Bohemian Rhapsody”)
  2. Press Enter to search
  3. Click any song card to start playing
The search uses the MYMUSICK backend API:
const res = await fetch(
  `https://mymusick-backend.onrender.com/search?q=${encodeURIComponent(query)}`
);
const songs = await res.json();
Each result includes:
  • Song title and artist
  • Thumbnail image
  • YouTube video ID for playback

​
How It Works

​
Search Functionality

The search is triggered when you press Enter in the search input:
index.html
input.addEventListener("keydown", async (e) => {
  if (e.key !== "Enter") return;

  const query = input.value.trim();
  if (!query) return;

  results.innerHTML = `<p>Buscando... 🎵</p>`;

  try {
    const res = await fetch(
      `https://mymusick-backend.onrender.com/search?q=${encodeURIComponent(query)}`
    );
    if (!res.ok) throw new Error();
    const songs = await res.json();
    renderSongs(songs);
  } catch {
    results.innerHTML = `<p>Error al buscar 😕</p>`;
  }
});

​
Dynamic Theming

MYMUSICK detects the dominant color from each song’s thumbnail and applies it as a hover effect:
index.html
function detectarColor(imgURL, element) {
  const img = new Image();
  img.crossOrigin = "anonymous";
  img.src = imgURL;

  img.onload = () => {
    canvas.width = img.width / 4;
    canvas.height = img.height / 4;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    // ... color detection algorithm
    element.style.background = `rgba(${dominant}, 0.35)`;
  };
}

​
YouTube Player Integration

Songs play using the YouTube IFrame API:
index.html
function loadSong(song) {
  if (!player) return;
  
  nowPlayingText.textContent = `${song.title} - ${song.artist}`;
  player.loadVideoById(song.id);
  player.playVideo();
}

​
Color System

MYMUSICK uses a vibrant color palette defined in CSS variables:
estilooriginal.css
:root {
  --primary: #04CDA8;    /* Turquoise - header & player */
  --accent: #FF5757;     /* Red - buttons & highlights */
  --bg-dark: #111;       /* Dark - sidebar & cards */
  --text-light: white;   /* White - text */
}
These colors create a modern, high-contrast design that’s perfect for a music application.

​
Next Steps

Explore the Architecture

Learn how MYMUSICK’s components work together

Customize the Design

Modify colors, fonts, and layout to match your style

API Reference

Understand the search API and response format

Player Functions

Explore YouTube player integration and controls
Tip: MYMUSICK works entirely in the browser with no backend dependencies (except the search API). You can customize it freely!

Build docs developers (and LLMs) love

Get started for freeTalk to us