{"id":13515490,"url":"https://github.com/thangngoc89/react-howler","last_synced_at":"2025-05-16T08:00:23.353Z","repository":{"id":37933376,"uuid":"49307050","full_name":"thangngoc89/react-howler","owner":"thangngoc89","description":"A React.js wrapper for howler.js (audio player)","archived":false,"fork":false,"pushed_at":"2023-01-25T08:03:12.000Z","size":7344,"stargazers_count":353,"open_issues_count":38,"forks_count":86,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-15T18:26:13.156Z","etag":null,"topics":["audio","howler","react"],"latest_commit_sha":null,"homepage":"https://khoanguyen.me/react-howler/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thangngoc89.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-09T02:11:38.000Z","updated_at":"2024-03-18T16:46:08.000Z","dependencies_parsed_at":"2023-02-14T05:47:15.049Z","dependency_job_id":null,"html_url":"https://github.com/thangngoc89/react-howler","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangngoc89%2Freact-howler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangngoc89%2Freact-howler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangngoc89%2Freact-howler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thangngoc89%2Freact-howler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thangngoc89","download_url":"https://codeload.github.com/thangngoc89/react-howler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493382,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","howler","react"],"created_at":"2024-08-01T05:01:11.947Z","updated_at":"2025-05-16T08:00:23.329Z","avatar_url":"https://github.com/thangngoc89.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-howler\n\nA React.js wrapper for howler.js (audio player).\n\nReactHowler has no UI, you have to provide your own UI.\n\nProps can be passed to control playback and react to events such as end, load, play, ...\n\n[![Travis status](https://travis-ci.org/thangngoc89/react-howler.svg)](https://travis-ci.org/thangngoc89/react-howler)\n[![Greenkeeper badge](https://badges.greenkeeper.io/thangngoc89/react-howler.svg)](https://greenkeeper.io/)\n\n[![LICENSE MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/thangngoc89/react-howler)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n[![npm](https://img.shields.io/npm/v/react-howler.svg)](https://npmjs.org/package/react-howler)\n[![dependencies](https://david-dm.org/thangngoc89/react-howler.svg)](https://david-dm.org/thangngoc89/react-howler)\n\n# howler.js\n\n[howler.js](https://github.com/goldfire/howler.js/) is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio.\n\n\n# Usage\n\n`npm install --save react-howler`\n\n```javascript\nimport React, { Component } from 'react'\nimport ReactHowler from 'react-howler'\n\nclass App extends Component {\n  // This sound file may not work due to cross-origin setting\n  render () {\n    return (\n      \u003cReactHowler\n        src='http://goldfirestudios.com/proj/howlerjs/sound.ogg'\n        playing={true}\n      /\u003e\n    )\n  }\n}\n```\n\nFor a full working example please see it in  [App.js](https://github.com/thangngoc89/react-howler/tree/master/examples/react/src/App.js)\n\n# Demo\n\n[http://khoanguyen.me/react-howler/](http://khoanguyen.me/react-howler/)\nor\n\n```shell\ngit clone http://github.com/thangngoc89/react-howler\nnpm install\nnpm run example:react\nopen http://localhost:3000\n```\n\n# Props\n\nProp      | Default | Description\n----      | ------- | -----------\nsrc       |         | 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. \u003cbr\u003e 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.\npreload   | true    | Set to `true` to begin downloading the audio file if it is not loaded yet.\nplaying   | true    | Set to `true` or `false` to pause or play the media.\u003cbr\u003eSetting to `true` on initial load will play the audio immediately after it is loaded\nloop      | false   | Set to `true` or `false` to enable/disable loop\nmute      | false   | Set to `true` or `false` to mute/unmute current audio\nvolume    | 1.0     | The volume of the specific howl, from `0.0` to `1.0`\nrate      | 1       | The initial playback rate (speed)\nhtml5     | 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.\nformat    | []      | 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).\nxhr       | {}      | 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](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)), include them with this parameter. Each is optional (method defaults to `GET`, headers default to `null` and withCredentials defaults to `false`). For example: \u003cpre lang=\"JSX\"\u003e`\u003cReactHowler src=\"sound.webm\" xhr={{ method: 'POST', headers: { Authorization: 'Bearer:' + token, }, withCredentials: true, }} /\u003e`\u003c/pre\u003e\nonPlay    | noop    | Called when audio starts or resumes playing\nonPause   | noop    | Called when audio is paused\nonVolume  | noop    | Called when volume is changed\nonStop    | noop    | Called when audio is stopped\nonLoad    | noop    | Called when audio is loaded (buffered)\nonLoadError | noop  | Called when an error occurs whilst attempting to load media\nonEnd     |  noop   | Called when media finishes playing\nonSeek    | noop    | Called when the sound has been seeked. The first parameter is the ID of the sound. `onSeek(id)`\nonPlayError | noop  | Called when the sound is unable to play. The first parameter is the ID of the sound and the second is the error message/code. `onPlayError(id, errorCode)`\n\n# Methods\n\n#### duration([id])\nGet the duration of the audio source. Will return 0 until after the `load` event fires.\n* **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.\n\n#### load()\nWhen `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()`.\n\n*Tip*: If you're calling `load()` manually, check the load status with `howlerState()`\n\n#### seek([seek])\nGet/set the position of playback for a sound.\n* **seek**: `Number` `optional` The position to move current playback to (in seconds).\n\n#### howlerState()\nCheck the load status of the `Howl`, returns a string `unloaded`, `loading` or `loaded`.\n\n*This is an alias for Howler's `state()` function*\n\n#### stop([id])\nStops playback of sound, resetting `seek` to `0`.\n* **id**: `Number` `optional` The sound ID. If none is passed, all sounds in group are stopped.\n\n#### rate([value], [id])\nSpeeds up/down an audio playback.\nCalling with no arguments will reset all howls to default rate.\n* **value**: `Number` `optional` The playback rate. If empty, will default to `1`.\n* **id**: `Number` `optional` The sound ID. If empty, all sounds in group get updated.\n\n#### Other howler.js methods\nIf you need to use other howler.js [methods](https://github.com/goldfire/howler.js#methods)\nthat are not included in this wrapper you can access the howler instance directly via `howler`\n\n```javascript\nimport React, { Component } from 'react'\nimport ReactHowler from 'react-howler'\n\nclass App extends Component {\n  getHowler () {\n    this.player.howler\n  }\n\n  getDuration () {\n    this.player.duration()\n  }\n\n  getSeek () {\n    this.player.seek()\n  }\n\n  setSeek () {\n    this.player.seek(0.5)\n  }\n  // This sound file may not work due to cross-origin setting\n  render () {\n    return(\n      \u003cReactHowler\n        src='http://goldfirestudios.com/proj/howlerjs/sound.ogg'\n        playing={true}\n        ref={(ref) =\u003e (this.player = ref)}\n      /\u003e\n    );\n  }\n}\n```\n\n# Howler global core methods\n\nHowler global methods are avaiable in window scope.\nPlease refer to [howler's documentation](https://github.com/goldfire/howler.js#global-methods)\n\nUsage:\n\n```js\nwindow.Howler.mute(true) // Mute all sounds\n```\n\n# Linting\n\nThis project uses standard code style.\n\n[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n\n```\nnpm run lint\n```\n\n# Audio files in examples\n\n#### `sound.ogg`\nTaken from [howler.js demo page](http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library)\nSound file direct link: [sound.ogg](http://goldfirestudios.com/proj/howlerjs/sound.ogg)\n\n#### `sound2.ogg`\nFingerstyle 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](https://commons.wikimedia.org/wiki/File:Fingerstyle_Bass_line_over_an_Am_chord_progression.ogg)\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthangngoc89%2Freact-howler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthangngoc89%2Freact-howler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthangngoc89%2Freact-howler/lists"}