This is a simple mini player which is based on petite-vue

NOTE: This project will reconfigure it in 2024. :)

• 24kb size (CSS + JS without petite-vue).
• Base function with a simple audio list.
• Can move to page anywhere with mouse grab.
• Simply operate.

Go to releases page to download it.

Use them in your html page:

<!-- .css file path -->
<link rel="stylesheet" href="mini-player.css">

<!-- Petite Vue CDN -->
<script src="https://unpkg.com/petite-vue"></script>

<script type="module">
  // import js file at here!!
  import VueMiniPlayerCore from 'mini-player.esm.js'

  const { PlayerCore } = new VueMiniPlayerCore()

  PlayerCore.AppendSong({
    name: "Libertas",
    id: "1",
    src: "./Libertas.mp3"
  })
</script>

Then you can find it appear on your page right bottom corner.

If you don't want to use cdn file of js you can import the full ver which include full pvue:

<!-- .css file path -->
<link rel="stylesheet" href="mini-player.css">

<script type="module">
  // import js file at here!!
  import VueMiniPlayerCore from 'mini-player.full.esm.js'

  const { PlayerCore } = new VueMiniPlayerCore()

  PlayerCore.AppendSong({
    name: "Libertas",
    id: "1",
    src: "./Libertas.mp3"
  })
</script>

File size will increase ~17kb.

There are 4 mode to auto change song after audio ended.

• Continue play until last song. (Default)
• Loop all song.
• Loop current song.
• Play Randomly.

Mouse move to the song title and grab it. Then you can begin to move it.

Please read API part to learn how to operate it.

Update irregularly.

If you want to get all api information, Please go to src/core/MusicPlayerCore/index.ts to get it.

Base info with a single song.

const { PlayerCore } = new VueMiniPlayerCore()

This is an example to add a song, it can also append at head!

const { PlayerCore } = new VueMiniPlayerCore()

PlayerCore.AppendSongOnTail({
  name: 'Untitled World', 
  id: 2, 
  src: '',  // Your audio.
  img: ''   // Your thumbnail.
})

In most of situation you can remove by song list button in the player. But also you can remove it by api:

// remove by api
PlayerCore.RemoveSong(0)

MIT