thinkswell · cobie1818 · Sep 20, 2026
diff --git a/MusicPlayer/cobie1818/README.md b/MusicPlayer/cobie1818/README.md
@@ -0,0 +1,64 @@
+# SoundSpace Music Player
+
+A responsive music player built for JavaScript Mini Projects.
+Contribution related to issue #958.
+
+## Technologies
+
+- HTML5 audio
+- CSS with a responsive layout
+- Vanilla JavaScript
+- No external libraries, API keys, or build tools required
+
+## Run locally
+
+Open index.html in a modern browser, or serve this folder using
+the VS Code Live Server extension.
+
+## How to use
+
+1. Select Add audio files and choose audio files from your device.
+2. Use Ctrl or Shift in the file picker to select multiple files.
+3. Click Play to begin playback.
+4. Use Previous, Next, or a playlist button to select a track.
+5. Adjust the track position and volume using the sliders.
+
+Adding a new selection replaces the playlist.
+Files are processed locally and are not uploaded.
+The playlist is cleared when the page reloads.
+
+## Features
+
+- Play and pause
+- Previous and next track navigation with wraparound
+- Automatic advancement until the end of the playlist
+- Clickable playlist with the selected track highlighted
+- Track seeking and elapsed time display
+- Volume control
+- Responsive layout
+- Keyboard-operable buttons and labeled controls
+- Visible keyboard focus and playback status messages
+- Error feedback for files the browser cannot play
+
+## Manual testing checklist
+
+- Add one file and test play, pause, seeking, and volume.
+- Add multiple files and test previous, next, and track selection.
+- Confirm navigation wraps around at the playlist boundaries.
+- Confirm playback advances when a track ends.
+- Confirm playback stops after the final track.
+- Replace the playlist while music is playing.
+- Try an unsupported or damaged audio file.
+- Test keyboard navigation using Tab, Enter, Space, and arrow keys.
+- Check the layout at phone, tablet, and desktop widths.
+- Check the browser console for unexpected errors.
+
+## Limitations
+
+Supported audio formats depend on the browser.
+Audio files are supplied by the user; no songs are bundled.
+No automated test suite is included in this contribution.
+
+## Screenshot
+
+![SoundSpace music player with a loaded playlist](screenshot.png)
diff --git a/MusicPlayer/cobie1818/index.html b/MusicPlayer/cobie1818/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SoundSpace Music Player</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js" defer></script>
+</head>
+<body>
+  <main class="player">
+    <header>
+      <p class="eyebrow">YOUR MUSIC. YOUR SPACE.</p>
+      <h1>SoundSpace</h1>
+      <p>A simple player for your favorite tracks.</p>
+    </header>
+
+    <section aria-labelledby="now-playing">
+      <div class="artwork" aria-hidden="true">♫</div>
+      <h2 id="now-playing">No track selected</h2>
+      <p id="status" role="status">Choose audio files to get started.</p>
+
+      <label for="files">Add audio files</label>
+      <input id="files" type="file" accept="audio/*" multiple>
+      <p class="hint">Files stay on your device. Adding files replaces the playlist.</p>
+
+      <audio id="audio" preload="metadata"></audio>
+
+      <div class="timeline">
+        <label for="seek">Track position</label>
+        <input id="seek" type="range" min="0" max="100"
+               value="0" step="0.1" disabled>
+        <div class="times">
+          <span id="elapsed">0:00</span>
+          <span id="duration">0:00</span>
+        </div>
+      </div>
+
+      <div class="controls">
+        <button id="previous" type="button" disabled>Previous</button>
+        <button id="play" class="primary" type="button" disabled>Play</button>
+        <button id="next" type="button" disabled>Next</button>
+      </div>
+
+      <div class="volume-control">
+        <label for="volume">Volume</label>
+        <input id="volume" type="range" min="0" max="1"
+               step="0.01" value="0.7">
+      </div>
+    </section>
+
+    <section class="playlist-section" aria-labelledby="playlist-heading">
+      <h2 id="playlist-heading">Your playlist</h2>
+      <p id="empty">Your added tracks will appear here.</p>
+      <ol id="playlist"></ol>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/MusicPlayer/cobie1818/screenshot.png b/MusicPlayer/cobie1818/screenshot.png
diff --git a/MusicPlayer/cobie1818/script.js b/MusicPlayer/cobie1818/script.js
@@ -0,0 +1,194 @@
+"use strict";
+
+const audio = document.getElementById("audio");
+const filesInput = document.getElementById("files");
+const title = document.getElementById("now-playing");
+const status = document.getElementById("status");
+const playButton = document.getElementById("play");
+const previousButton = document.getElementById("previous");
+const nextButton = document.getElementById("next");
+const seek = document.getElementById("seek");
+const volume = document.getElementById("volume");
+const elapsed = document.getElementById("elapsed");
+const duration = document.getElementById("duration");
+const playlist = document.getElementById("playlist");
+const empty = document.getElementById("empty");
+
+let tracks = [];
+let currentIndex = -1;
+let playbackRequest = 0;
+
+audio.volume = Number(volume.value);
+
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) {
+    return "0:00";
+  }
+
+  const minutes = Math.floor(seconds / 60);
+  const remainder = Math.floor(seconds % 60);
+  return `${minutes}:${String(remainder).padStart(2, "0")}`;
+}
+
+function updateTimeline() {
+  const hasDuration = Number.isFinite(audio.duration)
+    && audio.duration > 0;
+
+  seek.disabled = !hasDuration;
+  seek.max = hasDuration ? audio.duration : 100;
+  seek.value = hasDuration ? audio.currentTime : 0;
+  elapsed.textContent = formatTime(audio.currentTime);
+  duration.textContent = formatTime(audio.duration);
+  seek.setAttribute(
+    "aria-valuetext",
+    `${formatTime(audio.currentTime)} of ${formatTime(audio.duration)}`
+  );
+}
+
+function highlightTrack() {
+  const buttons = playlist.querySelectorAll("button");
+
+  buttons.forEach((button, index) => {
+    if (index === currentIndex) {
+      button.setAttribute("aria-current", "true");
+    } else {
+      button.removeAttribute("aria-current");
+    }
+  });
+}
+
+async function startPlayback() {
+  if (currentIndex < 0) return;
+
+  const request = ++playbackRequest;
+
+  try {
+    await audio.play();
+  } catch (error) {
+    // Ignore a request interrupted by changing or pausing a track.
+    if (request !== playbackRequest || error.name === "AbortError") {
+      return;
+    }
+
+    status.textContent =
+      "Unable to play this file. Try another audio file.";
+  }
+}
+
+function selectTrack(index, autoplay = false) {
+  if (!tracks.length) return;
+
+  playbackRequest++;
+  audio.pause();
+
+  // Wrap around when moving beyond either end of the playlist.
+  currentIndex = (index + tracks.length) % tracks.length;
+  audio.src = tracks[currentIndex].url;
+  audio.load();
+
+  title.textContent = tracks[currentIndex].name;
+  status.textContent = "Ready to play.";
+  playButton.textContent = "Play";
+  playButton.disabled = false;
+  previousButton.disabled = tracks.length < 2;
+  nextButton.disabled = tracks.length < 2;
+
+  updateTimeline();
+  highlightTrack();
+
+  if (autoplay) startPlayback();
+}
+
+filesInput.addEventListener("change", () => {
+  const selectedFiles = Array.from(filesInput.files);
+  if (!selectedFiles.length) return;
+
+  playbackRequest++;
+  audio.pause();
+  audio.removeAttribute("src");
+  audio.load();
+
+  // Release the old file references before replacing the playlist.
+  tracks.forEach((track) => URL.revokeObjectURL(track.url));
+
+  tracks = selectedFiles.map((file) => ({
+    name: file.name,
+    url: URL.createObjectURL(file)
+  }));
+
+  playlist.replaceChildren();
+  empty.hidden = true;
+
+  tracks.forEach((track, index) => {
+    const item = document.createElement("li");
+    const button = document.createElement("button");
+
+    button.type = "button";
+    button.textContent = track.name;
+    button.addEventListener("click", () => selectTrack(index, true));
+
+    item.appendChild(button);
+    playlist.appendChild(item);
+  });
+
+  selectTrack(0);
+  filesInput.value = "";
+});
+
+playButton.addEventListener("click", () => {
+  if (audio.paused) {
+    startPlayback();
+  } else {
+    playbackRequest++;
+    audio.pause();
+  }
+});
+
+previousButton.addEventListener("click", () => {
+  selectTrack(currentIndex - 1, true);
+});
+
+nextButton.addEventListener("click", () => {
+  selectTrack(currentIndex + 1, true);
+});
+
+audio.addEventListener("play", () => {
+  playButton.textContent = "Pause";
+  status.textContent = "Playing.";
+});
+
+audio.addEventListener("pause", () => {
+  playButton.textContent = "Play";
+  if (currentIndex >= 0) status.textContent = "Paused.";
+});
+
+audio.addEventListener("ended", () => {
+  if (currentIndex < tracks.length - 1) {
+    selectTrack(currentIndex + 1, true);
+  } else {
+    status.textContent = "Playlist finished.";
+  }
+});
+
+audio.addEventListener("error", () => {
+  if (!audio.getAttribute("src")) return;
+
+  playButton.textContent = "Play";
+  status.textContent =
+    "This file could not be loaded. Choose another track or file.";
+});
+
+audio.addEventListener("loadedmetadata", updateTimeline);
+audio.addEventListener("durationchange", updateTimeline);
+audio.addEventListener("timeupdate", updateTimeline);
+
+seek.addEventListener("input", () => {
+  if (Number.isFinite(audio.duration) && audio.duration > 0) {
+    audio.currentTime = Number(seek.value);
+    updateTimeline();
+  }
+});
+
+volume.addEventListener("input", () => {
+  audio.volume = Number(volume.value);
+});