Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/osumatrix/osum-player
A music player built in vanilla web technologies out of the need of a good music player
https://github.com/osumatrix/osum-player
audio css html javascript music-player web
Last synced: 28 days ago
JSON representation
A music player built in vanilla web technologies out of the need of a good music player
- Host: GitHub
- URL: https://github.com/osumatrix/osum-player
- Owner: oSumAtrIX
- License: gpl-3.0
- Created: 2023-03-06T14:10:50.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2024-03-18T20:48:27.000Z (8 months ago)
- Last Synced: 2024-10-09T00:29:07.250Z (about 1 month ago)
- Topics: audio, css, html, javascript, music-player, web
- Language: JavaScript
- Homepage: https://music.osumatrix.me
- Size: 859 KB
- Stars: 12
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# osum!player - A music player for the web
A music player built in vanilla web technologies out of the need of a good music player.
## 🔬 Demo
Visit [music.osumatrix.me](https://music.osumatrix.me/) for a demo!
## 🖼️ Previews
Get a glimpse of osum!player and it's features.
### ▶️ Player
Intuitive and minimalistic player with your keyboard in mind.
### 🔍 Search
Effortless instant global search.
### 🚩 Marker
Add marker to your favourite spots or highlights.
### 📱 Mobile view
Access the player from any device.
## ⭐ Features
- Fast & responsive
- Mark hot spots
- Intuitive UX
- Minimal design
- Keyboard oriented
- Autoplay, shuffle, repeat or play once
- Global search
- Play history
## 🪛 Server setup
1. Clone the repository:
```bash
git clone [email protected]/oSumAtrIX/osum-player
cd osum-player/server
```
2. Install dependencies
1. Install libjpeg development package if you are on Linux
2. Run `npm i`
3. Migrate the database:
```bash
npx prisma migrate deploy
```
4. Configure environment variables following the example from `env.example`:
5. Start the server
```bash
npm start
```
## ⌨️ Keybinds
| Shortcut | Description |
| ------------ | ----------------------------------------------------------------------------------------------- |
| `CTRL+P` | Rotate between play modes (Autoplay, shuffle, repeat or play once) |
| `CTRL+M` | Add marker to highlight hotspots in your songs |
| `CTRL+C` | Clear all markers |
| `CTRL+A` | Toggle animations |
| `CTRL+E` | Rotate between endpoints |
| `CTRL+S` | Sort by modified date or added |
| `CTRL+Plus` | Increase volume |
| `CTRL+Minus` | Decrease volume |
| `CTRL+R` | Quick reload songs to update the database |
| `CTRL+H` | Rotate between random themes |
| `A-Za-z` | Start a search |
| `Escape` | Exit search |
| `Space` | Play, pause, or start a song |
| `Enter` | Start the currently selected song or search result |
| `ArrowLeft` | Scrub backward (Hold `SHIFT` for fine and `CTRL` for rough scrubbing) or play the previous song |
| `ArrowRight` | Scrub forward (Hold `SHIFT` for fine and `CTRL` for rough scrubbing) |
| `ArrowUp` | Select the previous song or the previous search result |
| `ArrowDown` | Play the next song or select the next search result |
| `Home` | Skip to the beginning of the current song |
| `End` | Skip to the end of the current song |
| `PageUp` | Play the previous song |
| `PageDown` | Play the next song |
| `0-9` | Seek to the corresponding time of the song |
> **Note**: You can use your mouse wheel on the seekbar or album cover to adjust the volume.
## 🚀 Action launcher
You can use the action launcher to quickly perform actions such as playing a song, or changing and toggling settings.
The acton launcher can be opened anytime by typing `>` everywhere or in the quick search bar.
## 🚩 Marker
To add a marker, press `CTRL+M`. The marker will appear on the seekbar which can be useful to highlight or mark favourite parts.
To clear all markers, press `CTRL+C`. The markers will automatically show up when playing songs.
## 🐔 Easter egg
Play with the album cover.
## 📝 Todo
- [x] Backend server
- [x] Adjusting volume with keybinds
- [x] Sort by newest modification date
- [x] Marker
- [x] Various play modes
- [x] Rainbow seekbar (Rotate between themes)
- [x] Last.FM integration
- [ ] Keybinds menu
- [ ] Playlists
- [ ] Queues
- [ ] Sync live changes
- [ ] Global hotkeys
- [ ] Add new audio files with drag & drop
- [ ] Share links