Spaces:

prasanthntu
/

music-player

Building

App Files Files Community

prasanth.thangavel commited on Jan 4

Commit

51c43d6

1 Parent(s): 2a59b87

Add code for the music player

Browse files

Files changed (7) hide show

.dockerignore +6 -0
.gitattributes +5 -0
.gitignore +5 -0
Dockerfile +23 -0
app.py +20 -0
requirements.txt +2 -0
templates/index.html +319 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,6 @@

+# .dockerignore
+__pycache__
+*.pyc
+.DS_Store
+.git
+.env

.gitattributes CHANGED Viewed

@@ -33,3 +33,8 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+*.ogg filter=lfs diff=lfs merge=lfs -text
+*.flac filter=lfs diff=lfs merge=lfs -text
+*.m4a filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,5 @@

+# Exclude audio source files from regular Git
+!static/audio/*.mp3
+!static/audio/*.wav
+!static/audio/*.ogg
+!static/audio/*.flac

Dockerfile ADDED Viewed

	@@ -0,0 +1,23 @@

+# Use Python 3.11 slim base image for smaller size
+FROM python:3.11-slim
+# Create non-root user for security
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+# Set working directory for app
+WORKDIR /app
+# Copy requirements with correct ownership first for better layer caching
+COPY --chown=user requirements.txt .
+# Install Python dependencies
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+# Copy application code with correct ownership (all files from current directory to container)
+COPY --chown=user . .
+# Run gunicorn server on port 7860
+# Format: gunicorn -b host:port module_name:app_instance
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

app.py ADDED Viewed

	@@ -0,0 +1,20 @@

+# app.py
+from flask import Flask, render_template, send_from_directory
+import os
+app = Flask(__name__)
+# Add route for serving audio files
+@app.route('/audio/<path:filename>')
+def serve_audio(filename):
+    return send_from_directory('static/audio', filename)
+@app.route("/")
+def home():
+    # Get list of audio files
+    audio_dir = os.path.join('static', 'audio')
+    audio_files = [f for f in os.listdir(audio_dir) if f.endswith(('.mp3', '.wav'))]
+    return render_template("index.html", audio_files=audio_files)
+if __name__ == "__main__":
+    app.run(debug=True)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask==2.0.1
2	+ gunicorn==20.1.0

templates/index.html ADDED Viewed

	@@ -0,0 +1,319 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Music Player</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        :root {
+            --primary: #6200ee;
+            --surface: #fff;
+            --on-surface: #121212;
+            --accent: #03dac6;
+            --error: #b00020;
+        }
+        * {
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: -apple-system, system-ui, BlinkMacSystemFont;
+            background: #fafafa;
+            color: var(--on-surface);
+            line-height: 1.5;
+        }
+        .sw-container {
+            padding: 16px;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        .sw-player {
+            background: var(--surface);
+            border-radius: 16px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            padding: 20px;
+            margin-bottom: 16px;
+        }
+        .sw-header {
+            font-size: 1.25rem;
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .sw-audio {
+            width: 100%;
+            height: 48px;
+            margin: 16px 0;
+        }
+        .sw-btn-group {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 12px;
+            margin: 16px 0;
+        }
+        .sw-btn {
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 24px;
+            padding: 12px 24px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            touch-action: manipulation;
+            transition: transform 0.2s;
+        }
+        .sw-btn:active {
+            transform: scale(0.96);
+        }
+        .sw-dropdown {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 12px;
+            font-size: 1rem;
+            margin-bottom: 16px;
+        }
+        .sw-tracklist {
+            margin-top: 20px;
+        }
+        .sw-track {
+            padding: 16px;
+            margin: 8px 0;
+            border-radius: 12px;
+            background: #f5f5f5;
+            transition: background 0.2s;
+        }
+        .sw-track.active {
+            background: #e8f5ff;
+            border-left: 4px solid var(--primary);
+        }
+        .sw-modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.6);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+        }
+        .sw-modal-content {
+            background: var(--surface);
+            width: 100%;
+            max-width: 400px;
+            border-radius: 16px;
+            padding: 24px;
+        }
+        .sw-input {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 12px;
+            font-size: 1rem;
+            margin: 16px 0;
+        }
+        .sw-checkbox-list {
+            max-height: 300px;
+            overflow-y: auto;
+            margin: 16px 0;
+            border: 1px solid #e0e0e0;
+            border-radius: 12px;
+        }
+        .sw-checkbox-item {
+            padding: 12px 16px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        @media (hover: hover) {
+            .sw-btn:hover {
+                background: #7722ff;
+            }
+            .sw-track {
+                padding: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="sw-container">
+        <div class="sw-player">
+            <h1 class="sw-header">Music Player</h1>
+            <audio id="swAudio" class="sw-audio" controls>
+                Your browser does not support audio playback.
+            </audio>
+            <div class="sw-btn-group">
+                <button class="sw-btn" onclick="swPrevious()">Previous</button>
+                <button class="sw-btn" onclick="swNext()">Next</button>
+            </div>
+            <select class="sw-dropdown" id="swPlaylistSelect" onchange="swChangePlaylist()">
+                <option value="all">All Songs</option>
+            </select>
+            <div class="sw-btn-group">
+                <button class="sw-btn" onclick="swShowPlaylistModal()">Create Playlist</button>
+                <button class="sw-btn" onclick="swDeletePlaylist()">Delete Playlist</button>
+            </div>
+            <div class="sw-tracklist">
+                {% for file in audio_files %}
+                <div class="sw-track" onclick="swPlay('{{ file }}')">
+                    {{ file }}
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+    <div class="sw-modal" id="swPlaylistModal">
+        <div class="sw-modal-content">
+            <h2>Create New Playlist</h2>
+            <input type="text" class="sw-input" id="swPlaylistName" placeholder="Playlist Name">
+            <div class="sw-checkbox-list" id="swSongCheckboxes"></div>
+            <div class="sw-btn-group">
+                <button class="sw-btn" onclick="swCreatePlaylist()">Save</button>
+                <button class="sw-btn" onclick="swCloseModal()">Cancel</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        const swAudio = document.getElementById('swAudio');
+        const swTracks = {{ audio_files|tojson|safe }};
+        let swCurrentIndex = 0;
+        function swPlay(file) {
+            swAudio.src = `/audio/${file}`;
+            swAudio.play();
+            updateActiveTracks();
+        }
+        function swNext() {
+            if (swCurrentIndex < swTracks.length - 1) {
+                swCurrentIndex++;
+                swPlay(swTracks[swCurrentIndex]);
+            }
+        }
+        function swPrevious() {
+            if (swCurrentIndex > 0) {
+                swCurrentIndex--;
+                swPlay(swTracks[swCurrentIndex]);
+            }
+        }
+        function updateActiveTracks() {
+            document.querySelectorAll('.sw-track').forEach((track, index) => {
+                track.classList.toggle('active', index === swCurrentIndex);
+            });
+        }
+        // Auto-play next track
+        swAudio.addEventListener('ended', swNext);
+        // Play first track if available
+        if (swTracks.length > 0) {
+            swPlay(swTracks[0]);
+        }
+        const swPlaylists = JSON.parse(localStorage.getItem('swPlaylists') || '{}');
+        let swCurrentPlaylist = 'all';
+        function swLoadPlaylists() {
+            const select = document.getElementById('swPlaylistSelect');
+            select.innerHTML = '<option value="all">All Songs</option>';
+            Object.keys(swPlaylists).forEach(name => {
+                select.innerHTML += `<option value="${name}">${name}</option>`;
+            });
+        }
+        function swShowPlaylistModal() {
+            const modal = document.getElementById('swPlaylistModal');
+            const checkboxes = document.getElementById('swSongCheckboxes');
+            checkboxes.innerHTML = swTracks.map(song =>
+                `<div class="sw-checkbox-item">
+                    <input type="checkbox" id="${song}" value="${song}">
+                    <label for="${song}">${song}</label>
+                </div>`
+            ).join('');
+            modal.style.display = 'flex';
+        }
+        function swCloseModal() {
+            document.getElementById('swPlaylistModal').style.display = 'none';
+        }
+        function swCreatePlaylist() {
+            const name = document.getElementById('swPlaylistName').value;
+            if (!name) return alert('Please enter playlist name');
+            const songs = Array.from(document.querySelectorAll('#swSongCheckboxes input:checked'))
+                .map(cb => cb.value);
+            if (!songs.length) return alert('Select at least one song');
+            swPlaylists[name] = songs;
+            localStorage.setItem('swPlaylists', JSON.stringify(swPlaylists));
+            swLoadPlaylists();
+            swCloseModal();
+        }
+        function swChangePlaylist() {
+            swCurrentPlaylist = document.getElementById('swPlaylistSelect').value;
+            swCurrentIndex = 0;
+            swUpdateTracks();
+            if (swGetCurrentTracks().length > 0) {
+                swPlay(swGetCurrentTracks()[0]);
+            }
+        }
+        function swDeletePlaylist() {
+            if (swCurrentPlaylist === 'all') return;
+            delete swPlaylists[swCurrentPlaylist];
+            localStorage.setItem('swPlaylists', JSON.stringify(swPlaylists));
+            swCurrentPlaylist = 'all';
+            swLoadPlaylists();
+            swChangePlaylist();
+        }
+        function swGetCurrentTracks() {
+            return swCurrentPlaylist === 'all' ? swTracks : swPlaylists[swCurrentPlaylist];
+        }
+        function swUpdateTracks() {
+            const tracks = swGetCurrentTracks();
+            document.querySelector('.sw-tracklist').innerHTML = tracks.map((file, index) =>
+                `<div class="sw-track ${index === swCurrentIndex ? 'active' : ''}"
+                    onclick="swPlay('${file}')">
+                    ${file}
+                </div>`
+            ).join('');
+        }
+        // Initialize playlists
+        swLoadPlaylists();
+    </script>
+</body>
+</html>