{"_id":"wavesurfer","_rev":"7-376a79da25b96ea0a055f05285160996","name":"wavesurfer","time":{"modified":"2022-06-28T22:13:32.568Z","created":"2014-03-14T05:42:11.270Z","0.0.5-pre":"2014-03-14T05:42:11.270Z","1.3.4":"2017-03-04T19:45:55.094Z"},"maintainers":[{"name":"disrupt","email":"mike.santoro@disrupt.nu"}],"dist-tags":{"latest":"1.3.4"},"description":"Interactive navigable audio visualization using Web Audio and Canvas","readme":"# [wavesurfer.js](https://wavesurfer-js.org)\n\n[![npm version](https://img.shields.io/npm/v/wavesurfer.js.svg?style=flat)](https://www.npmjs.com/package/wavesurfer.js)\n![npm](https://img.shields.io/npm/dm/wavesurfer.js.svg) [![Join the chat at https://gitter.im/katspaugh/wavesurfer.js](https://badges.gitter.im/katspaugh/wavesurfer.js.svg)](https://gitter.im/katspaugh/wavesurfer.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n\nInteractive navigable audio visualization using Web Audio and Canvas.\n\n[![Screenshot](https://raw.githubusercontent.com/katspaugh/wavesurfer.js/gh-pages/example/screenshot.png \"Screenshot\")](https://wavesurfer-js.org)\n\nSee a [tutorial](https://wavesurfer-js.org/docs) and [examples](https://wavesurfer-js.org/examples) on [wavesurfer-js.org](https://wavesurfer-js.org).\n\n## Browser support\nwavesurfer.js works only in [modern browsers supporting Web Audio](http://caniuse.com/audio-api).\n\nIt will fallback to Audio Element in other browsers (without graphics). You can also try [wavesurfer.swf](https://github.com/laurentvd/wavesurfer.swf) which is a Flash-based fallback.\n\n## FAQ\n### Can the audio start playing before the waveform is drawn?\nYes, if you use the `backend: 'MediaElement'` option. See here: https://wavesurfer-js.org/example/audio-element/. The audio will start playing as you press play. A thin line will be displayed until the whole audio file is downloaded and decoded to draw the waveform.\n\n### Can drawing be done as file loads?\nNo. Web Audio needs the whole file to decode it in the browser. You can however load pre-decoded waveform data to draw the waveform immediately. See here: https://wavesurfer-js.org/example/audio-element/ (the \"Pre-recoded Peaks\" section).\n\n### Is wavesurfer.js ES6-compatible?\nES6 refactoring is going on in the `next` branch. In the meanwhile, you can import wavesurfer.js as an ES6 module via WebPack as described [here](https://github.com/katspaugh/wavesurfer.js/issues/767#issuecomment-267768714).\n\n## API in examples\n\nChoose a container:\n```html\n<div id=\"waveform\"></div>\n```\nCreate an instance, passing the container selector and [options](https://wavesurfer-js.org/docs/options.html):\n\n```javascript\nvar wavesurfer = WaveSurfer.create({\n    container: '#waveform',\n    waveColor: 'violet',\n    progressColor: 'purple'\n});\n```\n\nSubscribe to some [events](https://wavesurfer-js.org/docs/events.html):\n\n```javascript\nwavesurfer.on('ready', function () {\n    wavesurfer.play();\n});\n```\n\nLoad an audio file from a URL:\n\n```javascript\nwavesurfer.load('example/media/demo.wav');\n```\n\n## Documentation\n\nSee the documentation on all available [methods](https://wavesurfer-js.org/docs/methods.html), [options](https://wavesurfer-js.org/docs/options.html) and [events](https://wavesurfer-js.org/docs/events.html) on the [homepage](https://wavesurfer-js.org/docs/).\n\n## Related projects\n\nFor a list of  projects using wavesurfer.js, check out\n[the projects page](https://wavesurfer-js.org/projects/).\n\n## Development\n\n[![npm version](https://img.shields.io/npm/v/wavesurfer.js.svg?style=flat)](https://www.npmjs.com/package/wavesurfer.js)\n[![npm](https://img.shields.io/npm/dm/wavesurfer.js.svg)]()\n[![Build Status](https://travis-ci.org/katspaugh/wavesurfer.js.svg?branch=master)](https://travis-ci.org/katspaugh/wavesurfer.js)\n\nInstall `grunt-cli` using npm:\n\n```\nnpm install -g grunt-cli\n```\n\nInstall development dependencies:\n\n```\nnpm install\n```\n\nBuild a minified version of the library and plugins. This command also checks\nfor code-style mistakes and runs the tests:\n\n```\ngrunt\n```\n\nGenerated files are placed in the `dist` directory.\n\nRunning tests only:\n\n```\ngrunt test\n```\n\nCreating a coverage report:\n\n```\ngrunt coverage\n```\n\nThe HTML report can be found in `coverage/html/index.html`.\n\n## Editing documentation\nThe homepage and documentation files are maintained in the [`gh-pages` branch](https://github.com/katspaugh/wavesurfer.js/tree/gh-pages). Contributions to the documentation are especially welcome.\n\n## Credits\n\nInitial idea by [Alex Khokhulin](https://github.com/xoxulin). Many\nthanks to\n[the awesome contributors](https://github.com/katspaugh/wavesurfer.js/contributors)!\n\n## License\n\n![cc-by](https://i.creativecommons.org/l/by/3.0/88x31.png)\n\nThis work is licensed under a\n[Creative Commons Attribution 3.0 Unported License](https://creativecommons.org/licenses/by/3.0/deed.en_US).\n","versions":{"1.3.4":{"name":"wavesurfer","version":"1.3.4","description":"Interactive navigable audio visualization using Web Audio and Canvas","main":"dist/wavesurfer.min.js","directories":{"example":"example"},"scripts":{"start":"grunt; ruby -run -e httpd . -p 8080","test":"grunt test"},"repository":{"type":"git","url":"git://github.com/katspaugh/wavesurfer.js.git"},"author":{"name":"katspaugh"},"license":"CC-BY-3.0","bugs":{"url":"https://github.com/katspaugh/wavesurfer.js/issues"},"devDependencies":{"grunt":"^1.0.0","grunt-contrib-clean":"^1.0.0","grunt-contrib-concat":">=0.4.0","grunt-contrib-connect":"^0.11.2","grunt-contrib-jshint":">=0.10.0","grunt-contrib-uglify":">=0.5.0","grunt-jscs":">=2.7.0","grunt-karma":"2.0.0","grunt-template-jasmine-istanbul":">=0.3.3","grunt-umd":">=2.3.5","karma":"1.3.0","karma-chrome-launcher":"2.0.0","karma-jasmine":"1.0.2","karma-jasmine-matchers":"3.0.1"},"homepage":"https://github.com/katspaugh/wavesurfer.js","keywords":["wavesurfer"],"_id":"wavesurfer@1.3.4","_shasum":"17908abd20da11a8db460c5a176679621d519bfa","_from":".","_npmVersion":"4.3.0","_nodeVersion":"7.5.0","_npmUser":{"name":"disrupt","email":"mike.santoro@disrupt.nu"},"dist":{"shasum":"17908abd20da11a8db460c5a176679621d519bfa","tarball":"https://registry.npmjs.org/wavesurfer/-/wavesurfer-1.3.4.tgz","integrity":"sha512-Td6t6x8vtBWHQu8ijX+OW5O1z3uDOmHrvOl2P7l1638Cy+8MWLM6kYYp7UDNQc3OZgukm8T6Z5+Dnvie9Rjw0w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoszl/5D61e8HDYdW/zaNVyglH9ORJ7DLZKXMOHsUhvQIgY6oUk5lzGwBgMxsJVg4hbUSaW1VrIs4+Is6XXvdjbSc="}]},"maintainers":[{"name":"disrupt","email":"mike.santoro@disrupt.nu"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/wavesurfer-1.3.4.tgz_1488656753136_0.4247691738419235"},"deprecated":"Not_Official_Version_Correct_package_name_wavesurfer.js"}},"homepage":"https://github.com/katspaugh/wavesurfer.js","keywords":["wavesurfer"],"repository":{"type":"git","url":"git://github.com/katspaugh/wavesurfer.js.git"},"author":{"name":"katspaugh"},"bugs":{"url":"https://github.com/katspaugh/wavesurfer.js/issues"},"license":"CC-BY-3.0","readmeFilename":"README.md"}