Minimal Square Music Player – SPlayer.js

Preview:

Description:

SPlayer is a minimal, lightweight HTML5 music player built with vanilla JavaScript. No dependencies, just plain JS.

Its main thing is providing a clean, square UI with basic playback controls and cover art display.

If you need a simple, self-contained audio player for a blog post, portfolio item, or quick demo, SPlayerJS gets the job done with very little fuss.

Key Features:

• HTML5 audio with fallback to browser-native handling
• Square design with cover art support
• Optional autoplay and loop configurations
• Volume control (0-1 range)
• Progress bar with seek functionality
• Event system for playback state changes

How to use it:

1. Install SPlayer via npm or yarn:

# Yarn
$ yarn add splayer-js
# NPM
$ npm install splayer-js

2. Load the necessary JavaScript and CSS files in the document.

<link rel="stylesheet" href="/dist/SPlayer.min.css" />
<script src="/dist/SPlayer.min.js"></script>

3. You need a div element in your HTML where the player will be rendered. Give it an ID or grab it via another selector.

<div id="splayer"></div>

4. Create a new SPlayer instance and pass the container element & the audio details.

const sp = new SPlayer({
  container: document.getElementById('splayer'),
  audio: {
    title: '123',
    artist: 'CSSScript',
    url: '/path/to/1.mp3',
    cover: '/path/to/1.jpg'
  }
});

5. Configuration options:

const sp = new SPlayer({
  
  container: document.getElementById('splayer'),
  audio: {
    title: '123',
    artist: 'CSSScript',
    url: '/path/to/1.mp3',
    cover: '/path/to/1.jpg'
  },
  //  Start playing automatically. 
  autoplay: false,
  // Loop the audio when it ends.
  loop: false,
  //  Number between `0.0` and `1.0`
  volume: '0.7',
});

6. API methods:

sp.play()  // Start playback
sp.pause() // Pause playback
sp.volume(0.5) // Set volume (0-1)
sp.seek(30) // Jump to 30 seconds
sp.on('event', callback) // Subscribe to events

7. You can listen for standard HTML5 media events using the on method.

• abort
• canplay
• canplaythrough
• durationchange
• emptied
• ended
• error
• loadeddata
• loadedmetadata
• loadstart
• mozaudioavailable
• pause
• play
• playing
• progress
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• volumechange
• waiting

sp.on(eventName, callbackFunction)