Skip to main content

​
Overview

The player functions handle YouTube IFrame API integration, song loading, and playback controls in MYMUSICK. These functions provide the core music playback functionality.

​
Global Variables

let player;      // YouTube IFrame Player instance
let isPlaying = false;  // Current playback state

​
Functions

​
onYouTubeIframeAPIReady()

Initializes the YouTube IFrame Player when the API is ready. This function is automatically called by the YouTube IFrame API.
​
return
void
No return value

​
Implementation

index.html
window.onYouTubeIframeAPIReady = function () {
  player = new YT.Player("yt-player", {
    height: "0",
    width: "0",
    playerVars: { autoplay: 0 },
    events: { onStateChange: onPlayerStateChange }
  });
};

​
Behavior

  • Creates a YouTube player instance with ID yt-player
  • Sets player dimensions to 0x0 (hidden player)
  • Disables autoplay on initialization
  • Registers onPlayerStateChange event handler

​
loadSong(song)

Loads and plays a song using the YouTube player.
​
song
object
required
Song object containing metadata
​
song.id
string
required
YouTube video ID
​
song.title
string
required
Song title
​
song.artist
string
required
Artist name
​
return
void
No return value

​
Implementation

index.html
function loadSong(song) {
  if (!player) return;

  nowPlayingText.textContent = `${song.title} - ${song.artist}`;

  player.loadVideoById(song.id);
  player.playVideo();
}

​
Usage Example

const song = {
  id: "dQw4w9WgXcQ",
  title: "Never Gonna Give You Up",
  artist: "Rick Astley"
};

loadSong(song);

​
Behavior

  1. Validates player instance exists
  2. Updates “Now Playing” text display
  3. Loads the YouTube video by ID
  4. Automatically starts playback

​
togglePlayPause()

Toggles between play and pause states for the current song.
​
return
void
No return value

​
Implementation

index.html
function togglePlayPause() {
  if (!player) return;

  isPlaying ? player.pauseVideo() : player.playVideo();
}

​
Usage Example

playPauseBtn.onclick = togglePlayPause;

​
Behavior

  • Pauses video if currently playing
  • Resumes video if currently paused
  • Relies on global isPlaying state variable

​
onPlayerStateChange(event)

Callback function triggered when the YouTube player state changes.
​
event
object
required
YouTube player state change event
​
event.data
number
required
YouTube PlayerState constant (e.g., YT.PlayerState.PLAYING)
​
return
void
No return value

​
Implementation

index.html
function onPlayerStateChange(event) {
  isPlaying = event.data === YT.PlayerState.PLAYING;
  playPauseBtn.classList.remove("hidden");
  playPauseBtn.textContent = isPlaying ? "⏸️ Pausar" : "▶️ Reproducir";
}

​
Behavior

  1. Updates isPlaying global variable based on player state
  2. Makes the play/pause button visible
  3. Updates button text and icon:
    • Shows “⏸️ Pausar” when playing
    • Shows “▶️ Reproducir” when paused

​
YouTube Player States

YT.PlayerState.UNSTARTED  // -1
YT.PlayerState.ENDED      // 0
YT.PlayerState.PLAYING    // 1
YT.PlayerState.PAUSED     // 2
YT.PlayerState.BUFFERING  // 3
YT.PlayerState.CUED       // 5

​
Integration Flow

​
DOM Elements Referenced

​
playPauseBtn
HTMLElement
Button element with ID playPauseBtn - Controls playback
​
nowPlayingText
HTMLElement
Span element with ID nowPlaying - Displays current song info
​
yt-player
HTMLElement
Div element with ID yt-player - Container for YouTube player

​
External Dependencies

<script src="https://www.youtube.com/iframe_api"></script>
The YouTube IFrame API must be loaded before these functions can be used.

Build docs developers (and LLMs) love

Get started for freeTalk to us