kokoro

💓 kokoro.js

Kokoro is a super light-weighted, headless javascript music player, which provides observable states and programmatic control apis, based on redux.

📝 Documentation

Visit it here.

🚀 Quick Start

• Go to documentation page.
• Open console.
• Copy and paste the following code snippet.

  const script = document.createElement('script')
  script.src = '/dist/kokoro.min.js'
  script.onload = () => {
    window.player = new Kokoro()
    console.log(`Initialized player instance of kokoro v${window.player.version}.`)
  }
  document.body.appendChild(script)
  

• You're ready to go now! Look up to Kokoro's API and try to play a song.

💡 FAQ

Q: Why do I need kokoro?

Those most popular web music players (e.g. APlayer, bPlayer) have their states binding to document elements, which means that when the UI re-renders (probably caused by a router navigation), the player completely loses its state, making the playing songs abort and requires a re-initialization of the player.

This pain is not necessary! Your users won't suffer from the abortion of their loving music while navigating to next article any more. With the use of kokoro, you player's state will be always consistent, no matter how many UI components, by what library, when and where are those components rendered.

Q: But how could I use without a UI?

We also provide a "headful" version bundled with kokoro, check it out here.

Note that it's not necessary to use kokoro with kokoro-player, you can use whatever UI you want, or you can just simply use kokoro in a programmatic way.

Q: I don't like those existing UIs, can I make my own UI?

Sure. Check out kokoro's API documentation, you'll find it super easy. If you're familiar with redux, it'll be more than easy.

You're welcomed to share your UI, your link can be added to this README. Feel free to file an issue or make a pull request.