All Projects → thangngoc89 → React Howler

thangngoc89 / React Howler

Licence: mit
A React.js wrapper for howler.js (audio player)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Howler

Oboe
Oboe is a C++ library that makes it easy to build high-performance audio apps on Android.
Stars: ✭ 2,845 (+1075.62%)
Mutual labels:  audio
Optivideoeditor For Ios
Native Video editor : Video trim, Audio, Video merge, Slow and fast motion, Video transition, Text and image, Filters, etc...
Stars: ✭ 234 (-3.31%)
Mutual labels:  audio
Kira
Library for expressive game audio.
Stars: ✭ 237 (-2.07%)
Mutual labels:  audio
Podcast Cli
Podcast CLI player
Stars: ✭ 228 (-5.79%)
Mutual labels:  audio
Openmpt
Official read-only git mirror of the OpenMPT and libopenmpt subversion repository at https://source.openmpt.org/. This repository may occasionally get rebased without further notice when subversion revision properties (commit message) get fixed in recent history after the fact. Be sure to rebase often in case you clone or fork it.
Stars: ✭ 231 (-4.55%)
Mutual labels:  audio
Gwion
🎵 strongly-timed musical programming language
Stars: ✭ 235 (-2.89%)
Mutual labels:  audio
Source separation
Deep learning based speech source separation using Pytorch
Stars: ✭ 226 (-6.61%)
Mutual labels:  audio
Pathephone Desktop
Distributed audio player
Stars: ✭ 240 (-0.83%)
Mutual labels:  audio
Audio
Class for high-level audio manipulations [NOT MAINTAINED]
Stars: ✭ 233 (-3.72%)
Mutual labels:  audio
Ncpamixer
ncurses PulseAudio Mixer
Stars: ✭ 234 (-3.31%)
Mutual labels:  audio
Recorder.js
🎤HTML5 Recorder - mp3 output
Stars: ✭ 229 (-5.37%)
Mutual labels:  audio
Fanplayer
A portable video player based on ffmpeg for windows and android platform.
Stars: ✭ 229 (-5.37%)
Mutual labels:  audio
Wickedengine
3D engine focusing on modern rendering techniques and performance.
Stars: ✭ 3,148 (+1200.83%)
Mutual labels:  audio
Mpv
🎥 Command line video player
Stars: ✭ 17,018 (+6932.23%)
Mutual labels:  audio
Lhotse
Stars: ✭ 236 (-2.48%)
Mutual labels:  audio
React H5 Audio Player
React audio player component with UI. It provides time indicator on both desktop and mobile devices.
Stars: ✭ 226 (-6.61%)
Mutual labels:  audio
Crnn Audio Classification
UrbanSound classification using Convolutional Recurrent Networks in PyTorch
Stars: ✭ 235 (-2.89%)
Mutual labels:  audio
Mt32 Pi
🎹🎶 A baremetal kernel that turns your Raspberry Pi 3 or later into a Roland MT-32 emulator and SoundFont synthesizer based on Circle, Munt, and FluidSynth.
Stars: ✭ 231 (-4.55%)
Mutual labels:  audio
Noise Repellent
An lv2 plugin for broadband noise reduction
Stars: ✭ 239 (-1.24%)
Mutual labels:  audio
Swift Radio Pro
Professional Radio Station App for iOS!
Stars: ✭ 2,644 (+992.56%)
Mutual labels:  audio

react-howler

A React.js wrapper for howler.js (audio player).

ReactHowler has no UI, you have to provide your own UI.

Props can be passed to control playback and react to events such as end, load, play, ...

Travis status Greenkeeper badge

LICENSE MIT js-standard-style npm dependencies

howler.js

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio.

Usage

npm install --save react-howler

import React, { Component } from 'react'
import ReactHowler from 'react-howler'

class App extends Component {
  // This sound file may not work due to cross-origin setting
  render () {
    return (
      <ReactHowler
        src='http://goldfirestudios.com/proj/howlerjs/sound.ogg'
        playing={true}
      />
    )
  }
}

For a full working example please see it in App.js

