> ## Documentation Index
> Fetch the complete documentation index at: https://docs.musique.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Music Player

> Stream and control live music playback across your locations

## Overview

The Music Player provides real-time streaming of music playing across your network. Monitor what's currently playing, view playlist history, and enjoy a beautiful visual interface with synchronized playback across all your locations.

## Player Interface

### Now Playing Display

Experience music visualization with our vinyl-style animated interface:

<CardGroup cols={2}>
  <Card title="Album Artwork" icon="image">
    Visual representation of the current track with album cover display.
  </Card>

  <Card title="Track Information" icon="circle-info">
    See artist name, song title, and album details for the currently playing track.
  </Card>

  <Card title="Vinyl Animation" icon="record-vinyl">
    Beautiful animated vinyl record that rotates while music plays.
  </Card>

  <Card title="Playback Status" icon="signal-stream">
    Real-time indication of live streaming status.
  </Card>
</CardGroup>

## Features

### Live Streaming

Listen to what's currently playing across your network in real-time.

**Benefits:**

* **Synchronized Playback** - Consistent audio experience across all locations
* **Company-Specific Streams** - Different music for different companies
* **Real-Time Updates** - Instant updates when tracks change
* **Quality Streaming** - High-quality audio streaming

### Playlist History

Track and review your music playback history.

<AccordionGroup>
  <Accordion title="Recently Played">
    View a list of recently played tracks with timestamps and track information.
  </Accordion>

  <Accordion title="Playback Timeline">
    See exactly when each track was played throughout the day.
  </Accordion>

  <Accordion title="Historical Data">
    Access past playlist information for analysis and reporting.
  </Accordion>
</AccordionGroup>

### Playback Controls

<Note>
  Control capabilities depend on your user permissions and role.
</Note>

**Available Controls:**

* **Play/Pause** - Basic playback control
* **Skip Track** - Move to the next song in the queue
* **View Queue** - See upcoming tracks in the playlist
* **Volume Control** - Adjust playback volume (where supported)

## Multi-Company Support

### Switch Between Companies

If you have access to multiple companies, easily switch between different music streams:

<Steps>
  <Step title="Select Company">
    Use the company selector to choose which company's music stream to view.
  </Step>

  <Step title="Load Stream">
    The player automatically loads the selected company's live stream.
  </Step>

  <Step title="View Details">
    See company-specific now playing information and history.
  </Step>
</Steps>

### Permission-Based Access

* View only companies you have permission to access
* Different control levels based on your role
* Company-specific music libraries and playlists

## Visual Experience

### Animated Vinyl Interface

Enjoy a premium visual experience while monitoring your music:

**Features:**

* Rotating vinyl animation during playback
* Smooth transitions between tracks
* Album artwork integration
* Responsive design for all screen sizes

### Color Coding

The player uses color coding to indicate different states:

* **Playing** - Active animation and visual indicators
* **Paused** - Static display
* **Loading** - Transition animations
* **Offline** - Connection status indicators

## Use Cases

<CardGroup cols={2}>
  <Card title="Quality Assurance" icon="check-double">
    Monitor what's playing in your locations to ensure proper audio playback.
  </Card>

  <Card title="Brand Experience" icon="store">
    Verify that the right music is creating the desired atmosphere.
  </Card>

  <Card title="Troubleshooting" icon="screwdriver-wrench">
    Identify playback issues quickly by checking the live stream.
  </Card>

  <Card title="Content Review" icon="magnifying-glass">
    Review your music selection and playlist performance.
  </Card>
</CardGroup>

## Technical Details

### Streaming Technology

* **WebSocket Connection** - Real-time data updates for instant synchronization
* **Adaptive Streaming** - Adjusts to your network quality
* **Low Latency** - Minimal delay between actual playback and stream
* **Automatic Reconnection** - Seamless reconnection if connection drops

### Compatibility

The Music Player works across:

* Desktop browsers (Chrome, Firefox, Safari, Edge)
* Mobile devices (iOS, Android)
* Tablets
* Touch-enabled displays

## Tips & Best Practices

<Tip>
  Keep the player open in a browser tab to continuously monitor what's playing across your locations.
</Tip>

<CardGroup cols={2}>
  <Card title="Network Quality" icon="wifi">
    Ensure stable internet connection for smooth streaming experience.
  </Card>

  <Card title="Browser Updates" icon="arrow-up">
    Keep your browser updated for best performance and features.
  </Card>

  <Card title="Multiple Locations" icon="location-dot">
    Use company switching to monitor different location groups separately.
  </Card>

  <Card title="Playlist Monitoring" icon="list-music">
    Regular review history to ensure your music strategy is executing correctly.
  </Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Music not playing">
    * Check your internet connection
    * Verify you're logged into the correct company
    * Ensure your browser allows audio playback
    * Check if music is scheduled for your location
  </Accordion>

  <Accordion title="Stream keeps buffering">
    * Test your network speed using the Network Quality tool
    * Close unnecessary browser tabs
    * Try a wired connection instead of WiFi
    * Contact support if issues persist
  </Accordion>

  <Accordion title="Can't see company music">
    * Verify you have permission to access that company
    * Check with your administrator about access rights
    * Ensure the company has active music schedules
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Network Quality" icon="signal">
    Test your connection speed to ensure optimal streaming performance.
  </Card>

  <Card title="Analytics" icon="chart-line" href="/learn/analytics">
    View detailed analytics about music playback and user engagement.
  </Card>
</CardGroup>