npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

kokoro

v1.0.0

Published

Headless music player written with redux.

Downloads

49

Readme

💓 kokoro.js

Version Gzipped Bundle Size Build Status Coverage JavaScript Style Guide Gitmoji

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

  1. Go to documentation page.
  2. Open console.
  3. 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)
  4. 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.