{"id":15646345,"url":"https://github.com/katspaugh/wavesurfer-react","last_synced_at":"2025-05-16T08:05:32.802Z","repository":{"id":214550165,"uuid":"736787179","full_name":"katspaugh/wavesurfer-react","owner":"katspaugh","description":"React component for wavesurfer.js","archived":false,"fork":false,"pushed_at":"2025-04-15T06:11:52.000Z","size":4720,"stargazers_count":97,"open_issues_count":1,"forks_count":18,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-13T18:50:18.778Z","etag":null,"topics":["react","wavesurfer","wavesurfer-js"],"latest_commit_sha":null,"homepage":"https://wavesurfer.xyz/examples/?react.js","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/katspaugh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-28T21:57:06.000Z","updated_at":"2025-05-12T01:50:10.000Z","dependencies_parsed_at":"2024-05-30T13:39:58.535Z","dependency_job_id":"aa97605d-0a40-451f-ada0-0a3512ef3ee4","html_url":"https://github.com/katspaugh/wavesurfer-react","commit_stats":{"total_commits":25,"total_committers":5,"mean_commits":5.0,"dds":"0.16000000000000003","last_synced_commit":"b8d2b1b646f2896c44e95f1d3fc6d2eb3003e674"},"previous_names":["katspaugh/wavesurfer-react"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katspaugh%2Fwavesurfer-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katspaugh%2Fwavesurfer-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katspaugh%2Fwavesurfer-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katspaugh%2Fwavesurfer-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/katspaugh","download_url":"https://codeload.github.com/katspaugh/wavesurfer-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493378,"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":["react","wavesurfer","wavesurfer-js"],"created_at":"2024-10-03T12:12:31.105Z","updated_at":"2025-05-16T08:05:27.794Z","avatar_url":"https://github.com/katspaugh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @wavesurfer/react\n\n[![npm](https://img.shields.io/npm/v/@wavesurfer/react)](https://www.npmjs.com/package/@wavesurfer/react)\n\nA React component and hook for [wavesurfer.js](http://github.com/katspaugh/wavesurfer.js).\n\nIt makes it easy to use wavesurfer from React. All of the familiar [wavesurfer options](https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferOptions) become React props.\n\nYou can subscribe to various [wavesurfer events](https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferEvents) also via props. Just prepend an event name with on, e.g. `ready` -\u003e `onReady`. Each event callback receives a wavesurfer instance as the first argument.\n\n## Installation\n\nWith yarn:\n```bash\nyarn add wavesurfer.js @wavesurfer/react\n```\n\nWith npm:\n```bash\nnpm install wavesurfer.js @wavesurfer/react\n```\n\n## Usage\n\nAs a component:\n\n```js\nimport WavesurferPlayer from '@wavesurfer/react'\n\nconst App = () =\u003e {\n  const [wavesurfer, setWavesurfer] = useState(null)\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  const onReady = (ws) =\u003e {\n    setWavesurfer(ws)\n    setIsPlaying(false)\n  }\n\n  const onPlayPause = () =\u003e {\n    wavesurfer \u0026\u0026 wavesurfer.playPause()\n  }\n\n  return (\n    \u003c\u003e\n      \u003cWavesurferPlayer\n        height={100}\n        waveColor=\"violet\"\n        url=\"/my-server/audio.wav\"\n        onReady={onReady}\n        onPlay={() =\u003e setIsPlaying(true)}\n        onPause={() =\u003e setIsPlaying(false)}\n      /\u003e\n\n      \u003cbutton onClick={onPlayPause}\u003e\n        {isPlaying ? 'Pause' : 'Play'}\n      \u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nAlternatively, as a hook:\n\n```js\nimport { useRef } from 'react'\nimport { useWavesurfer } from '@wavesurfer/react'\n\nconst App = () =\u003e {\n  const containerRef = useRef(null)\n\n  const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer({\n    container: containerRef,\n    url: '/my-server/audio.ogg',\n    waveColor: 'purple',\n    height: 100,\n  })\n\n  const onPlayPause = () =\u003e {\n    wavesurfer \u0026\u0026 wavesurfer.playPause()\n  }\n\n  return (\n    \u003c\u003e\n      \u003cdiv ref={containerRef} /\u003e\n\n      \u003cbutton onClick={onPlayPause}\u003e\n        {isPlaying ? 'Pause' : 'Play'}\n      \u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n## Docs\n\nhttps://wavesurfer.xyz\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatspaugh%2Fwavesurfer-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkatspaugh%2Fwavesurfer-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatspaugh%2Fwavesurfer-react/lists"}