A tiny, minimalistic JS music player

hunor karamán

Last update: Dec 30, 2022

Overview

A tiny, minimalistic JS music player. It's around 2 kilobytes and it's super beautiful.

Installation

From CDN

Include with <script src="https://unpkg.com/microne/microne.js"></script>

npm

$ npm i microne
Include with <script src="node_modules/microne/microne.js"></script>

Manual

Simply download the microne.js file and include it.

Usage

<body>
  <div id="player"></div>

  <script src="https://unpkg.com/microne/microne.js"></script>
  <script>
    var m = new Microne(document.getElementById('player'))
    m.source('media/example.mp3')
  </script>
</body>

API

`new Microne(parent_el)`

Makes a new player and appends it to the parent_el element. parent_el must have a specified width and height and microne fills it.

`m.source(href[, preload])`

Sets the source of the player to href. If preload (optional) is false the audio will only be loaded at play. Default is true.

`m.play()`

Start playing.

`m.pause()`

Pause playing.

`m.on(event, handler)`

Add an event to the audio element. See possible events here.

MusicPlayer-Javascript - How to create a custom music player with vanilla javascript

MusicPlayer-Javascript How to create a custom music player with vanilla javascri

Feb 8, 2022

Simple Music Player App

Разработка музыкального плеера Разработка страницы музыкального плеера с возможностью поиска/выбора альбома для воспроизведения. Адаптивная верстка дл

Apr 10, 2022

A Simple Music Bot Made Using Discord-Player Package - (Beta)

Our Music Bot A Highly Powerful Music Bot Without Lavalink Which Is Gonna Have Setup, A Specific Text Channel For Bot Command Feature, And DJ System S

Dec 14, 2022

High-quality* music player.

Laudiolin A very simple music player written in TypeScript using Tauri and React. pronounced eL-auDiO-liN Running Clone the project run npm i run npm

Dec 21, 2022

I’m a very useful music bot that can make you play a music with a simple command! I have a lot of good commands that you can have a better experience playing your favorites songs!

Aug 16, 2022

A mobile app for playing music on Resonate, an open source music streaming co-op.

stream2own Play fair. Website | Twitter | Contributing | Developer Guide 🎵 Resonate Stream App A mobile app for playing music on Resonate, an open so

Dec 28, 2022

A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain, that can be streamed by users

A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain, that can be streamed by users.

Sep 5, 2022

Minimalistic media card for Home Assistant Lovelace UI

Mini Media Player A minimalistic yet customizable media player card for Home Assistant Lovelace UI. Inspired by Custom UI: Mini media player and custo

Jan 5, 2023

Movie focused HTML5 Player

Dec 29, 2022

Comments

Update function el_click

I ran into a problem here while using the player in a nested element: offsetLeft doesn't always calculate the distance from the edge of the page, sometimes it just calculates the distance to the edge of its parent element (or from the parent element to the edge? I'm not certain). Anyway I believe that the getBoundingClient method I used here is compatible with more contexts — at the very least it fixed the problem I was having.

opened by zachy9 2
mp3 data not showing on iPhone lock screen

Hey there,

Thanks for the nice player.

However, how can we add the mp3 metada (title, artwork, etc) when we play a track from an iphone? Instead of having "wesbite.com/uploads...etc".

Thanks in advance for your help.

opened by raloid 1

Reduce style tag duplication by using Object.assign

Take this snippet for example.

this.play_button.style.cursor = 'pointer'
this.play_button.style.fontFamily = 'monospace'
this.play_button.style.fontSize = '14px'

Instead of this we can do

Object.assign(this.play_button.style, {
  cursor:  'pointer',
  fontFamily: 'monospace',
  fontSize: '14px'
})

I would like to make a PR regarding this

opened by itaditya 0

Multiple players issues

When I embed multiple instances of the player they will play simultaneously if I start more than one. Default behaviour should be that all playing instances should be paused if a new instance is played or unpaused.

opened by Doemelti 0