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

@kealabs/redux-audio

v1.0.2

Published

Redux bindings for HTML5 audio elements

Downloads

1

Readme

redux-audio

Redux bindings for HTML5 audio elements

Installation

npm install redux-audio

Usage

In your root reducer:

import { audioReducer as audio } from 'redux-audio'
import { combineReducers } from 'redux'

export default combineReducers({ audio })

In your view component:

import React from 'react'
import { Audio } from 'redux-audio'

export default () => (
  <div>
    <Audio src='example.mp3' autoPlay uniqueId='example' controls loop />
    <p>Hello world.</p>
  </div>
)

Audio Container Component

The Audio container component wraps an HTML5 audio element, exposing it to Redux actions and bindings. It has the following props:

autoPlay

Boolean. When true, the audio track will play when the component mounts. Defaults to false.

controls

Boolean. When true, the audio element will expose its controls for playing. Defaults to false.

loop

Boolean. When true, the track will loop playback. Defaults to false.

preload

String. Possible values are ['none', 'metadata', 'auto']. Defaults to 'metadata'.

src

String. The source of the audio track. Defaults to ''.

uniqueId

String. Required. A unique identifier for the component. Must be unique with respect to other currently mounted Audio components.

Redux Store

The reducer provided attaches a single object to the main store object via the audio property. This object is an instance of immutable's Map class. Each Audio component's state is accessible by calling state.audio.get('uniqueId') where uniqueId corresponds to the uniqueId prop passed to the Audio component. Audio components' state objects are added when the component is mounted and removed when the component unmounts. Each Audio component's state is represented further by another Map object. This Map has the following keys:

command

Corresponds to strings representing the method last called for the audio element. When command is updated, the corresponding method is called. Possible values are ['play', 'pause', 'none'].

state

Corresponds to the current state of the audio element. Possible values are ['playing', 'paused', 'ended', 'none'].

src

Corresponds to the current value for src passed to the Audio element. When the value is updated, the src prop for the Audio component is updated.

Action Creators

All actions can be imported by import { actionName } from 'redux-audio/actions', where actionName is the action you wish to import.

audioPlay

Takes the uniqueId value of the component you want to play as an argument. Plays the audio track.

audioPause

Takes the uniqueId value of the component you want to pause as an argument. Pauses the audio track.

audioSrc

Takes two arguments. The first is the uniqueId value of the component you want to update. The second is the value you want the src prop to be updated to. Updates the src for the corresponding Audio component.