Demo

http://khoanguyen.me/react-howler/ or

git clone http://github.com/thangngoc89/react-howler
npm install
npm run example:react
open http://localhost:3000

Props

Prop Default Description
src The sources to the track(s) to be loaded for the sound (URLs or base64 data URIs). These should be in order of preference, howler.js will automatically load the first one that is compatible with the current browser. If your files have no extensions, you will need to explicitly specify the extension using the format property.
Updating the src prop on the fly will destroy any currently playing howler instance and create a new one with the new src. Updating other props while keeping the src the same will maintain the current howler instance.
preload true Set to true to begin downloading the audio file if it is not loaded yet.
playing true Set to true or false to pause or play the media.
Setting to true on initial load will play the audio immediately after it is loaded
loop false Set to true or false to enable/disable loop
mute false Set to true or false to mute/unmute current audio
volume 1.0 The volume of the specific howl, from 0.0 to 1.0
html5 false Set to true to force HTML5 Audio. This should be used for large audio files so that you don't have to wait for the full file to be downloaded and decoded before playing.
format [] howler.js automatically detects your file format from the extension, but you may also specify a format in situations where extraction won't work (such as with a SoundCloud stream).
xhr {} When using Web Audio, howler.js uses an XHR request to load the audio files. If you need to send custom headers, set the HTTP method or enable withCredentials (see reference), include them with this parameter. Each is optional (method defaults to GET, headers default to null and withCredentials defaults to false). For example:
<ReactHowler src="sound.webm" xhr={{ method: 'POST', headers: { Authorization: 'Bearer:' + token, }, withCredentials: true, }} />
onPlay noop Called when audio starts or resumes playing
onPause noop Called when audio is paused
onVolume noop Called when volume is changed
onStop noop Called when audio is stopped
onLoad noop Called when audio is loaded (buffered)
onLoadError noop Called when an error occurs whilst attempting to load media
onEnd noop Called when media finishes playing

Methods

duration([id])

Get the duration of the audio source. Will return 0 until after the load event fires.

  • id: Number optional The sound ID to check. Passing an ID will return the duration of the sprite being played on this instance; otherwise, the full source duration is returned.

load()

When preload is true this is automatically called. When setting preload to false, you can call load() manually before playing sounds (useful for lazy loading large files on slow networks). If you attempt to play a sound that's not loading or loaded with preload react-howler will automatically call load().

Tip: If you're calling load() manually, check the load status with howlerState()

seek([seek])

Get/set the position of playback for a sound.

  • seek: Number optional The position to move current playback to (in seconds).

howlerState()

Check the load status of the Howl, returns a string unloaded, loading or loaded.

This is an alias for Howler's state() function

stop([id])

Stops playback of sound, resetting seek to 0.

  • id: Number optional The sound ID. If none is passed, all sounds in group are stopped.

Other howler.js methods

If you need to use other howler.js methods that are not included in this wrapper you can access the howler instance directly via howler

import React, { Component } from 'react'
import ReactHowler from 'react-howler'

class App extends Component {
  getHowler () {
    this.player.howler
  }

  getDuration () {
    this.player.duration()
  }

  getSeek () {
    this.player.seek()
  }

  setSeek () {
    this.player.seek(0.5)
  }
  // This sound file may not work due to cross-origin setting
  render () {
    return(
      <ReactHowler
        src='http://goldfirestudios.com/proj/howlerjs/sound.ogg'
        playing={true}
        ref={(ref) => (this.player = ref)}
      />
    );
  }
}

Howler global core methods

Howler global methods are avaiable in window scope. Please refer to howler's documentation

Usage:

window.Howler.mute(true) // Mute all sounds

Linting

This project uses standard code style.

js-standard-style

npm run lint

Audio files in examples

sound.ogg

Taken from howler.js demo page Sound file direct link: sound.ogg

sound2.ogg

Fingerstyle Bass line over an Am chord progression By Serolillo (Own work) [CC BY 2.5 (http://creativecommons.org/licenses/by/2.5)], via Wikimedia Commons

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].